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 -.