Dot Notation Vs Bracket Notation to Access Object Properties in JavaScript

Bunlong
Bunlong
Nov 3 · 2 min read
Dot Notation Vs Bracket Notation to Access Object Properties in JavaScript
Dot Notation Vs Bracket Notation to Access Object Properties in JavaScript
Code Tidbit by Bunlong

Accessing Object Properties

There are 2 ways to access object properties are Dot and Bracket in JavaScript.

const obj = {
name: 'value'
};
// Dot Notation
obj.name; // 'value'
// Bracket Notation
obj['name']; // 'value'

But the question is always which one should I use 🤔. Let’s get to understand Dot Notation’s issues which is the root to answer the question.

Dot Notation’s Issues

  1. Issue working with invalid Identifiers
  2. Issue working with Variables

1. Issue working with invalid Identifiers

Dot notations is only work with valid identifiers. But what is identifiers?

Identifiers are names. In JavaScript, identifiers are used to name variables (and keywords, and functions, and labels).

In JavaScript, the identifier has the following rules:

  • case sensitive
  • can contain Unicode letters
  • $, _, and digits (0–9) are allowed but may not start with a digit

Let’s take a look the examples below and see what happens when we use the Dot notation and Bracket 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'
};

Using with Dot Notation

obj.123;      // ❌ SyntaxError
obj.123name; // ❌ SyntaxError
obj.name123; // ✅ 'does not start with digit'
obj.$name; // ✅ '$ sign'
obj.name-123; // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError
obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'

Using 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'

If you think you have an invalid JavaScript identifier as your property key, use the Bracket Notation.

2. Issue working with Variables

Another issue of the Dot notation is working with variables.

Let’s take a look the examples below and see what happens when we use the Dot notation and Bracket notation.

const variable = 'name';const obj = {
name: 'value'
};
// Dot Notation
obj.variable; // undefined
// Bracket Notation
obj[variable]; // ✅ 'value'

Never use the Dot Notation when using a Variable.

Undefined Property (Bonus)

When you try to access a property that doesn’t exist, it will return undefined.

const emptyObj = {};emptyObj.name; // undefinedemptyObj['name']; // undefined

Summary

Use the Dot Notation. Anyway if you’re dealing with invalid identifier or variables, use the Bracket Notation instead.

Thanks for reading ❤

Say Hello! Twitter | Github | LinkedIn | Facebook | Instagram

Bunlong

Written by

Bunlong

Full Stack Software Engineer™ ☕ I love learning new things and sharing them with my community. Follow me to catch my weekly code tidbits ☕

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade