Fraser Hamilton

JavaScript Property Access

August 06, 2020

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


Written by Fraser Hamilton a full stack developer based out of Edinburgh, Scotland.

© 2020, Fraser Hamilton