JavaScript Quickie— Dot Notation vs. Bracket Notation

What’s the difference? When is each useful? Learn the details in 3 minutes

Brandon Morelli

Published in

codeburst

4 min readOct 19, 2017

Accessing Properties on an Object

There are two ways to access properties on an object:

Dot Notation
Bracket Notation

Dot notation is used most frequently. Below we’ll dive into each and discover some of the differences.

Dot Notation

Lets first look at Dot notation. Consider this example below:

let obj = {
  cat: 'meow',
  dog: 'woof'
};let sound = obj.cat;console.log(sound);
// meow

I want to bring your attention to the fifth line where we’re using dot notation: let sound = obj.cat;. This is an example of dot notation. You can access properties on an object by specifying the name of the object, followed by a dot (period) followed by the property name. This is the syntax: objectName.propertyName;.

When working with dot notation, property identifies can only be alphanumeric (and _ and $). Properties can’t start with a number.

Dot notation is much easier to read than bracket notation and is therefor used more often. However, there’s a second way to access properties on an object you should be aware of. It’s called bracket notation.

Bracket Notation

Here’s an example of bracket notation:

let obj = {
  cat: 'meow',
  dog: 'woof'
};let sound = obj['cat'];console.log(sound);
// meow

Again, draw your attention to the fifth line: let sound = obj[‘cat’];. You can access properties on an object by specifying the name of the object followed by the property name in brackets. Here’s the syntax: objectName["propertyName"].

You’ve probably seen bracket notation when working with Arrays. In the below example we’ll access the second element in our arr by using the syntax: arrayName[element]

let arr = ['a','b','c'];let letter = arr[1];console.log(letter);
// b

But bracket notation is also useful when working with Objects.

When working with bracket notation, property identifiers only have to be a String. They can include any characters, including spaces. Variables may also be used as long as the variable resolves to a String.

This means there are fewer limitations when working with bracket notation. We can now have spaces in our strings, and can even start strings with numbers.

Perhaps most importantly, we can now use variables to access properties in an object. It’s important the variable you are using references a String.

Take a look at this variable example. It might be a little confusing at first, so bear with me:

let obj = {
  cat: 'meow',
  dog: 'woof'
};let dog = 'cat';
let sound = obj[dog];console.log(sound);
// meow

The above example is similar to a previous example we’ve already seen. The main difference is we’re now using bracket notation to pass in a variable. Be careful, it may look like we are looking for the dog property in our obj, but that’s not entire correct. dog is a variable with a value of 'cat'. Since we’re using brackets, the string value is passed in and we search for the 'cat' property — obj["cat"]. Thus, meow is logged to the console.

Below, we’ll try doing the same thing, but with dot notation:

let obj = {
  cat: 'meow',
  dog: 'woof'
};let dog = 'cat';
let sound = obj.dog;console.log(sound);
// woof

Right off the bat you should notice that we’re getting back woof. This is very different from the other example and it’s because we can’t use variables with dot notation. Attempting to lookup obj.dog will actually just look for the string value of 'dog' within our object instead of using the variables value. Thus, obj.dog returns woof.

Recap

There are some important differences between dot and bracket notation:

Dot notation:

Property identifies can only be alphanumeric (and _ and $)
Property identifiers cannot start with a number.
Property identifiers cannot contain variables.
OK — obj.prop_1, obj.prop$
Not OK — obj.1prop, obj.prop name

Bracket notation:

Property identifiers have to be a String or a variable that references a String.
It is okay to use variables, spaces, and Strings that start with numbers
OK — obj["1prop"], obj["prop name"]

Closing Notes:

Thanks for reading! If you’re ready to finally learn Web Development, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months, for $30. If you’re just looking to improve your JavaScript Skills, check out: A Beginners Guide to Advanced JavaScript

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.