What is an Object in JavaScript? : Part I

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:

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:

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.

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.

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

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.

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.

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.

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.

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.

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.

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 !!....😊😊