Objects and Arrays | Bondar Academy
Course: JavaScript for Testers
Module: JavaScript Fundamentals
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore objects and arrays in programming. These are essential data structures that allow us to store and manipulate multiple values effectively. Objects Objects are used to combine several pieces of data into a single reusable component. They are defined using {} (curly braces) and store data in key-value pairs . For example: let customer = { firstName: "John", lastName: "Smith" }; To access values, you can use: Dot notation: customer.firstName Bracket notation: customer["firstName"] To modify values, simply assign a new value: customer.firstName = "Mike"; Arrays Arrays are lists of items, defined using [] (square brackets). For example: let cars = ["Volvo", "Toyota", "Tesla"]; Each item in an array has an index starting from zero: Volvo: index 0 Toyota: index 1 Tesla: index 2 To access an array item, use its index: console.log(cars[0]); // Outputs: Volvo Arrays can also be part of objects, allowing for complex data structures: let customer = { firstName: "John", cars: ["Volvo", "Toyota", "Tesla"] }; To access a specific car: console.log(customer.cars[0]); // Outputs: Volvo Summary In summary, objects are defined with curly braces and store data in key-value pairs, while arrays are defined with square brackets and maintain an ordered list of items. Both structures can be used together to create complex data models.
Video Transcript
In this lesson, we will talk about objects and arrays. Objects is a mechanism where you can combine several pieces of data together into a single reusable component and then use this component later in your code. And object and array have slightly different syntax. Object work with a structured data and array is more like a list of the values in the single building block. So in this lesson, I will show you how to create objects, how to create arrays, how to add values into the objects, and how to read the values from the objects and arrays. Object is an entity that can hold multiple values at the same time. Remember when we talked about variables in the lesson one, I mentioned that variable not necessary can hold only just one value. It can hold multiple values. And to hold the multiple values, we need a construction called object. So how the object is defined. Let me create a new one. So let me create a new variable and I will call this variable a customer. And I want this variable to hold information about first and last name of our customer. How to do that? Object is defined by curly braces and then the information hold inside of the object in the key and value pair. So I provide a key which is first name and provide the value. Let's say John. Then values are separated by comma and I provide the second value which is last name which is our key and the value for this key will be Smith. This is our simple object customer with first name John and last name Smith. So all this information is saved inside of this variable customer. Now how to get access to this information? So very easy. If we go to the console log and simply print our customer object to the console, let's see what happens. I run lesson three and we see that entire object is printed, right? First name John, last name Smith. If I want to print just the first name, all I do is just customer dot first name and run this again and I see it's printed John or I can do customer dot and look what I have. So the Visual Studio Code tells me which values are available inside of my objects. So when I put dot after the customer, it shows me, hey, we have a first name and last name available property. Which one do we want to choose? I want to choose last name. I choose the last name and run it one more time and we have a Smith. That's the approach number one. The second option, how we can access our values inside of the object using the square bracket notation. In this example, we need to provide the value as a string in the single quotes inside of the brackets that we want to get. Here we go and the Smith is printed one more time into the console. So what if we want to change any values inside of our object? That's very easy to do. We just call our customer then dot let's say first name and we assign a new value. Let's say we want to replace John with Mike and I remind you, we can use either single quotes or double quotes over here. And let me make a comment here that this called as dot notation. And let's say we want to change the last name as well. So we can take our bracket notation. Let me copy this. So you can use either or both approach will work just fine. And we change the last name to silver. And I make a note that this call as bracket notation. Just for my notes. Now let's bring both of those values into the console using interpolation. So I put the back ticks, then dollar sign, curly braces, customer dot first name, space and then another dollar sign, customer, dollar sign, brackets, customer dot last name. And I run this code and we see here we go. The Mike silver is printed to the console. All right, so this was about the object. Now let's talk about the arrays. What is array? Array is another type of the entity, which is a list of items that you want to save. And they are just placed inside of the array as an order. So let me create a new variable and let me call it cars. And let's say our John Smith or right now Mike silver has different cars. And those cars are, let's say Volvo, we call Toyota. And since this is a strings, we need to put them in the quotes. And let's put the third vehicle and we call it Tesla, for example. We have three cars, but we don't have the exact definition of what exactly this car is. For example, with the object we have, okay, the John is first name is not the last name and Smith is belong to the last name. In this example, we are just putting the list. Hey, we have just a list of three items in this particular variable. Car gonna keep for us those three items in the particular order. One, two, and three. Also array has an index. An index in the array always start with zero. So Volvo will have index zero, Toyota index one, and Tesla will have index two. So knowing that, how to get the values out of the array? Very simple. So let me put console.log. And let's say we want to get the first car from our list. So we put square braces and put the index of the item that we want to get from the array. If I will run it and print it, and here we go, we have printed a Volvo. If I will change this to index one, the value Toyota will be printed to the console. And the same way we can override the values inside of our array. Let's say we want to replace the second car with index one. We want to replace it with BMW, right? And in this case now, when we run the same exact code, console will print BMW instead of Toyota. Because we replaced the value under index one inside of our array with a new value, which is BMW. And one more thing. Our objects also may have an arrays. For example, we may add into the list of the customer, the list of cars, right? Because our customer may have a cars. And if we put the list of cars inside of this object, all this information will be there. Our customer John Smith has three cars. And the same thing, how to get access for the, let's say, first car of the John Smith. So we put console log, then we call our customer object dot cars. And we provide the index of the item that we want to get. And I run this code. And we see that Volvo is printed into the console. All right, so that's it. And this is the difference between objects and arrays. One more time. Object is defined by curly braces. And the information inside of the object is saved in the format of key and value pairs. And key and value pair is separated by colon. And each key value pair is separated by comma. Arrays are defined by square braces. And you keep just values inside of the arrays. Array has exact order of the items placed inside of the array. And this order has an index. First element has index zero. Second element has index one. Third element has index two. And so on. Also, array can be part of the object and can be defined as a value for a key. In this way, you can build a very complex object and data structures to keep different types of information inside of your object. In order to read or modify data inside of the object, you can use bracket notation or dot notation. All right, that's it, guys. And see you in the next lesson.