Dot notation and bracket notation in JavaScript

In JavaScript, there are two main ways to access an object’s properties and methods. These are dot notation and bracket notation. They’re both a type of property accessor.

For these examples, let’s use the object literal from yesterday’s post:

var dog = {
  name: "Yoko",
  breed: "Labrador",
  bark: function () {
    return "Woof!";
  }
};

Dot notation

Usually, we access an object’s properties and methods using dot notation.

For the object above, that would look like this:

dog.name; // Yoko

dog.breed; // Labrador

dog.bark(); // Woof!

Bracket notation

It’s possible to do this with bracket notation, too:

dog["name"]; // Yoko

dog["breed"]; // Labrador

dog["bark"](); // Woof!

Why two options?

Bracket notation is necessary when you need to get a property/method name programmatically.

This could be because it’s saved to a variable, the result of a function call, or any number of reasons.

For a simple use case, imagine I have a variable called dogSpeak, and its value is the string "bark":

var dogSpeak = "bark";

I can’t just do the following, because there isn’t a dogSpeak() method. I’ll get a TypeError:

dog.dogSpeak(); // TypeError: dog.dogSpeak is not a function

We have to use bracket notation here. Notice that I’m not using quotes, because dogSpeak is the name of a variable:

dog[dogSpeak](); // Woof!

This works because the value of the dogSpeak variable is the string "bark", so it invokes the bark() method.

Summary

There are two main types of property accessor in JavaScript.

For more information, check out property accessors in the MDN Web Docs. 👍


If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!