Objects in Javascript

Hi there, this post is all about objects. But , First things first if you have not checked out my previous post on Var vs Let vs Const , check it out here

Alright, Here we go!

What is an object?

Objects in javascript can be compared to an object in real world. Let us consider a car as an object. The car ofcourse has a lot of characteristics such as brand, color, weight, design-type etc..,
In the example above, car is an object.
let us assume, the brand is BMW , color is black, weight is 1200kgs and the design-type is sedan.
Thus , an object is a collection of properties.The property can be considered as a key-value pair.
The keys in the above case are brand, color, weight and design-type ,while the values are BMW, black, 1200kgs and sedan.
Now let's convert all these to code.

Here , the object keys are always string type, while the values can be of any type.

Accessing and Setting the object properties

We can access the properties of an object using two ways.

Dot Notation

The common way to access the object property is using dot notation.

Bracket Notation

You can wonder why do we need bracket notation, while we have dot notation. Because I wondered too.
But, this notation is highly useful in two cases ,

• when the object key is not a valid javascript identifier. i.e.., when the property name contains hyphens,space, etc..,
• when the object key is not determined until runtime

In the case 1, Trying to access screen resolution with dot notation gives error since it is not a valid javascript identifier.
In the case 2, the variable key is assigned the value of "capacity".Trying to access phone.key gives the output undefined,because the object key named key is not present and hence phone[key] gives the result 64 GB as the key is assigned the value "capacity" during runtime.

Object.keys(),Object.values() and Object.entries() methods

The Object.keys() method returns all the keys of an object as an array.
The Object.values() method returns all the values of an object as an array.
The Object.entries() method returns all the properties(key-value pairs) of an object as an array of key-value pairs.

Object Creation

There are different ways in which we can create objects.

• Object literals
• New Operator or Constructor
• Object.create method ####Object literals This is the simplest way of creating objects. The object literal is a list of key-value pairs separated by commas.

Here, car is an object literal

New Operator

Constructor

This is the generic way of creating objects.If we invoke a function using new operater, the function acts a constructor and returns object.

By this method, we can create any number of objects just by passing values to the constructor function

Object.create() method

The Object.create() method can be used when a new object has to be created,using an existing object as the prototype of the newly created object.
Let us consider an object movies

Here, the new object movie1 inherits the properties of existing object movies .

It is also possible to overwrite the inherited properties.Let us consider a new object movie2 which inherits the properties of the existing object movies.

Here, the value of the inherited property Studio has been overwritten by DC.

Writing this helped me understand more about objects, I hope you got a better clarity too:)