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

Jonah Shi
Jonah Shi
10,140 Points
Posted by Jonah Shi
Jonah Shi
10,140 Points

I don't understand this.nowPlayingIndex as the key

I don't understand this.nowPlayingIndex as the key, nowPlayingIndex is 0, how does it increase by using this.nowPlayingIndex? Can someone explain ?

3 Answers

Jordan Gauthier
Jordan Gauthier
5,552 Points
Jordan Gauthier
Jordan Gauthier
5,552 Points

The variable (or Playlist property), this.nowPlayingIndex, is set to 0 in the constructor function. When the "Next" button is clicked, the Playlist.prototype.next method is called and within this method, the variable this.nowPlayingIndex is incremented by 1 using the ++ shorthand.

this.nowPlayingIndex being declared and initialized in the Playlist constructor function

function Playlist() {
  this.songs = [];
  this.nowPlayingIndex = 0;
}

this.nowPlayingIndex being incremented by 1 using the ++ shorthand (equivalent to this.nowPlayingIndex = this.nowPlayingIndex + 1;)

Playlist.prototype.next = function() {
  this.stop();
  this.nowPlayingIndex++;
  if(this.nowPlayingIndex === this.songs.length) {
    this.nowPlayingIndex = 0;
  }
  this.play();
};
Jordan Gauthier
Jordan Gauthier
5,552 Points
Jordan Gauthier
Jordan Gauthier
5,552 Points

Within the Playlists' next function, this.play() is called which calls the Playlist's play function. Inside the Playlist's play function, the variable currentSong is set to the new song based on the integer held by this.nowPlayingIndex. Then, the song's play() function is called, currentSong.play() and this updates the css style.

Jonah Shi
Jonah Shi
10,140 Points
Jonah Shi
Jonah Shi
10,140 Points

Thank you Jordan for your replay, this.nowPlayingIndex is used before the next function ( where it is incremented ), how do I know it's already incremented and pointing to the current song?

Jordan Gauthier
Jordan Gauthier
5,552 Points
Jordan Gauthier
Jordan Gauthier
5,552 Points

When the Playlist.prototype.play function is run for the first time, the currentSong will be set to the first song in the this.songs array or (this.songs[0]). The only time this.nowPlayingIndex will be incremented is when the Playlist.prototype.next function is called, and this is called by clicking the "Next" button on the webpage.

Before, this.nowPlayingIndex is incremented, the Playlist.prototype.stop function is called. This will stop the current song, before this.nowPlayingIndex is incremented to the next song. After, this.nowPlayingIndex is incremented, then Playlist.prototype.play is called. This function now uses this.nowPlayingIndex with the new, incremented value.

I hope this helps.

Jonah Shi
Jonah Shi
10,140 Points
Jonah Shi
Jonah Shi
10,140 Points

Thank you Jordan, this now makes more sense to me, I'm wondering in Playlist.prototype.next function, why use this.stop(), and this.play() instead of currentSong.stop(),currentSong.play(), how can "this" point to the current song, but not the Playlist object itself?