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])
}