What is Dot vs Bracket Notation in Accessing JavaScript Object

Dot vs Bracket Notation in Accessing JavaScript Object. Learn when to use dot and bracket notation in JavaScript.

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

Thank you for reading ! Hope this tutorial will surely help and you!

#JavaScript #Programming #Coding #Development