Understanding JavaScript Objects: From Basic Concepts to Practical Usage
Tags: javascript, beginners, tutorial, webdev
Published: 2022-11-11 12:23:32

## 1)- What is an object in JavaScript?
In JavaScript, objects are a fundamental data structure that represent collections of data.

In the real world, there are many objects that have many properties and behaviors like pen, pencil, car, knife, fork…. Same thing in JavaScript, objects have a number of properties and methods that allow them to be manipulated and queried.

JavaScript objects can be created from any type of data, including arrays and strings.

## 2)- How do you create and use objects in JavaScript?
In JavaScript, there are few ways to create objects. Let’s have a look at each one of them:

**a)- Object Literal**
Object literal is the simplest method used to declare and create a JavaScript object.

Let’s say we want to create a Car object.

As we know, the car has some properties. It has doors, color, brand, speed…

So we will declare a Car object that has these properties like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm6r55kq8191m1tppt2i.PNG)
The “**name**”, “**numberOfDoors**” and “**color**” are called properties.

“**BMW**”, “**4**” and  “**White**” are called the values of the properties.

So in the object literal method we always define the properties and their values.

We can also declare and create an empty object like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4o6g7k2j7is85vzpxq0.PNG)
**b)- Using the new keyword**
Another way to create a JavaScript object is to use the **new** keyword with the constructor Object.

The code will be:
As you can see, an empty object does not contain any properties or values. We can add properties and values as indicated later on in this tutorial in section 3.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue2atkgu0nnvx99lkimm.PNG)
By writing this code we have created an empty object.

We will also see later on how to add properties to the object.
**c)- Using Object.create() method**
This method of creating an object comes in very handy when we want to create an object from another existing object.

The **Object.create()** method takes 2 parameters:

- The first parameter is a mandatory object. It is the one that we will create our object from.
- The second parameter is an optional object which contains the properties to be added to the new object.
Let’s say that we have a company, and the company name is “Purpose”.

The company object will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp3xjxkeyui2avafnnzu.PNG)
And we want to create an employee for this company. So th employee works at this company named “Purpose”. As he is an employee of the same company, instead of building another object from scratch that contains the company name and the employee name, age, years of experience… we will use the “company” object we created.

So the code will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xyek6ih6x90zaowfdzb.PNG)
So now as we created the “employee” object from the “company” object, that means the “employee” object will have access to all properties of the “company” object.

In other words, if we want to know the name of the company of the employee, all we have to do is to access this name this way:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8ktelk02pscpsbrdi6i.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6z6ty7b4j51l194gwk9.PNG)
**d)- Object constructor function**
Another way to create an object is to use the **object constructor function** method.

What is an **object constructor function**? It is simply a simple function that gives the template of a parent object, or the original object that we will use to create our derivative objects.

For example, let’s say that we want to create many houses objects.

We have one house that has 4 bedrooms, 2 living room, 2 toilets ,1 yard and is located in Florida. Another house that has 3 bedrooms, one living room, 1 toilet, 1 yard and is located in Tokyo. Another house that has 6 bedrooms, 3 living rooms, 4 toilets , 2 yards and is located in London and so on…

So instead of creating 3 separate objects for the 3 houses like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2b3b73md21ihsbngl6q.PNG)
What we can do is to create a common template for the houses. Because after all, they all have bedrooms, living rooms, toilets, yards and a location.

So to create this template we will use the **object constructor function** like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19iqxxv8gqpsgyskaiyb.PNG)
Note here that the **House** constructor starts with an upper-case “H”, and that is because we should always start a function constructor name with an upper-case.

Once we create a function constructor object, we add all the properties inside the function.

In the below section, we’ll see how to add and access JavaScript objects properties and methods. So stay tuned. 😉

But for the moment, let’s suppose that we have all the properties inside the function, how can we create an object for every house?

To create an object for every house all we have to do is to call the function constructor object using the keyword **new**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx49oszlict07s0r5iql.PNG)
So here by calling the House function constructor, and by passing it the number of bedrooms, living rooms, toilets, yard, location we want for every house, we create an object for every house separately.

The House constructor object is a function that takes in as parameters the values of the object properties.

## 3)- What are the properties and methods of an object?
You can look at the properties of an object as its description, and a method as an action or a function that the object can perform.

**a)- Object Literal**
**1)- Properties**
We’ve seen how to create an object with the Object literal method.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56qaq3fiee3fsrqphew2.PNG)
and we said that for the “**car**” object the “**name**”, “**numberOfDoors**” and “**color**” are the object properties and “**BMW**”, “**4**” and  “**White**” are the values of the
properties.

So to add properties with this method it is simple. The syntax is to add the name of the property you want to add, then add colon, and then the value.

Let’s say that later on in your code, for whatever reason, you want to add more properties to the car object. For example you want to add the speed and the mileage properties.

To do that all you have to do is to add the following code:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cjlanpaoev3dwiuq3f2.PNG)
To add more properties to the object the syntax is to write the object name, here it is “car”, followed by a dot, followed by the name of the property.

If you display the “car” object in the browser’s console you’ll have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vh20st5i8ot9ec95e03v.PNG)
So now, speed and mileage are also car’s properties.

To access the properties of the object, same syntax is used. Always write the name of the object, followed by a dot, followed by the name of the property

So if we want to display the name of the car, or the number of the doors it has or the color…we’ll add the following code:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj1uwxjmojph9c6ipv70.PNG)
In the browser you’ll have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kusxvvfo3bm29yajb95t.PNG)
**2)- Methods**
Now let’s say that this car makes a lot of noise, and we want it whenever it makes noise to say: “I’m a white BMW and I make a lot of noise”.

To do that we’ll add a method to the object which will be a simple function.

So we’ll declare our object like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72dgphgv0h5ymsqmeqep.PNG)
Now when displaying the noise method we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abga60t2ow5i0vxsm1ie.PNG)
As you have probably noticed we used the keyword **this** in the method. In this scope, the keyword **this** refers to the object itself which is the car.

So instead of writing **car.color** or **car.name**, as we still inside the object and we want to call the object from the inside, 
we used **this**. If we were outside the object, we would have used and called the object by its name which is “car” like we did when we added speed and mileage properties from the outside of the object.

**b)- With the new keyword**

**1)- Properties**
As we have seen we can also create an object using the new keyword with the Object constructor.

Now if we want to add some properties to the empty object we’ll follow the same syntax as per the Object literal method.

Meaning we add the name of the property, followed by a colon: followed by the value of the property.

Let’s say we want to add year of construction and the date of purchase properties. So the code will be:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se9yj41o4nk32nw1fldr.PNG)
After displaying the results on the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/volzoplc61p84za7qsou.PNG)
Which means **yearOfConstruction** and **dateOfPurchase** become now the object properties.
**2)- Methods**
To add a method to the object in this case we’ll follow the same syntax for adding properties.
So the code will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzhp9kn4xi794m814vyo.PNG)

So in the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a264vy4babvvq3369aao.PNG

**c)- Using Object.create() method**
**1)- Properties**
To add a property when using **object.create()** method we can follow the same syntax as we did before.

Let’s say that for the example we want to add the employee’s salary as a property. So the code will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p90gv7pvtyxdtdpgq8ux.PNG)
So in the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7gss47qfgmbrqdhkc8z.PNG)
**2)- Methods**
Same thing, to add a method to our employee object all we have to do is to use the dot notation as for properties.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4dkt7mrhpljuwvnou9x.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9czs9w7qnxka8miy0m4.PNG)
**d)- Object constructor function**
**1)- properties**
In our previous example we said that the Object constructor function allows us to create a general template that we can use to create our objects.

And we said that we have 3 houses, each one with its own properties (bedrooms, living rooms…).

In the template that we will create we will say that our objects, which are our houses, in general, they will have these properties (bedrooms, living rooms, toilets…).

So to do that we’ll add the following code:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6gx53yoy1yrgz8v3ccw.PNG)
We added the properties by using **this.nameOfTheProperty** notation, and as the arguments of the function are the values of the properties, we assigned the values to the properties.

So now we can create our objects like explained previously:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ls3gm3u45h5fbx0hzrt1.PNG)
Just to explain what is happening here, for example for The **new House (4, 2, 2, 1, Florida)**, the constructor object **House** will take the arguments we gave it which are ” **numbBedrooms**, **numbLivingrooms**, **numbToilets**, **numbYard**, **location**” and will replace them with “**4**,**2**,**2**,**1**,**Florida**” for the first object, and with “**3**,**1**,**1**,**1**,**Tokyo**” for the second object and so on…

When the constructor does that what we’ll have after that is : **this.bedroom=4**, **this.livingrooms=2**, **this.toilets=2**, **this.yard=1**… for the first object. So we have our **house1** object initialized with its entire properties.

And the keyword **this** here refers to House.
**2)- Methods**
In this example the **House** constructor does not have any methods, we added the properties only, but no methods.

But what about if we want our **house1** object or **house2** or **house3** to have a method?

Well, we can add methods to our objects without any problem. The way we’ll do it is with the dot notation as always.

Let’s say that we want to add a method which is a function that will say: “**Hey, welcome to the house!**“.

So the code will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v45vd8sjupm6ogm92ae8.PNG)
So now if we display **house1** in the console we’ll have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09gpufzh48dk22ysisnq.PNG)
So here as you can see, we have the **house1** properties displayed and we have also the **greet()** method, which means that this method is added to our object.

## 4)- Conclusion
JavaScript Objects are kings of this language. Knowing how to use them is a crucial step in a webdeveloper journey.

In this tutorial we have seen what an object means and how to add and access objects properties and methods.

Hope this tutorial was useful.

For more tutorials check my blog: [Purpose Code](https://purpose-code.com/)