Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Wilfredo Casas
Wilfredo Casas
6,174 Points

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

miikis
miikis
44,957 Points

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 :)

Wilfredo Casas
Wilfredo Casas
6,174 Points

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!

miikis
miikis
44,957 Points

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.

ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

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

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points
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?

Uoptyu Uiyo
Uoptyu Uiyo
511 Points
Uoptyu Uiyo
Uoptyu Uiyo
511 Points

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 .