Simple Understanding of JavaScript Objects Part 1
So what is a JavaScript object anyway?
First, let’s look at an object in a more non-programming sense such as a car. A car can have different colors, it can be manufactured by different companies (e.g. Ford, Kia, Tesla(What’s up Elon 😁), Chevy, etc.…), it can have different engines, different tire sizes, and plenty of other different properties. We can look at JavaScript objects the exact same way! So an object in JavaScript is simply just a entity that has properties to define the characteristics of that entity. If we created a car object in JavaScript (we will later), one of the properties of that car would be a color.
Ok, that’s cool but what does objects have to do with coding?
If you are a developer, you may have seen the term “OOP” or “Object-Oriented Programming” at some point, and if you haven’t yet I’m sure you will. Object-Oriented Programming is a way to write code using objects. When doing this, you can write, create, and even manipulate objects. Those objects will become the thing that makes up your program. This is important because OOP changes the way that you write a program and how that program is organized (for the better in my opinion). So before learning about objects in JavaScript we were coding using function-based code . Now let’s learn how to create these objects.
Let’s Create A Tesla Using JavaScript!
Since I am a fan of Elon Musk (when he’s not manipulating the crypto market 😕) We are going to create the Tesla that you see in the picture above just based on what we see. You can create a JavaScript object almost the same way as you create variable(kind of) but let’s take a look at this code example below.
The Code Explained
Ok, so these six lines of code just created a very basic example of the Tesla that we seen earlier. Let’s break this down line by line to understand better. Line 62 we are initiating the object. In the simplest terms we are creating a object named tesla. You could have used let instead of const in this example also. The main thing to take note of on line 62 is that after you declare the the object name there should be an equal sign “=” sign along with curly brackets “{}” right after it. On line 63–66 is everything that goes inside of the curly brackets. Think of it as the object body. Also, line 63–66 are what you call properties of the object, in other words these properties is what defines the characteristics of the tesla. It’s important to note that these properties are name-value pairs (color being the name and ‘red’ being the value) and this is called an object literal. So line 63–66 are just name-value pairs but pay special attention to the comma that separates each property because that is very important to add. Now lets access some of the properties of this tesla(object).
Accessing a Object Property
Once you create a object there is a way that you can access the properties of that object. So for example, let’s say that we wanted to access the color of the tesla. We can do that by using the dot notation (myObject.myProperty) to access that color. We would say tesla.color to access the color of the tesla. We can put that inside of a console.log to see the results inside of the browser’s console.
End of part 1
If you have never seen or heard of JavaScript Objects then that can be a lot to take in and that’s ok. We will dive more into objects in part 2 and create an actual program using JavaScript Objects. This simple concept will start getting complex the more we dive into objects.
