object.property vs object['property']

In this post, we will see the differences between declaring and accessing the object property with and without quotes:
const obj = { key: 'value' };
obj.key;
// Or
const obj = { key: 'value' };
obj['key'];

Differences

  1. If the property name is a numeric literal, then you might to use different key to access the property value.
    const obj = { 12e34: 'hello' };
    console.log(obj['1.2e34']); // undefined
    console.log(obj['1.2e+35']); // 'hello'
    Wrapping the property with quotes will help us avoid the problem:
    const obj = { '12e34': 'hello' };
    console.log(obj['12e34']); // 'hello'
  2. If the property is one of reserved keywords, then we have to use with quotes to access the property value.
    const styles = { class: 'foo' };
    // Will throw an exception because class is a reserved keyword
    styles[class];
    // returns 'foo'
    styles['class'];
    The same thing happens with the property contains special characters such as -.