JavaScript - object property access: dot notation vs brackets notation

Syntax: object.propertyName

Note:

Accessing property this way, in propertyName we must use characters that can be placed in variables.

Syntax: object['propertyName']

Note:

Accessing property this way, propertyName must be a string type.

Practical example:

// ONLINE-RUNNER:browser;

const object = {
  _: 'a',
  $: 'b',
  field: 'c',
  '1': 'd',
  '1.2': 'e',
  '1.2.3' : 'f'
};

// Valid in that notation:

console.log(object._);      // a
console.log(object.$);      // b
console.log(object.field);  // c

// Invalid in that notation:

// console.log(object.1);
// console.log(object.1.2);
// console.log(object.1.2.3);

Practical example:

// ONLINE-RUNNER:browser;

const object = {
  _: 'a',
  $: 'b',
  field: 'c',
  '1': 'd',
  '1.2': 'e',
  '1.2.3' : 'f'
};

// Valid in that notation:

console.log(object['_']);       // a
console.log(object['$']);       // b
console.log(object['field']);   // c

// Still valid in that notation:

console.log(object['1']);       // d
console.log(object['1.2']);     // e
console.log(object['1.2.3']);   // f

Benefits:

Makes code more readable.

Benefits:

Variables can be used to access property values.