JavaScript object property can be access with dot notation as well as with the bracket notation. But it’s a little bit confusing 🤔 to me. which should I use to access object property?

Then just follow Airbnb’s style guide. Which says, always use Dot Notation . but when you need to access the object property with a variable, use Bracket Notation [] 😎

Let’s look at the example of dot & bracket notation.

// Dot Notation vs Bracket Notation

const variable = 'name';
const student = {
  name: '👩‍🦰'
};

// ✅ Dot: access property
console.log(student.name); // output => '👩‍🦰'

// ✅ Bracket: access property with variable
console.log(student[name]); // output => '👩‍🦰'

Let’s deep dive 🥶 into the more detail.

Accessing Object Properties

There are two ways to access the object properties.

1. Dot Notation
2. Bracket Notation

Mostly, we use dot notation for accessing object properties but in some cases, we have to use bracket notation. But it doesn’t mean that we need a special case for bracket notation.

You can simply use both dot and bracket to access the property without need of variable.

Let’s look at the below example.

const obj = {
  name: 'JS Startup'
};

// Dot Notation
obj.name; // 'JS Startup'

// Bracket Notation
obj['name']; // 'JS Startup'

Yep 🤨, both can able to access the object property. But still which one is better 👌 and which one I should use 🤔.

Go with Dot Notation

To frankly speaking, just go with Dot Notation 🏆. Why because there are some main reasons to use it.

• It’s easier to read
• It’s faster to type.

That’s why Dot notation is used most frequently compared to Bracket notation.

But then we have a bracket notation, if dot notation is good to use. Let me tell you this, anything can achieve with multiple ways but every way have some limitation. In this case also, dot notation have some limitation.

Dot Notation’s Limitation

No one is perfect 😅 everyone has some pros and cons 🤯. So let’s look at some cons or limitation of dot notation. Due to which, bracket notation come in light 😇

• Issue working with Identifiers
• Issue working with Variable

Working With Identifiers

First, let’s look at what is identifiers ?

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

For more detail about the Identifiers click here.

Now, the issue with dot notation is that it only works with validate identifiers. Which put some limitation over the dot notation.

The identifier has the following rules:

• case sensitive
• can contain Unicode letters
• $, -, are allowed
• Digits (0–9) are okay But may not start with a digit

Now, let’s looks at example with some identifier in object property with dot notation.

const obj = {
  123: 'digit',
  123name: 'start with digit',
  name123: 'does not start with digit',
  $name: '$ sign',
  name-123: 'hyphen',
  NAME: 'upper case',
  name: 'lower case'
};

Let’s access above object property with dot notation and as well with bracket notation.

Dot Notation

obj.123;      // ❌ SyntaxError
obj.123name;  // ❌ SyntaxError

obj.name123;  // ✅ 'does not start with digit'
obj.$name;    // ✅  '$ sign'

obj.name-123;  // ❌ SyntaxError

obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'

So, you can see in above example that some cases fail to access the object property.

Bracket Notation

Let’s look at the same object with bracket notation.

obj['123'];     // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'

obj['name123']; // ✅ 'does not start with digit'
obj['$name'];   // ✅ '$ sign'

obj['name-123']; // ✅ 'does not start with digit'
obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'

Wow 😱, no issue happen with bracket notation.

Working with Variables

A javascript variable is a storage to store values like string, number, array, object, etc. But it can also be used to access object property. But it becomes another limitation to dot notation.

Note: single quotes not require with bracket notation with variable.

Let’s look at an example.

const variable = 'name';

const obj = {
  name: 'value'
};

// Bracket Notation
obj[variable]; // ✅ 'value'

// Dot Notation
obj.variable; // undefined

As, you can see in above example that variable value act as key in bracket notation but in case of dot notation variable itself act as property.

Why not use dot notation with variable

As, we already know that dot notation have some limitation in terms of accessing object properties. But there is also another scenerio where variable with dot and bracket give different values.

And I am not talking about the undefined. which you saw in the previous example. Now, let’s look at the below example.

const variable = 'name';

const obj = {
  name: 'value',
  variable: '😲'
};

// Bracket Notation
obj[variable]; // ✅ 'value'

// Dot Notation
obj.variable; // '😲'

See 🥺, both give different values because in bracket notation variable value act as property name which is ‘name‘ but in case of dot notation variable itself act as property whose value is ‘😲’.

Note: Always use bracket notation with variables. And never use dot notation with variable.

Finally

I hope after knowing the pros, cons & limitations of dot notation. Here’s is the final thought on which one is better.

Always use Dot Notation because it’s fast & readable. But if you’re dealing with invalid identifiers or variables, use the Bracket notation.

Resources

• Airbnb’s JavaScript Style Guide: Properties
• MDN Web Docs: Identifier