Difference Between Dot & Bracket Notation in JavaScript Object

In JavaScript, Object is a non-primitive data type which is used everywhere. To be more specific an Object contains unordered key-value pair. We all know , an object can contain everything including methods, array and object itself too.

As Object's data isn't stored in ordered like array we can't access easily by it's index which we used to do in Array. There are basically two ways to access Object's data. They are known as

1. Dot Notation
2. Bracket Notation

Both ways have their own pros and cons and specific use case. So Let's explore them.

Accessing By Dot Notation

Let's start with Dot Notation. By the name we can understand that it will have (.)dot in its usage. See the person Object below:

const person = { 
    name: 'Alice',
    age: 20 
};

In this Object it has to key-value pair(_name _and age) if we want to excess name property , simple we can have to use (.)dot after Object's name(here person) and property itself.

const person = { 
    name: 'Alice',
    age: 20 
};
console.log(person.name)  // Alice

If we have an Object inside object, we can chain it easily by adding a similar (.)dot before the property name. See the example below

const person = { 
    name: {
        firstName : 'Alice',
        middleName: 'Jay',
        lastName: 'Luke'
    },
    age: 20 
};

console.log(person.name.middleName)  // Jay

Easy, simple and clean. right? It keeps code clean and also improves readability. That's why dot notation is most favorite and loved by all.

Accessing By Bracket Notation

Now Let's how we can do it same thing through Bracket Notation.

const person = { 
    name: {
        firstName : 'Alice',
        middleName: 'Jay',
        lastName: 'Luke'
    },
    age: 20 
};

console.log(person['age'])  // 20  
console.log(person['name']['middleName'])  \\ Jay

In bracket notation, to access an Object's data, we have to wrap the key with the single quote and put it into the square bracket after the object's name without any space or anything.

When to use Bracket notation over Dot notation.

So we see that we can access objects' properties in both ways. Most of the people including me, prefer the first one as it's easy to use and it keeps the code clean and can be understood easily when someone else is reading your code. But you can't just ignore Bracket notation as it has more specific use case. like the example shown below:-

const obj = {
    name: "John",
    roll: 3,
}

const rollDynamic = 'roll'

console.log(obj.rollDynamic);  \\undefined

In some cases, we may need to access the property of the object dynamically I meaning by calling it explicitly. Above the example, we kept _roll _property in _rollDynamic _Variable and tried to access it using dot notation and we got undefined.

Here comes the Bracket Notation with its superiority. But how? Let's see the same code with Bracket Notation.

const obj = {
    name: "John",
    roll: 3,
}

const rollDynamic = 'roll'

console.log(obj[rollDynamic]); // 3

See, with Bracket notation we got _roll _key's value easily.

Another limitation of Dot Notation is that it can deal with only valid identifiers. Any key name with an invalid identifier isn't accessible by Dot Notation whereas it is accessible by Bracket Notation. Let's wrap the article with the example below:-

const employee = {
    '' : 'emptyString',
    123 : 123,
    123.321 : 123.321,
    'name-first': 'John',

}

console.log(employee['']) //emptyString
console.log(employee[123]) //123
console.log(employee[123.321]) //123.321
console.log(employee['name-first']) //John

All those keys can't be accessed by Dot notation, if we try to do so, we will get SyntaxError