Trouble understanding the .play() and .stop() in the Playlist.prototype.play and Playlist.Prototype.stop functions.

Hey there, you ask if It uses the play method from the Song constructor when you see this inside the Playlist constructor I guess:

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

Yes It does, it actually calls the play method defined inside the Song constructor.

Why ? Because as you notice, the method is called on an object called currentSong, the currentSong is an object you get thanks the current index of the PlayList object you set.

To see it, check the Playlist constructor

function Playlist() {
  this.songs = []; // this array is then filled with all the song objects we create inside the app.js file
  this.nowPlayingIndex = 0; // this property is set according the currentSong (change when we push the next and previous button as an exemple).
}

As you see, each playlist object comes with an array with all the songs objects and a property with the current song (its index in the array). But when you create this object, this array is firstly empty, so you need to fill that array later on.

To fill the playlist object created in the app.js file. Andrew first creates all the songs (which are obviously objects create based on the Song the constructor).

Check the code below to see it.

var hereComeTheSun = new Song("Here comes the Sun","The Beatles","2:54");
var walkingOnSunshine = new Song("Walking on Sunshine", "Katrina","3:54");

Not only he sets the name of the songs and their duration, but as defined in the constructor these songs have a property (isPlaying) set by default to the boolean false. So they all have this property and as well the methods defined with the help of the prototype.

One of these methods is the play method... (the one you are talking about, which is called inside the play method of the playlist, but called on the song object ! )

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

After that, as the songs are created, Andrew adds all the songs to the songs array which is inside the Playlist object (which is empty at first) thanks the add method of the playlist consctructor created previously.

Playlist.add(hereComeTheSun);
Playlist.add(walkingOnSunshine);

// This actually fills the songs array in the Playlist objects with the added songs objects. Remember they have their properties and methods ( such as the play method and etc...)

This add method as you might have seen simply fills the array thanks the native Javascript push method.

So instead of having an empty array within the Playlist object, we now have a Playlist object with songs objects filling our song array.

Do not forget that these songs we pushed have as well as I already wrote above a property called "isPlaying" set to false by default and methods such as stop and play.

As you have probably seen, some others methods are available within the Playlist constructor as Andrew creates them with the Playlist constructor. One of them is as an exemple the next method.

And what happens is that when we click the next button, the next method is called.

Because of that, the nowPlayingIndex property inside our Playlist object is incremented.... and thus the currentSong is changed !

At first the nowPlayingIndex is at 0 when the playlist is created.

So based on the songs we added above at first the currentSong variable defined in the play method of the playlist object referes to "here Come the Sun". Because the current Index is 0 at first.

As litteral object it looks this way

{title: "Here comes the Sun",
 artist: "The beatles",
 duration: "2:54", 
 isPlaying: true,
 play: function(){         /** **/

  this.IsPlaying: true;
  },
  stop:function(){
  this.isPlaying = false;
  }
}

/*
  var currentSong = this.songs[this.nowPlayingIndex];
  currentSong.play(); calls the play method on the song object
*/

So when we push the next button, It's the next song stored in the song array of the Playlist Object that 's stored in the currentSong variable, and the methods of this object stored inside the currentSong variable can be called.

So even if both objects have a play method this isn't an issue, because when you call the play method on the currentSong variable, you call the play method of the current song* object !

I hope It makes more sense.