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.