Objects in Javascript
Tags: javascript, objects
Published: 2020-08-15 14:51:40

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](https://dev.to/sruthiragupathy/var-vs-let-vs-const-in-javascript-3aeb)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mj9qwvwondskrr7x65g8.png)

Here , the object keys are always **string** type, while the values can be of any [type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).

##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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vsnxjy1pyc6731dy6ckf.png)

####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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h6kmkr725aj8xecf4zqz.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/87ll7vc49tqhtbtdku0k.png)

##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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rjek60ka0gr6j4tmwrpv.png)
Here, car is an object literal

####New Operator

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z9t1s6ybtpsazotswwof.png)

####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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lec4secwlhehdu0h3xmm.png)

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**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oirz6r8eff39w0bc2eu1.png)

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**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9kp6fixnd7ryzfdqpwmt.png)

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:)