Understanding Objects in JavaScript

In this one we'll be diving into a one of the most if not the most important part of the JS. As you might have heard that in JS everything is an object, so we'll understand this object.

Let's jump right into it.

What are objects

Objects are collection of properties / key-value pairs, in which the keys can be either a string or a symbol, if you use a number it is converted to string. and the value can be of any data type, even an object or a function.

Creating an object

Let's see how to create an object in JS.

You can create it with an pair of empty curly brackets {}, and assign properties later.

const person = {};

Or you can also crate an object with properties enclosed in curly brackets {}.

const person = { name: "Piyush" };

console.log(person); // { name: 'Piyush' }

And the Object() constructor can also be used, with or without properties.

const person = new Object({ name: "Piyush" });

console.log(person); // { name: 'Piyush' }

Accessing properties

There are two ways to access the properties of an object. With the . notation or brackets [] notation.

First with the . notation.

console.log(person.name); // Piyush

Now with the bracket [] notation.

console.log(person["name"]); // Piyush

You have to use quotes for the string keys or it will be treated as a variable. Using numbers without quotes is fine coz it will be converted into string.

Updating objects

You can simply access a property and assign it the value you want to update with.

person.name = "Piyush The Dev";

console.log(person); // { name: 'Piyush The Dev' }

Adding properties

To add any property to the object you just give the property key with the object using either . notation or the [] notation, and then assign the value.

person.profession = { title: "SDE", favLanguage: "JS" };

person["isMarried"] = false

console.log(person); // { name: 'Piyush', profession: { title: 'SDE', favLanguage: 'JS' },  isMarried: false }

Deleting properties

To delete a property, just access it and put the delete key word right before it.

delete person.isMarried;

console.log(person); // { name: 'Piyush', profession: { title: 'SDE', favLanguage: 'JS' } }

Looping through objects

You can loop through the keys and values of the objects.

To loop over the keys, you can use the Object constructor with the keys() method which returns an array of keys present in the object so you can loop over by chaining it with any looping method like forEach or map.

Object.keys(person).forEach((key) => console.log(key));

/*
 *** Output ***
name
profession
*/

Array vs Object

In Object you can set both key and it's value, whereas in array you can just set the value, it's key always will be an index / position of the element in that array.

Internally Array is object only. It is just restricted to have indexes as a key. and since the index is a number you can't use the . notation to access it.

Final thoughts

Objects are the very foundation of the JS. They are everywhere. To master JS you must master objects first.

So experiment and play with objects to master them.

And don't forget to enjoy coding.