Objects- Dot and Bracket Notation in Javascript

Objects are key data structures in Javascript (pun intended) and are widely used, but there are some details which we often overlook. One of them is the difference between the dot and bracket notations used to access the object properties.

In this article, we'll try to understand both the notations and the differences between them. Let's begin!

Case 1: Normal Identifier Property access

Consider the following object myObject. It is defined using the object literal syntax {} braces and has two properties, 'foo' and 'bar' having values 1 and 2 respectively.

let myObj = {
  "foo": 1,
  "bar": 2
}

If we wish to access the value of, say 'foo', then we can do it using any syntax and the output would be same, i.e. 1.

console.log(myObj.foo)            //1
console.log(myObj["foo"])         //1

Note: The property "foo" is accessed differently in the two cases. it is because the value inside [] in bracket notation should always resolve to be a string. This is discussed in detail in Case 3 below.

Case 2: Accessing properties with names that are not valid identifiers

Now, suppose you had a property called "ice-cream" as shown.

let myObj = {
  "foo": 1,
  "bar": 2,
  "ice-cream": 3
}

Here, you won't be able to access the value of this property using the dot notation as it is not a valid identifier (consider it as a name that you cannot assign to a variable since it has a character other than the allowed ones).

According to MDN web docs:

An identifier is a sequence of characters in the code that identifies a variable, function, or property.

In JavaScript, identifiers are case-sensitive and can contain Unicode letters, $, _, and digits (0-9), but may not start with a digit.

In this case, since the property name is not a valid identifier ( as it contains a "-" ), we will not be able to use the dot notation to access it. So, you would need the bracket notation.

console.log(myObj["ice-cream"])         //3
console.log(myObj.ice-cream)            //Uncaught ReferenceError: cream is not defined

Case 3: Accessing Computed Property Name

Note: When property names are expressions / variables

Another difference between the dot and the bracket notation is that you can access dynamically created key values using bracket notation but not dot notation.

This means that with the Bracket notation, you can use expressions / variables to access the values

To understand this further, consider the following code snippet:

let myObj = {
  "foo": 1,
  "bar": 2,
  "ice-cream": 3
}

let myVar = "foo";
console.log(myObj[myVar])         //1
console.log(myObj.myVar)          //undefined

Here, the variable 'myVar' holds the value of the key 'foo' and when we try to access the value of key 'foo':

1. Using bracket notation - the variable myVariable is reolved to "foo" and we get 1 as output.
2. Using dot notation - there is no key "myVar" in myObj and so we get undefined as the output.

The thing to note here is that the part inside [] in the bracket notations can include any variable or expression, which is then evaluated while accessing the key value.

let myObj2 = {
  "newProp": 4,
}

let var1 = "new";
let var2 = "Prop"
console.log(myObj2[var1 + var2])       //4
console.log(myObj2["newProp"])         //4
console.log(myObj2[newProp])           //Uncaught ReferenceError: newProp is not defined

Here the expression inside the brackets [] is evaluated and then the value property "newProp" is accessed.

We cannot access the value of newProp like myObj2[newProp] because the bracket notation tries to find a variable called newProp and not a string, and throws an error since it is not defined.

Hope this article helped in your understanding of these notations and gave you an idea of when and how to use them.

Thanks for reading!