JavaScript Objects

Hi, and welcome. How’s it going? In this lesson, we are going to be looking at JavaScript objects, how objects work, how we can create objects, set and get values from objects. In addition to objects, we’re going to be looking at how they contain functions, different data types, how you can set up an object using the different property names and how those property names are going to be unique, and then also how we can use this within the method to refer to the current object.

So objects, similar to arrays, allow us to contain multiple values. Group them together nice and neatly within one variable. And objects are indicated with curly brackets, so just like this, we can create a blank object, and if we refresh it, we can output that object into the console. And as we can see, currently it’s blank, so it’s not going to hold any values.

And then in order to set an object, we’re going to need an object name and a property name. So let’s go ahead and create an object. And notice as well that I set the object up as let. With objects, they’re referencing a location within memory. So even though we’re updating the values that are contained within the object, it’s not going to update the object itself because, again, it’s referencing a particular place within the memory. And then you can update that object information by adding in greet, and then we can assign a value.

So just as we’ve done with the other variables, we’ll assign a value into it. Now, let’s take a look at the object within the console. Object name, it’s got these name-pair values, so the name and the value that’s paired with the name. So in order to reference and get the value of Hello back, we reference the object, and then we indicate the name that’s going to contain that value.

And within the my, we’re going to look for another greeting, so can call this one greet2, so saving that. And then once again, we can output into the console. So all of these name values are going to be unique. If you set another object, a name of greet to it, that’s going to overwrite the first one, that particular object. Also, when you create the object, you can set these values, and they’re paired together with the colon. So on the one side, we’ve got the name, and then the other side, we have the value. So in this case, we won’t actually be able to see world because we’re overwriting it several times. Time we’re outputting it into the console, it’s already changed, and we’ve got the greet as hello and greet2 as world.

So for instance, if we want to reference the object and get back greet, the other value there, so that’s the myObject, and this is greet2. So let’s save that, and you can see that gets output into the console. So any updates that we make were the object values, they’re going to change those values. And then these names are always going to be unique. You can also change the data types if you want as well.

So if want greet to be 500, and you can see that the output is going to be within a string format because we’re opening into the console, and we’re adding it together with a string value. If it’s on its own, if we’re just looking at greet on its own and we save it, it stays on number value. So the data type still stays persistent unless we’re– just like the other JavaScript that we saw earlier, when we’re adding it together.

Now, typically, with an object, way that we’re doing this is that we’re setting an object and we’re grouping values that belong together. So an object would typically describe something, and you can list out all of the properties grouped together nice and neatly within the object format. So for instance, you had a make, so this is going to be a car. And these are all values that would typically belong together. Color, so that’s another property that we can add to it, the year if we want. Can also update these values and add them in at a later point as well. So this would be year.

So now when we save that and we output car, we’ve got all of these values nice and neatly grouped together, and we can easily reference car.make, car.model, car.color, car.year. There’s two ways to reference the values and return the values from the object, so one that we have seen as the dot notation where we’re separating the object, the main object, and the name.

Or if we write it with the bracket notation, this is going to be similar to what we saw with the arrays where we can do a car, make. And this needs to be with quotes, and it’s going to actually output the same values. So it’s referencing that same value where we’ve got within the object car, we have a make, and that’s returning back the value of car. So that’s what we’re seeing being output there in the console.

Also, if we set up car2 and we equal it to car object and we console log out the values of car2, you’re going to see that it did get all of those same values. Now, what do you think happens when we update one of the values in car2 color of it? So maybe you’ve got the color and you’ve got it painted blue, and we’ll console log out the original car object.

And we’re going to reference it, and you’re going to see that even though we’re calling back the first car object, we’re getting the change that was applied to car2. And the reason being is that objects, they’re not living on their own. They’re referencing that memory location that we talked about earlier. So both of these, car2 and car are referring to the same object. So if you change one, it’s actually going to change in the other one.

So that’s something to keep in mind when you are working with objects. We could set up car3, and we could use the object assign method, so object assign, and this is going to allow us to assign a new value to an object. So we’re going to create a brand new blank object, and we’re going to assign the value of car to that object. So now when we look at the console log, car3, and then we make an update to car color and output console car3 again, you’re going to see that nothing changed because car3 is now independent because we used object assign and we created a brand new object for car three, whereas car and car2 are going to take those changes because they’re referencing that same location.

So you can also have functions within objects. So if we had a function of drive, we would added in the same way. And this is how objects get distinguished from JSON data because of course, within JSON data, you can have these name pair values and you need to code around them to be actual JSON data, but they’re not able to have the ability to have functions with them.

So you can set up a function. This can be an anonymous function, and it can do something. So in this case, we’ll just have it console logout driving car and output that. So whenever now we– I’ll clear this up and reference car and we do drive, you’re going to see that we can run that function. And this function is going to live within the object. So it’s going to give us the ability to interact with it, and it also gives us the ability to interact with some of the object content.

So for instance, if we wanted to reference the particular object that we have at the time, we can reference the car and use this make. And using the keyword, this is going to actually reference the current object. So instead of having to say car or have to know what object this function is living within, we can just reference it by this.

So now if I do car drive, you’re going to see that it’s driving car car because car is the value of the make. Let’s update this to model, and also, I’m going to add in a space here so it looks a little bit better and clear that, and we’re going to reference car drive as well. So now driving Mustang car. Because we have associated car2 with the car1 object, we can also reference car2 and drive. And because at the time when we recreated car3, we can also have car3 drive.

If we update in car3, the model, and let’s change it to a Honda, and now let’s do car3 drive function driving Honda car. So as we’ve updated it, this value that this is referring to is changing as well. And this makes the code more dynamic. Gives you more options on what you can do when you’re using objects in JavaScript.

So go ahead and give this one a try. Get more familiar with objects. Look around the room and try to describe it within the code, within one object. You can also include arrays as data types. So you can have various arrays. So just as we saw with– let me just update that code there. So now whenever we do look at car, we can see that it does have an array in there, and that array can be called back using the car object.

And then you can also get really complex objects in JavaScript where you’ve got objects within objects, so then they can have arrays. And there’s a whole bunch of fun stuff that you can do with this. so try it out for yourself. Get familiar with it. Update some of those values. Try the dot notation as well as the bracket notation when you’re getting the values and you’re setting the values of your object that you’re creating.