Dot Notation Vs Bracket Notation in JavaScript

There are two ways to access the properties (a key-value pair) of a JS Object: Dot-notation( . ) or Bracket-notation( [ ] ). 

For example: object.property = object[“property”]. 

So what's the difference between these two options? Well, dot notation gives us better readability and it is less verbose and also it works better with aggressive JavaScript minimizers. However, it's about the way JavaScript unboxes or access the statements. In case of dot notation, JS goes till the first dot and then starts unboxing the properties. Let's see the following example: 

var person = { 
           property1: "firstName",
           property2: "lastName"
          }

Now we want to access the first property of this person with dot notation:

person.property1

This will give us the firstName

Now, JS recognizes the dot and expects the explicit name of a property called firstName in this case.

We get the similar result in case of bracket notation as well.

person['property1'] // --> firstName

We get the similar result in case of bracket notation as well.

Now, we want to use a variable to either return or set a property. Let us make a variable x:

var x = "property2";

Now, as we know we have a property in our person object with a key of property2. If we now want to get the value of this property in dot notation, we can just type:

person.property2;

This opens up the second property of person with a key of "property2" and gives us the value lastName

Now, remember the variable x, it should be access this property by person.x right?

person.x   //undefined

Dot notation in this case is giving us undefined. Let's try the bracket notation:

person['x'] = lastName ;

The reason is that in a JS object, all the property keys are strings. So, when you use the dot notation, JS expect for a key whose value is a string or whatever is after the dot.

So, person.x looks for the property of person with the key of "x". But our object person doesn't have a property called "x".

On the other hand, the bracket notation can handle person[x], because of the way JS access the statements. It runs along and starts to evaluate the first complete statement it encounters. It then evaluates the statement and checks further till it finds the next complete statement, which it then evaluates.

CONCLUSION:

• In a JS object, all property keys are strings.
• You can only access the explicit key name of a property with Dot notation.
• You can’t use dot notation with variables (or numbers either).
• The expression is evaluated with square brackets in a statement, runs toString() on it in order to convert it into a string and then uses that value for the next bracket expression, till it runs out of bracket expressions.