Difference Between Dot & Bracket Notation in JavaScript Object
Tags: javascript, object
Published: 2022-09-18 08:13:01




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