3.2 Objects

Hi folks. In this lesson, we're going to take a look at the all important objects. We looked at them very briefly earlier. Let's just recap on some of the basics quickly, first of all. So objects in JavaScript consist of a series of comma separated key-value pairs within curly braces. The key-value pairs are known as properties, and consist of an identifier and a value. The identifiers are also called keys. The values can consist of any other data type including objects and even functions. This way of creating objects is known as object literal syntax. And it's the recommended way to create objects. Like with a arrays, there is also a constructor that can be used. Also, just like with arrays, it is recommended to always use the literal form. There are two different ways to access the values held within an object, and two different ways to add new values. We can use dot notation to access them. And we can also use square bracket notation. So both of these forms are treated identically by the JavaScript engine. We can also use both these forms to set new values. So these are equally as valid. Dot notation is more commonly used to get or set property values. But square bracket notation can be very useful if we want to use a variable to access or set object properties. Let's just look at a quick example of this. So here we've declared a simple function called getThingByColor, which accepts a single parameter called color. We've also defined an object inside the function called things. And this object has a key called red, a key called green, and key called blue. And each of these properties has string values. We can use the return keyword to either return the thing from the object, or the default string, sorry no thing of that color exists. So the useful thing here is that when the function gets invoked, we can pass through either red, green, or blue, and we will get the corresponding value from the objects. Inside the function, however, we don't know which color is gonna be passed, and so we just use the color parameter with square bracket notation to get the matching property from the objects. Notice how we use the logical or operator here to return the default message if a color is passed to the function which doesn't have a corresponding key in the objects. This works because if we try to access a property of an object that doesn't exist, we get undefined, and undefined evaluates to false. And let's just check in the browser that it is working the way that we expect. And we can see that the function is working in the way that we expect. So, in this lesson, we looked at some object basics in JavaScript. We saw the different ways that we can get the values stored inside the objects, and how we can add new properties. And we saw that both of these things can be accomplished with either dot notation or square-bracket notation. In the next lesson, we'll look at sets. Thanks for watching.