Introduction to JavaScript objects. And to begin, let's start with a question. What is a JavaScript object? A JavaScript object is a collection data type, and each piece of data that is inside of a object is referred to as a property of that object. And a property is made of two parts: a key which is the property's name, and the value, that is associated with that key. And these properties are known as key value pairs.

JavaScript objects can be used to represent real-world objects as data. To demonstrate this, I'm gonna begin by creating a car object, cons car equals curly brackets. And the first property I'm gonna type is "make", then colon. And then this is gonna be a string value, "Ford" wrapped in quotes, then comma.

Next, I'm going type another property, with the key name of "model" colon, and then in quotes, a string value of "Bronco" comma. And I'm gonna pause for a moment before completing this object, I'm gonna zoom in and point out this key value pair structure. The key name make is written directly as part of the object. Note, there are no quotes. The colon is the separator between the key and the value. And then to the right of the colon is the value. Here, the string Ford wrapped in quotes. Then there's a comma and the comma is what separates one property from another.

So each property in the object needs to have a comma, unless it's the final property in the object. Now I'm gonna finish writing out the car object. I'm gonna give it another property of "AWD", short four All Wheel Drive colon with a boolean value of true, comma. Then a color property. Colon with a string value of blue, comma and then a trim property, colon within array value of standard, xlt and lariat. And now the object is done. And what we have here is a JavaScript object that is representing a real life object, a car.

Now in JavaScript, these values don't have any restriction. They can be of any data type. They can be strings, arrays, numbers, and other objects. Now I'm gonna console log the car. And the result looks very similar to how I wrote out the object.

Now, how do we access a specific value from a property that's in an object? Well, there are two ways to access object property values, and I wanna console log each of these methods. First, I'm gonna comment out the car console log using what is called "dot notation". I gonna console log the cars all wheel drive property value. Console dot log, car dot AWD. Next using square bracket notation. I'm gonna console log the car objects, trim value, console dot log, car square brackets. When using square brackets, we have to wrap the property name in quotes. Trim.

Now I'm gonna clear the console and run the console logs. We can see the values for each of these properties. The first console log is using dot notation. The second console log is using square bracket notation. Now, is there any real difference between these two methods? Well, any property name that has a special character or number can only be accessed using square bracket notation.

Now noting that the trim property is an array. If I wanted to access a specific value from that array, I would have to use an additional square bracket notation with the index value of that element that I wish to access. So for example, I'm gonna go back to the trim console log add a square bracket and put in a value of one. To get the second element in the array. I will run this again and in the console log now, instead of the array, I have the element value of XLT.

Now I'm gonna comment the cell. And the next question that needs to be asked is, "How do we change property values in an existing object?" We can do so using the same methods we use to access the values. So I'm gonna start by typing car dot make equals Toyota, and then next, car dot model equals Corolla. And now using square bracket notation, car square bracket in quotes, AWD equals false.

Now, un comment console dot log car and hit run. Now in the console, we can see that the make property has a value of Toyota. The model property has a value of Corolla and the AWD property, has a value of false. Now, can we use the same methods to add a new property and value in an existing object? Absolutely.

So on the next line below using dot notation, I will type car dot doors equal four. And on the line below using square bracket notation, I will type car square brackets wrapped in quotes, navigation equal true. And now I'm gonna run this in the console again. And now to the right, the car object has two new properties, doors with a value of four and navigation with a value of true. And that's it. Thanks for watching at Cloud Academy.