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 ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

How playlist is related to other pages?

I am trying to figure out how is the following code related to other files

var Playlist = new Playlist();

var hereComesTheSun = new Song ("Here Comes the sun", "The Beatles", "2:54");
var walkingOnSunshine = new Song("Walking on Sunshine", "Katrina and the waves", "3.10");

playlist.add(hereComesTheSun);
Playlist.add(walkingOnSunshine);

I really didn't understand what is going on here, when we do 

var Playlist = new Playlist();

Where is constructor for it and others.

2 Answers

Cesar De La Vega
Cesar De La Vega
13,900 Points

Hi ammarkhan. I'll try to answer your question to the best of my abilities. If my answer is not correct, someone please correct me if I'm wrong. 

//creates a new playlist and stores it in the variable 'Playlist'. When you type Playlist(); you are calling the function that lives in the playlist.js file...

var Playlist = new Playlist(); 

// ... which looks like this : 
function Playlist() {
  this.songs = [];
  this.nowPlayingIndex = 0;
}  
// .... etc

//then you create a new variable called hereComesTheSun and give it the value of new Song which is the function you created in the song.js file ...

var hereComesTheSun = new Song ("Here Comes the sun", "The Beatles", "2:54");


// which looks like this: 

function Song(title, artist, duration) {
  this.title = title;
  this.artist = artist;
  this.duration = duration;
  this.isPlaying = false;
} 

// ...etc

// Lastly, you are adding the new song to your playlist. You stored the new song in the variable called hereComesTheSun

playlist.add(hereComesTheSun);

// the part of the script that adds your new song into your playlist looks like this :

Playlist.prototype.add = function(song) {
  this.songs.push(song);
};
ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Thanks, This explains all.

Cameron Chong
Cameron Chong
4,298 Points
Cameron Chong
Cameron Chong
4,298 Points

Where is constructor for playlist?

This part in playlist.js:

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

Something I didn't realise in JS is that constructors are just normal functions, they look the same and are written exactly the same, they don't have any special syntax or keywords like in other languages such as Java or PHP. This is what people mean when they say functions are "first class objects" in JS.