Thought leadership from the most innovative tech companies, all in one place.

JavaScript Dot Notation vs. Bracket Notation: Which to Use When

The difference between Dot Notation & Bracket Notation, and when you should use each one.

image

When learning a new programming language, one of the first things you’ll learn is how to access elements in arrays and objects. In JavaScript, there are two ways to do this: dot notation and bracket notation. In this blog post, we will discuss the difference between these two notations, and when you should use each one.

Dot Notation

Dot notation is the most common way to access elements in JavaScript. To use dot notation, you simply write the name of the object followed by a dot and the name of the property you want to access. For example, if we have an object called “person” with a property called “name”, we would access the name property using person.name.

Bracket Notation

Bracket notation is less common than dot notation, but it is useful in certain situations. To use bracket notation, you write the name of the object followed by brackets and the property you want to access. For example, if we have an object called “person” with a property called “name”, we would access the name property using person[“name”].

Key Differences

Now that we’ve seen how dot notation and bracket notation work, let’s discuss the key differences between these two notations.

Dot notation is faster to write and easier to read than bracket notation.

However, you can use variables with bracket notation, but not with dot notation. This is especially useful for situations when you want to access a property but don’t know the name of the property ahead of time. For example, if we wanted to iterate over all the keys in an object, and access their values, we could use bracket notation.

for (let key in obj) {
  console.log(obj[key]);
}

Bracket notation allows you to access properties with special characters in their names, while you can not do this with dot notation.

let obj = {“foo.Bar”: 2}
obj[“foo.Bar”] // valid syntax
obj.foo.Bar //invalid syntax

In conclusion, dot notation is the most common way to access elements in JavaScript. However, there are certain situations where bracket notation is more appropriate. When you want to use a variable to access a property, or if a property has special characters in its name, you should use bracket notation.

I hope this article clears up any confusion you had. Good luck with your coding interviews!




Continue Learning