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 -.
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved