Dot Notations vs Bracket Notations

Dot notation searches for the key name whereas bracket notation takes the value and searches for the particular key.

1. Dot Notations

let obj = {
  cat: 'meow',
  dog: 'woof'
};
let sound = obj.cat;
console.log(sound); // meow 

I want to bring your attention to the fifth line where we’re using dot notation: let sound = obj.cat;. This is an example of dot notation.

You can access properties on an object by specifying the name of the object, followed by a dot (period) followed by the property name. This is the syntax: objectName.propertyName;.

2. Bracket Notations

let obj = {
  cat: 'meow',
  dog: 'woof'
};

let sound = obj['cat'];
console.log(sound);// meow

Again, draw your attention to the fifth line: let sound = obj[‘cat’];.

You can access properties on an object by specifying the name of the object followed by the property name in brackets. Here’s the syntax: objectName["propertyName"].

You’ve probably seen bracket notation when working with Arrays. In the below example we’ll access the second element in our arr by using the syntax: arrayName[element]

let arr = ['a','b','c'];
console.log(arr[0]); // a

We can insert a new pair just by using dot notation and specifying the new name with value.

const kaarthik = {
    firstName: "kaarthik",
    lastName: "sekar",
    birthYear: 2001,
    currentStatus: "commited",
    favCountries: ["France", "Switzerland", "Venice"]
}

kaarthik.twitter = "@Mdvlpr";
console.log(kaarthik); 
// Object { firstName: "kaarthik", lastName: "sekar", birthYear: 2001, currentStatus: "commited", favCountries: (3) […], twitter: "@Mdvlpr" }