What Is Difference Between Dot Notation And Bracket Notation?

Accessing Properties on an Javascript Object
There are two ways to work/access properties(key/value pair) on a Javascript object:
• Dot Notation
• Bracket Notation

Dot Notation
Dot notation is used most frequently. Let's first look at Dot notation. Consider this example below:

let person = {
  name: 'Anup',
  age: 34
};

Here is a person object with 2 properties name and age. Let's say we need to change the name of the person, so we need to access the name property of an object Person. We can use dot notation as below

 person.name = 'John';
 console.log(person); // {name: 'John', age: 34}

 console.log(person.name); // John

This is an example of dot notation. You can change properties on an object by specifying the name of the object, followed by a dot (period) followed by the property name person.name = 'John'. Similarly we can use the dot notation to read the value of property like person.name.

Bracket Notation
You can access properties on an object by specifying the name of the object followed by the property name in brackets.

 person['name'] = 'Doe';
 console.log(person); // {name: 'Doe', age: 34}

When working with bracket notation, property identifiers only have to be a String. They can include any characters, including spaces. Variables may also be used as long as the variable resolves to a String.

Dot Notation Vs Bracket Notation
• Dot notation is bit concise, shorter and much easier to read than bracket notation and is therefor used more often.

• However, bracket notation has its own uses. Sometimes you don't know the name of the target property until the runtime. With dot notation, we can’t use dynamic variables. For example, in our user interface, user might be selecting the name of the target property dynamically.

 let selection = 'name';
 person[selection] = 'Donald';
 console.log(person); // {name: 'Donald', age: 34}

In that case, at the time of writing the code we don't know that what property we're going to access. That is going to be selected at runtime by the user so might have another variable somewhere else like selection that determines the name of the target property that the user is selecting and that can change at the runtime. We can access that property using the bracket notation in a dynamic way so we can pass selection here and we get the same result in the console.

• It is okay to use variables, spaces, and Strings that start with numbers in the bracket notation i.e. obj['1prop'], obj['prop name'] where as in dot notation, property identifiers cannot start with a number and cannot contain variables and can only be alphanumeric (and _ and $) i.e. obj.prop_1, obj.prop$.

• dot notation is mostly assuming the existence of the variables if there is no intellisense while with the bracket notation there is a sense of consciousness which is good, because you really to know what you are dealing with.

• One other advantage of bracket notation. If you flatten an object so that all variables are at the root of your object but you retain the dot in the variable name to represent the properties depth you can use bracket syntax: someObject['propCollection.property']

Reference: JavaScript Quickie— Dot Notation vs. Bracket Notation