Dot Notation or Bracket Notation in JavaScript

Two of the most common ways to access an object’s properties are dot notation and bracket notation.

Each method has its advantages and disadvantages, so let’s see when to use each one 👇

Dot Notation

Dot notation is the most common way to access an object’s properties. You use the object’s name followed by a dot and then the property name.

object.property

For example,

const student = {
  name: "Luis",
  age: 30
};

To access the name property:

student.name; // "Luis"

Bracket Notation

Bracket notation allows you to access an object’s properties using a string inside brackets.

object[property]

This form is a bit less convenient, but it’s useful in certain cases. For example, when the property name contains characters that are invalid for dot notation.

Let’s see it with an example as well. To access the name property using bracket notation we would do:

student["name"]; // "Luis"

When to Use Bracket Notation

In general, we will primarily use dot notation. We will use brackets when we have a case where we cannot use dot notation.

Let’s look at them.

const person = {
"full name": "Ana Pérez"
};

person["full name"]; // "Ana Pérez"

person.full name;   // ❌ I can't do that because of the space 

const property = "age";

person[property]; // 21

person.¿?¿?¿? // ❌ We wouldn't know what to put there

const index = 2; // imagine the user selects this
const properties = ["name", "age", "profession"];

person[properties[index]];