Simple Understanding of JavaScript Objects Part 1

Source: Dev.To

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!

Source: izmocars

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.

Creating a Tesla Object in JavaScript

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.

Follow Me/Reach out for help

Instagram

Facebook

LinkedIn

Twitter

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nick Hollins

Nick Hollins

Developer. Writer. Creator. Always learning. Feel free to email me: hollinsaquile@gmail.com