Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Object-Oriented JavaScript (2015) Constructor Functions and Prototypes Playlist Project

Is play() in playlist.js related to play() in song.js?

This is on playlist.js

playlist.js
Playlist.prototype.play = function() {
  var currentSong = this.songs[this.nowPlayingIndex];
  currentSong.play();
};

and this play is on song.js

song.js
Song.prototype.play = function() {
  this.isPlaying = true;
};

are they related functions or are they different things? because I'm not sure how currentSong.play(); works really

2 Answers

Hi Wilfredo,

Object-Oriented Programming is all about modeling real world objects and deciding how these objects are related to one another — if they are, in fact, related. In this case, our idea of a Playlist is something that contains a list of Songs. Another way of saying that is that our Playlist object has an array in it ... and that array is made up of a bunch of Song objects.

The whole point of modeling things like this is so that we achieve a sort of separation between our concerns. We don't really want Playlist to know too much about Song and we don't really want Song to know too much about Playlist. So we encapsulate all the data and methods related to a specific Song in the Song object and likewise with our Playlist stuffs and the Playlist object.

So, say we want to tell a given Playlist instance to play the first song in it's array of Song objects. Playlist doesn't have to know what "play" really means. All it has to know is the name of the method to call on a Song object and which Song object to call it on. Easy enough, right? Playlist just accesses the song at index 0 and calls its play() method.

Let me know if that helps :)

Hey Mikis,

When you say "We don't really want Playlist to know too much about Song " do you mean the Playlist.js file? or the Playlist() function?

What confuses me is that, before, when we wanted to bring JS to our HTML file we did it through a <script src =###.js>, but now, if you say that 'Playlist just accesses the song at index 0 and calls its play() method.', does that mean that playlist.js and song.js can easily communicate without bringing one to another?

Thanks for the answer!

Hey Wilfredo,

So the filenames are arbitrary; they have nothing to do with Object-Oriented Programming. You can make as many files as you want and they'll all be run in the order that you list them in, in your html file. So, given this html file...

index.html
<script src="song.js"></script>
<script src="playlist.js"></script>
<script src="something-else.js"></script>
<script src="app.js"></script>

... all those JavaScript files will be run in the same runtime, in the order that you list them in. So, given the order above, anything you write in song.js will be available to you in playlist.js. And stuff in both song.js and playlist.js will be available to you in something-else.js. And likewise with app.js.

Hi Mikis Woodwinter I had same question, but i am still lost with your answer.

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points

I am still not sure why the code isn't like this

cuurentSong.Song.play();

because play is a part of the Song constructor how are we able to access Song without mentioning it?

Of course They are related . when u call currentSong.play() the object currentSong is an object of type Song So automatically the play() method of the Song object gets called .