Dot vs Bracket Notation in Accessing JavaScript Object.

Learn when to use dot and bracket notation in JavaScript.

Dot vs Bracket notation in JavaScript

We can access the property of an object by

• Dot notation
• Bracket notation

Dot Notation

This is the most popular and most used way of accessing the property of an object. This makes code more readable. Dot notation is used most frequently.

Syntax: obj.property_name

var user = {name : "Mark"};
user.name ; // "Mark"

When not to use dot notation

Consider that we are having a property name as 123

var obj = {
 '123' : 123
};

In the above case if we cannot access using

obj.123; 

So, If the property name is not a valid identifier , then we cannot access its value using . notation.

What is an Identifier?

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

What is a valid Identifier?

• 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, we can use bracket notation

var obj = {
 '123' : 123
};
obj['123']; // 123

Note

In JavaScript $ , and _ are valid identifiers. so we can access those properties using . notation.

var obj = {
   $ : 10,
   _ : 20
}
obj.$; // 10
obj._; // 20

Bracket Notation

The bracket notation is used when the property name is an invalid identifier(starts with a number, contains symbols).

var obj = {
 test-123 : "test"
}
// in this case we cannot use dot notation
obj['test-123']; // "test"

If the property name is number then we don’t need to wrap the property name inside single /double quotes in object creation. But in bracket notation, if the property name is whole number , then we don’t need to wrap the name inside single /double quotes . But if the property name is double , then need to warp the property name inside single /double quotes .

Example 1: whole number

var obj = {
 123456 : 10
}
obj[123456];

Example 2: Double

var obj = {
 123.456 : 10
}
obj[123.456]; // undefined
obj['123.456']; // 10

Example 3: Using an invalid number

var obj = {
   123.123.123 : 10 // throws invalid number error
}
For this case use single/double quotes
var obj = {
   '123.123.123' : 10
}

Example 4: Using special symbols

var obj = {
  '123-test' : "test" 
}
obj[123-test]; // error(test is not defined)
obj['123-test']; // "test"

Using variable as the property name

Example 1:

var test = "test";
var obj = {
 test : "Test success"
}
obj[test] // "Test success"

Example 2 :

var obj = {
  name : "Mark",
  age : 20
}
var name = "age";
obj["name"]; // Mark
obj[name]; // 20

Example 3: Real-world Example of using bracket notation

function getFood(user) {
let foods ={
      veg :      ["🍏", "🌽", "🍕", "🍅"],
      'non-veg': ["🐓", "🐣", "🥩", "🍖"] 
   }
   let {foodPreference} = user;
   return foods[foodPreference];
}
let user = {name: "Mark", foodPreference : "veg"};
getFood(user); // ["🍏", "🌽", "🍕", "🍅"]

We can also use object as the property name, but that will be converted into [object Object]

var a = {};
var b = {};
var c = {};
c[a] = 10;
c ; {[object Object]: 10}
c[b] = 20; // this will replace old [object Object]
c; {[object Object]: 20}

We can also have empty string as property name

var obj= {};
var emptyString = "";
obj[emptyString] = "10";
obj[emptyString]; // 10

References :

• MDN,
• SamanthaMing

Sponsor me a coffee ☕️ .