JavaScript Quirks: Dot vs. Bracket - Not all notation is created equally

You probably have noticed there are two ways to access a property on an object:

  • Dot notation
  • Bracket notation

Naturally, you might assume they behave in the same way, but that's not quite the case. We will examine some differences below.

Dot notation

Dot notation is used more frequently than bracket notation. The reason? It is fewer characters to write.

It really is that simple. A few characters might not seem like a lot, but in a large codebase, dot notation can definitely save you some time. It's also considered easier to read.

const car = {};

car.color = 'red';

car; // { color: red }

Nothing too surprising right? When creating a property name, we follow the same rules for the naming of variables. An identifier should be:

  • Case sensitive
  • Unicode letters
  • $ or _ are allowed
  • Numbers (0-9) can be used, but not as the 1st character
const obj = {};

obj.1 = 'value'; // ❌ SyntaxError  
obj.n@me = 'value'; // ❌ SyntaxError
obj."str" = 'value'; // ❌ SyntaxError

Bracket notation

This is where the real fun begins, and we see some interesting behaviour. Remember those rules for identifiers above? Well, forget all those. We can create properties with bracket notation using the following:

  • strings
  • numbers
  • variables
  • weird characters (As long as you use quotation marks)
  • expressions

Strings

This is essentially the same as creating a property via dot notation. The property can be accessed with dot notation too.

const obj = {};

obj['propName'] = 'value';

obj['propName']; // 'value'
obj.propName; // 'value'
obj[propName]; // ❌ ReferenceError - No variable propName can be found

Numbers

Yes, it's possible. You can create a property using a number. Below, the number 1 is stringified as a property. We can't access the property by using dot notation.

const obj = {};

obj[1] = 'value';

obj['1']; // 'value'
obj[1]; // 'value'  - Property is already created, 1 is stringified
obj[2];  // undefined
obj.1; // ❌ SyntaxError  
obj."1"; // ❌ SyntaxError

Variables

In this example, the variable name is a string. Similarly, if our variable was a number, it would be coerced into a string. We don't use quotes when using variables, and the value in the brackets is evaluated.

const obj = {};

const myPropertyName = 'propName';

obj[myPropertyName] = 'value';

obj.propName; // 'value'
obj['propName']; // 'value'

Weird characters

If you use non-valid characters in a property name, you have to put them in quotes. Again, we are creating a string.

const obj = {};

obj['@!£'] = 'value';

obj['@!£']; // 'value'

Expressions

Lastly, and maybe the most interesting. We can actually use an expression as the property name. JavaScript sees it as something to be evaluated. That means we can perform calculations, or also call functions. Useful, eh? 😅

const obj = {};

obj[2 + 2] = 'value';

obj['4']; // 'value' 

const myFunction = () => {
   return 'propName';
}

obj[myFunction()] = 'value';

obj['propName']; // 'value'

Dot notation will access identifiers, not variables

When using dot notation, JavaScript will assume you want to access a property with a valid identifier. That means if you have a variable and a property with the same name, the declared property will be used. This could cause some unexpected results if you aren't aware of it.

const myProp = 'value';

const obj = {
     value: 'my-value',
     myProp: 'my-second-value'
};

obj[myProp]; // 'my-value'
obj.myProp; // 'my-second-value'

Final thoughts

So, which should you use? Dot notation is certainly recommended in most cases. However, if you need to use variables or weird characters, then bracket notation will work for you. It depends on the use case. 👍

You can read more web musings on my twitter here.

Blaine Garrett's photo

Good article.

It might be worth mentioning Symbols are also allowed. I've only run into them as object keys in some Google cloud libs. The only reason I like them (conceptually) is that they're harder to manually re-create when constants should be used since each instance is unique. I believe this is their explicit reason for existing.

James Williams's photo

Great point Blaine Garrett. I will make a note of it, and include it in a future update to the article. Thanks

Tapas Adhikary's photo

James Williams, Good one James! Very crisp and neat way of explaining..

Over the period.. I've got used to the brackets.. Felt it like fail-safe :)

James Williams's photo

Thanks, glad you enjoyed it. Brackets for the win :)

Dinys Monvoisin's photo

What you mean by the below phrase?

you might assume they behave in the same way, but that's not quite the case

They are a totally different thing, and each is used in different ways.

I guess I did not get the last section Dot notation - identifiers before variables what you wanted to say. That's why I can't puzzle what you mean.

James Williams's photo

Hi Dinys Monvoisin, I think we agree. My point was if somebody is learning JavaScript for the first time, they might believe that dot and bracket notation are the same, but they are not.

The last point is connected to it, if you were trying to use bracket and dot notation at the same, you might have some unexpected results if you are not aware of the differences.

Maybe my last heading is bad, and I have to edit it :)

Dinys Monvoisin's photo

Oh, ok I did not know it was for beginners. Yet, it is still hard to understand what you are trying to mean? Imagine how it should be for someone starting.