2.2 Objects

In the previous lesson you learned about variables and functions. They are two very important parts of not just JavaScript, but programming in general. It doesn't matter what language you want to learn, you will be working with variables and functions, because just about every programming language has them. Well in this lesson, we are going to talk about something called objects. They are very special types of values that we can use to organize the data that we work with within our code. Objects are a very important part of JavaScript because JavaScript is an object oriented programming language. And there are many object oriented languages available. So the things that you learn here can be applied to other languages like Ruby, C#, PHP to some extent, and any other language that has objects. So you can think of an object within our code as an object in the real world. For example, I am going to describe an object that I have in the room with me, I'm going to pick one of my guitars and I'm going to describe it. And as I do so, I'm going to translate that into JavaScript. So I'm going to create a new file, I'm going to call it object.js and I'm going to create a variable called guitar. I'm going to set this equal to a pair of curly braces. Now this is probably going to look a little weird, but in JavaScript, when you see a pair of curly braces by themselves that aren't accompanied with function, this means that we are creating an object. Now in JavaScript we can create an object in a variety of different ways. But this is the most standard way to create just a standalone object, which is what I'm doing here. So we've created an object and assigned it to a variable called guitar. So we can say that we have a guitar object. Now in the real world, our objects have what we call properties. And they typically describe something about the object that we are working with, like, for example, the guitar that I'm looking at is an electric guitar. So we can say that the type of this guitar is electric. And notice what I've done here, I've used the name of our variable, our guitar object. I've used a dot to separate the guitar object from what we call its property. The property is a very special variable that is attached to this object. We can't access that type property by itself, we have to say that we want the type property on the guitar object. So we have our object's name, followed by the dot, and then the name of the property type, in this case. And that is set to electric. So, now we know that this guitar is an electric guitar. But we can also have another property. Let's see the numberOfStrings. Because some guitars have 6, some have 7, I've seen some with 8, there are some with even 12 strings. So the one that I have is a six string guitar. That's your standard guitar. So, we have another property here. It is essentially describing our guitar object. So, it is an electric guitar. It has six strings. It also has a color of black. So let's go ahead and create a color property and assign that to black. We can also create a property called manufacturer, that is, the company that created this guitar. And that is Paul Reed Smith, or we can just say, PRS. So we've created an object called guitar. It has a type property set to electric so we know that this is an electric guitar. We have the number of strings that this guitar has, the color, and the manufacturer that made that guitar. So these are properties. They are essentially describing things about this particular object that we are working with. Now an object could have something else called a method. A method as nothing more than a function. But it is a function that performs work on the object itself. Like for example, there are controls on the guitar, there are knobs that allow us to adjust the volume of the guitar. It also allows us to adjust the tone. So we could have a method. It's a function to set the volume of our guitar. So, we could call this method setVolume. And then just like our other properties, we are going to set that equal to something. But in the case of a method, it's a function. It's something that we execute. So we just simply say, function. In this case, if we want to set the volume, we need to know what we want to set that volume to. So we can have something called a parameter. It is a special variable for this function itself. And it's only used within this function. So that inside of this setVolume function, we could do something to set the volume equal to the value. Now notice how I typed that. I used guitar.setVolume. At this point, it looks like just like any other property. But then we say equal and then function. Now notice that this is different from the function that we created in the previous lesson. We had a function and then the function name, and then our parentheses. Now we could have a parameter here if we wanted to for this sayHelloWorld function, but we don't need one because this function performs its own work. But creating this function is a little different, because we had the name of the function after the function keyword itself. Here it doesn't have a name. But that's okay because this function is being assigned to setVolume. So we could still call this function, but we would have to say guitar.setVolume. And then we would pass in whatever value that we wanted to set it to. A guitar knob goes from zero to ten. So we could say that we wanted to set the volume to ten. Because that typically gives us the best tone. Well, now let's change the name of our guitar object. Guitar was fine when we just had some generic information. But now we have some more specific information. The only thing we don't have is the actual model, so let's say guitar.model = 245, that is what this guitar is that I'm looking at, it is a PRS 245. So let's change the name of this object to prs245. This is a good practice whenever you are writing code. If you know what type of object that you're working with, give it a very specific name so that you know what type of object it is just by looking at its name. Because we can also come in here, and I have another PRS, I like PRS, called Starla. So we could create another object called prsStarla and it could have the same properties. We could set the type equal to electric. The number of strings is going to be six and so on and so forth. But this prsStarla is very specific to that particular object, just like prs245 is specific to that object. And so we've set its volume to ten. But let's say that's we want to play softly. And we do that with a standalone function simply called playSoftly. And this is going to accept a guitar object. So we are going to pass a guitar to playSoftly, and then inside of this function it's going to set the guitar's setVolume method to something other than ten. If we set it to five, that doesn't sound like that would be very soft, but believe me, it's much softer than ten. So we have this method to set our volume, and then we would have some code to play the guitar. I don't know what that would look like, so i'm just going to use a comment. This is called pseudocode. It's where we flesh out the idea of what we want our code to look like, or what we want our code to do. It's just a planning type of thing, so that we can always come back and actually implement that code at a later time. So we have this function called playSoftly. And we decide that we want to play our guitar softly. So we call playSoftly. We pass in our guitar object. And that's going to play our guitar softly. And this is where the beauty of object oriented programming comes into play. Because we simply pass in this single object, it's a guitar object, but it has all of this information about it. So that we don't have to pass in the type, and the number of strings, and the color, and so on and so forth. All of that is combined together with a single object called guitar. So this is what objects allow us to do. It allows us to organize our data into logical objects, and there are a lot of detractors to object oriented programming. But to me, it's natural. We are object oriented people. It makes sense that our code is object oriented itself. Now this topic of objects is very important because whenever we get into the browser, everything that we work with is going to be an object. Every element within our HTML Is represented as an object within JavaScript. So that if we need to work with an element in order to change its style or to add elements, or remove elements, we are working with objects.