What is an Object in JavaScript? : Part I
Tags: javascript, codenewbie, objects, beginners
Published: 2020-07-23 20:35:34

You may have quite often heard developers saying the phrase `"Everything in JavaScript is an Object !!!"` I'm pretty sure you have. So what exactly do we mean by that? What is it really? Today I will try to explain you what an object really is in this article...

Like every programming language, JavaScript also has building blocks which are known as **"Objects"** or formally speaking **"Object Literals"**. So lets go ahead and see how to create an object in JavaScript.

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

Congratulations! you just created your first object in JavaScript.
So let's go ahead and examine the above line of code. In JavaScript we declare a variable using the `var` keyword followed by the name of the variable i.e. `obj` in our case. Curly braces`{}` here denotes an object in JavaScript. Since there is nothing inside of it, therefore we call it an **empty object.**

But real-world objects aren't as simple as this one. An object is a collection of properties, and a property is an association between a name (or key) and a value. An `Object Literal` or simply put `Object` have properties in the form of **key-value** pairs. So lets go ahead and define some properties of our object.

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

A property's value can be of any type. Our above object `person` has 3 properties namely: 
1. **name** which is of type `string` 
2. **age** which is of type `number` 
3. **isEmployed** which is of type `boolean`

####Methods:
A method is a _function_ associated with an object. We can also have functions as a property of an object. So if an object has a property which is a function, that property is known as a `method`. Lets see that in action.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8hsnn75sjiu1adbcflg8.png)

####Accessing Properties:
You see how easy it is to define properties of an object. Likewise, it is also easy to access the properties of an object. We do that using the `dot(.)` notation in JavaScript.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tqtpjluy4zx6wmd1kyh9.png)

**NOTE:** One very important thing to note here is that both JavaScript objects & properties are case sensitive. So if you do something like `person.Name` it will give you `undefined`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/guctqr2k9e8k7t7f441u.png)

There is another way using which we can access the properties of an object. You simply need to enclose the name of the property in a **square bracket** `[]` and need to put them inside single/double quotes `'' / ""`. However accessing a property using this method is not recommended. Below is an example demonstrating the above method.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xueaxhy1txoy4vriqbtm.png)

One advantage of using the bracket notation is that you can define a property with a `white space` between them which you cannot do using the `dot` notation. You can also define an empty property using the bracket notation.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k8wj3n52rdie9wnax7lw.png)

####Adding Properties Dynamically:
In JavaScript, we can easily add properties to an object dynamically at any instance of time.For instance, I could do something like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ra84hzenwxt9dc3jvwm0.png)

Here,we have added a property `country` to our person object dynamically(at run-time). Now if we print our person object again we could see a new property.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/veeqr1l5a57t8d7jro58.png)

####Deleting properties:
Similarly, javascript allows us to `remove/delete` a property of an object when ever we want. To remove a property we use the `delete` keyword followed by the `object.property` name as shown below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e3lwwnrf5udk93b6pd9z.png)

####Nested Objects:
It is possible that an object can be nested inside of another object. Since, the value of a property of an object can be anything from a string, number to a function...it can also be another complete new object. In the below example, the value of the property `address` is a complete different object.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e5cww801i0c8kjg5q1xv.png)
 
So now I hope you guys are familiar as to what are objects in JavaScript and how to use them. I've demonstrated the very basics here. The second edition to this article will have a high level overview or more in-depth understanding of what JavaScript objects are & how are they structured internally. Please let me know if you guys have any questions. You could drop them in the comments section below. Happy learning !!....😊😊