JavaScript property access

When it comes to accessing an objects properties in JavaScript we have two options, we can use the dot notation or the square bracket notation. Here's a simple example illustrating the usage of both.

const obj = { foo: 'bar' };

const x = obj.foo;

console.log(x);

// bar

const y = obj['foo'];

console.log(y);

//bar

So which should we be using? Dot notation is in my opinion faster to write and cleaner to read. So I would recommend using it wherever you can. There are some situations in which dot notation cannot be used due to special characters in the object's property names.

const obj = { 'foo[]': bar, 'foo.foo': bar };

const x = obj.foo[]; // invalid syntax

const x = obj['foo[]'];

console.log(x);

// bar

const y = obj.foo.foo; // invalid syntax

const y = obj['foo.foo'];

console.log(y);

//bar

The square bracket can also sometimes be preferable when dealing with property names that vary in a predictable way:

for (let i = 0; i < 5; i++) {
  someFunction(myForm['control' + i]);
}