Dot and Bracket Notation in ES6

Functional programming implements dot and bracket notation quite frequently.

const person = {
      firstName: 'foo',
     'lastName': 'baz' }; 
const x = 'firstName'; 
const y = 'lastName';

person.firstName and person[‘firstName’] are equivalent. The two object keys firstName and ‘lastName’, unquoted or quoted and regardless of how they are declared, are both coerced to be strings.

“The two most common ways to access properties in JavaScript are with a dot and with square brackets. Both value.x and value[x] access a property on value — but not necessarily the same property. The difference is in how x is interpreted. When using a dot, the part after the dot must be a valid variable name, and it directly names the property. When using square brackets, the expression between the brackets is evaluated to get the property name. Whereas value.x fetches the property of value named “x”, value[x] tries to evaluate the expression x and uses the result as the property name.”⁴

If you have invalid identifiers, for example

let person = {
    'first name': 'foo', 
    'last-name': 'baz',
    2: 'baz'
};

Then you cannot access those values with dot notation and can only access them with square brackets; the variable name after the dot must be valid. In fact, the same issue comes up in Python with dots and colons, in table column names such as foo.bar, for which table.foo.bar would be total nonsense so we should do table[‘foo.bar’].

One thing that bracket notation is really good for is parametrically retrieving values from an object. In the above example, the difference between person.firstName and person[‘firstName’] seems pretty trivial because firstName is the name of the property. If we however stored the name of the property in a string like let propStr = firstName; person.propStr would return undefined since there is no such property but person[propStr] would return ‘foo’ since propStr evaluates to ‘firstName’. If you’re interested, then note an example in which key is the parameter.

for (let key in person) {
     if (person.hasOwnProperty(key)) {
         console.log(person.key);    // expected output: undefined
         console.log(person[key]);    // expected output: 'foo' then 'baz'
     }
 }¹

Bracket notation is useful to use when the key we want to pass has been stored in a variable which means that there is not a key in our object that matches what we’re using in the notation.² Bracket notation allows what we’re using to match one of the keys; bracket notation is essential to using valid identifiers.

object.key and object[‘key’] are the same. If you have a constant x === ‘key’, then you can write object[x].

We should ask ourselves, is the variable a true property name or is it a variable holding a string with a class name? In more complex situations (dealing with design patterns and using this keyword especially), it is harder to see the difference…

class Vehicle {
    constructor(arr) {
        this.wheelTotal = arr[0];
        this.energySource = arr[1];
        this.manufacturer = arr[2];
        if (arr[3] === undefined) this.isOn = false;
    }
getSpec(spec) {
        if (spec === 'getSpec') return undefined
        return this[spec]
    }
}

Notice that all of the properties on the Vehicle class constructor use dot notation and that the returned value this[spec] uses bracket. If we change the this.wheelTotal property in the constructor to this[wheelTotal], then the instance is undefined. Similarly, if we change this[spec] to this.spec we see failures now as well. Remember that spec is a parameter that holds the name of the property input, not a property itself, which makes the this.spec return value undefined.

The more confusing case is when referencing a new property like wheelTotal. If we try and use bracket notation, it wants to evaluate what ‘wheelTotal’ is, but we have no definition of wheelTotal since it was not defined before this point (wheelTotal is not the name of a parameter in this case).³

When you call a variable in an object, you should use brackets with JavaScript ES6 syntax; with a simple string, you would not need brackets at all. If the property name is dynamic and so computed, it is encased in brackets.

Bracket notation symbolizes evaluation; if you’re interested then check out the link at the end of this article below.⁴

[1]: This is trivial to mention because as my friend Michael Koshakow says, key stores a string; it could be any string.

[2]: My mentor Lindsay Maher says bracket notation is useful to us because the key we want to pass has been stored in a variable with a different name which means that the notation indicates a false name which stands for something else.

[3]: My friend Sara Culhane says that dot notation won’t work for the name of a property which is not a property itself.

[4]: Mark Renouf and Claudio Cortese. syntax — JavaScript property access: dot notation vs. brackets?
https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets