Objects in JavaScript – An Introduction

Let’s start with a brief introduction to the concept of objects in JavaScript. Objects are essentially a collection of multiple values you can have.

What is an object ?

Values and variables which are primitives like a number or a string or a boolean or it can have something like an object which kind of bundles multiple values and you can also put a lot of other values in an object like an object itself, an array or you can have a function, which is also known as method in case of an object.

So an object is essentially a collection of multiple values and the collection is typically something that makes sense. You can think it in terms of a house, a person or an account which contains multiple properties.

Object creation

An object can be created in multiple ways in JavaScript the simplest way is to create an object inline.

var myObj = {};

So with this I have essentially created an object inline and I’m doing this using the open and closed curly brace and this is an empty object because there’s nothing between the open and the close curly brace so my object is essentially an empty object. If I go to chrome console tab to do –

console.log(myObj);
console.log(myObj);

Now if I run this, I will get an empty object here. Similarly, I can also type this in the console directly and I’m will get an empty object.

myObj;
myObj;

I can add properties to this object by using dot notation method like this –

myObj.foo = ‘bar’;

So it basically create a property called foo on the object myObj and it’s going to set the value of that property to a string just bar .

Now, I can access that property by doing –

myObj.foo;
myObj.foo;

and it will print that value. I can add more properties like this. The thing to remember about objects in JavaScript is it’s not class-based so there’s no blueprint that every object needs to adhere to. I can create any property on any object whenever I want and there’s no restrictions there are no datatype restrictions as well so I can easily change value of foo from string to a number.

myObj.foo = 1;

Objects are essentially free form and you can think of them as key value pair.

Nested Object

There are other ways in which you can create objects so this was the inline empty object but let’s say I want to create this value upfront with the property so I can say something like this –

var myObj = {
   "foo" : "bar",
   "address" : {
        "state" : "Delhi",
        "country" : "India"
    }
}

address is a nested object over here so I can basically create the object in line with all the values.

Now if I try to access myObj , I will  to get that fully formed object.

myObj;
myObj;

Other important thing to remember is that you can access properties and objects by using the dot notation or the square bracket notation.

myObj.foo;
myObj.foo;

so I can access the full property on the object by doing my obj dot foo we’ve already seen this but the other thing we can do is use the square bracket notation which is something like this.

myObj["foo"];
myObj[“foo”];

I can add the double quotes and then send the string which is the property surrounded by double quotes and then send it to a square bracket. This is what’s referred to as the bracket notation whereas this is referred to as the dot notation they’re essentially the same.

So this was a quick introduction to objects in JavaScript. I will add more articles related to this.


Leave a Reply