JavaScript “Object” for starters

In studying JavaScript, Object is unavoidable. A lot of people when they start studying Object must get confused. At least I did! This is why I am writing this article to get more familiar with them and knock them out!!!
In this article, you will learn what is “Object” and how to use them.

Contents

  1. What is “Object” in JavaScript
  2. How to create an “Object”
  3. Adding a methods
  4. Accessing properties and methods
  5. Loop over “Object”
  6. “Object” methods
  7. Conclusion

1. What is “Object” in JavaScript?

Object is one of the fundamental data types in JavaScript. There are variable which stores only one value and array which stores multiple values. Object stores multiple values as well. However, object stores key-values [“keys”:“values”] and key-method.

Let’s create an array and an object! You can compare and see what is difference between them.

Array

Yeah! We could store some values!! However, you don’t know what “2” is. Is it quantity? or price?

Let’s create an object with same values!

Object

Now, we know that “myObj” is for the product of apple which made in Vancouver and for $2! So in objects, you can store values as key-value pairs with curly brackets ({}). These key-value pairs are pairs of keys and values. Keys are also called “property”. Keys are always on the left side of the pair and values are on the right side { keys : values }. There is colons between them.

2. How to create an “Object”

There is some ways to create an “Object”. As I explain about “Object” in the previous section. The two tops are curly brackets ({}) and “new” constructor.

Curly brackets ({})

You can create an object by wrapping key-value pairs with curly brackets ({}).
If you want to create an empty object, you use only the curly brackets ({}). You can assign new object in this way and store some variable later.

“new” Operator

The second way to create an object is by using “new” keyword.

With “new” keyword, you can create a copy of object. “myObj” and “Object” are different objects.
I know… It is complicating…. The one thing you need to know for now is that you can create an object with “new” keyword like above.

“Object.create()” method

The third way is by using “object.create()” method. You can create new object with using an existing object as the prototype of the newly created object.

You can see that “object.create()” created a copy of “myObj”. Therefor, “newObj” has same keys and values as “myObj”. The value of “myObj” wouldn’t be changed even if the values of “newObj” have been changed. They are different objects. This method is very useful !

Add properties to Object

There is two ways to add some properties to myObj.

The first one is by using dots(.).
I would say that this way is more common.

The second way is by using square brackets([]).

Delete properties

You can delete properties by using “delete” operator.

Add another object inside of object

You can create another object inside of the object.

You can also create by using dots and square brackets.

3. Adding a method

As I mentioned that object is able to have key-value pairs [ key : value ] and key-method pairs [ key : function() ] in the first section. I will explain about having a function in object.

If you just want to create a method to print out something in console. Here is a way.

This one, I just created a method called “printOut” inside of the object “myObj”.

But wait… it didn’t return the text in console. I will explain how to access properties and method in the next section!

4. Accessing property and method

Sometime you don’t want to return a whole object. In this section, I will show you how to access property and method, and get only what you want.

To access the object you created, there is also two way by using dots(.) and square brackets([]).

You can get values by writing “object.keys” or “object[‘keys’]” .

You can also access an object inside of the object by using dots(.) and square brackets([]). You need to access keys twice “object.keys.keys” .

In the previous section, we couldn’t print out a function. If you want to access a function, you need to call an function in the console.

In this way, you can print out a information easily. This is really useful once you start working on a project!

“this” keyword

The “this” keyword refers to the object it belongs to.

You can use “this” keyword when you want to access the properties in a method stored in the object.

In this, the “this” inside of method (printInfo) refers to “myObj”.

You can also access properties without using “this”. However, it is unreliable!

I created a copy of “myObj” by using “object.create()” method. We can see the values of “newObj” has been changed. However, “newObj.printInfo()” is printing “myObj”. The method is accessing “myObj” NOT own object.

5. Loop over “Object”

You can easily loop over Object properties with 3 different methods.

“Object.keys()”

The “Object.keys()” method will return an array of keys. If you put this in a variable and put it in a console.log() you will see an array of the keys.

“Object.entries()”

The “Object.entries()” method will return an key-value pairs.

For-in Loop

“For-in Loop” is most common statement to loop over. This is like a for-loop and simpler than normal for-loop.

You can also get values as well if you access.

6. Object methods

There is a lot of methods you can use with “Object”. They will help you a lot and make things much easier!

“Object.values()”

With this method, you can change an object to an array . Basically, data structures of an array and an object are different, but you can change the values which is in object to an array with “Object.values()”. It is very easy to do!

“Object.assign()”

Next is duplicating an object. You can duplicate an object with “object.assign()”.

First, you prepare an object.

This example, the object has properties of ‘product’ and ‘area’. You might think that it’s possible to duplicate with the way below.

Just created new “object” which is “newObj” and assign “myObj” to “newObj”.

Seems like it is working! But, how about if you change a value?

I just wanted to change the product name of myObj! However, the value in newObj has been changed as well. Actually, it didn’t duplicate an object. It is just reference myObj. That’s why the value of newObj is changed when the value of myObj is changed.

Therefor, we will use “object.assign()”!! It will have new object you want to create as a first element and an object you want to duplicate as a second element.

Let’s duplicate myObj with “object.assign()”.

This example, we will assign new object so give an {empty object } as a first element. Therefor, you can only change the value of myObj. The value of newObj haven’t changed.

“Object.freeze()”

This method literally freeze an object making it immutable. A frozen object can no longer be changed, deleted, added new properties. “Object.freeze()” returns the same object that was passed in.

“Object.is()”

The “Object.is()” method compares two objects whether two values are the same values and return a boolean.

7. Conclusion

These are what you better know if you would like code with “Object” in JavaScript from my experience. They are complicated and many things you need to know. However, “Object” is very useful once you know how to use. I hope you enjoyed this article, learned something new, and knock out “Object”.

Starter FrontEnd Developer based in Vancouver, Canada.

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