Understanding Computed Property Names

Written by TinjureWP Posted on

Note: This post is work-in-progress learning-note and still in active development and updated regularly.

In a previous learning-post JavaScript Objects – The Basics, we discussed simple key:value object properties (values associated with properties). Before ECMAScript 2015(ES6), the property names in the object initializers were literals, mostly as static strings. The MDN documentation has detailed discussion about object literals.

With ES6, the object initializer syntax were introduced which supports computed property names. It allows to use an expression code placed in square brackets {[expression]}:value to define object properties. The value of expression evaluation becomes the computed property name.

In this brief learning-note post. we will learn what is computed property name, its common syntax and some use cases. More detail will be in in ES6 learning lessons series.

Brief Review of Object

Objects are defined using key/value pairs as {key:value}. Object property names must be a string and can be accessed with two property accessors: using dot donation . and bracket notation [ ]. Before ES6, the property name must be a literals strings, or else it would be converted into a string.

The following example adopted from the MDN:

//initialize an object
let objectName = {}; //empty object
//assign property name & a value
objectName['1'] = 'value'; //property name must be string
//access property name with square bracket
console.log(objectName[1]); // OUTPUT => value
console.log(objectName); //OUTPUT => {1: "value"}

In the example above, a non-string (eg. number) is enclosed with '  ' (line 4) and outputs "value" as string (line 7).

The Basic ES5 Syntax
//ES5 basic syntax (valid property names)
object.propertyName;
object['propertyName']; //must be a string

//initialize object
let objectName = {}; //empty object
//add properties & assign values
objectName['year'] = '2018';
objectName.model = 'Camry';

//access property value on console
console.log(objectName['year']); //OUTPUT => 2018
console.log(objectName); //OUTPUT =>{year: "2018", model: "Camry"}

In the example above, valid property name was defined using dot notation (line 2) or square bracket with property name in a string literals (line 2) and add properties and assign values (lines: 8-9).

Computed Property Name

Before ES6, object initializer names were mostly static string literals and to use calculated names a function had to be used. With ES6, the object initializer syntax also supports computed property names.

The Basic Syntax

The following ES6 object initiliazer syntax from the MDN:

// Computed property names (ES2015)
let propName = 'foo';
let objectName = {
  [propName]: 'hey',
  ['b' + 'ar']: 'there'
};
//access value of objectName
console.log(objectName); // OUTPUT => {foo: "hey", bar: "there"}

In the example above, the [propName] expression (line 4) is reassigned from its original value 'foo' (line 2) and ['b' + 'ar'] is concatenated value 'bar' is used as its property name in the output (line 8).

Before ES6, to use calculated names a function had to be used, as shown in the example below:

//ES5 syntax
let myCar = {make: 'Toyota'}
let car_model = 'model'
myCar[car_model] = 'Corolla'
console.log(myCar); //OUTPUT => {make: "Toyota", model: "Corolla"}

//ES6 syntax
let car = 'make';
let myCar = {[car]: 'Toyota', model: 'Corolla'};
console.log(myCar); //OUTPUT => {make: "Toyota", model: "Corolla"}

In the example above, to use car_model variable as a property name (line 4), we had to first define car_model variable (line 3) before its use.

With the ES6 syntax, expression in square bracket can be used directly and the calculated value of expression will be used as its property name value. The ES6 syntax (lines: 8-10) is simpler and easy to read.

Use Case Example

With ES6, bracket notation allows use of an expression in object initialization as a computed property name just like a regular integer name. The value of the expression becomes the property name. Let’s examine this in the following example (adopted from MDN).

// initialize carModel variable
 let carModel = "model";
//create & define myCar object 
 const myCar = {
   [carModel + 1]: "Corolla",
   [carModel + 2]: "Camry",
   [carModel + 3]: "Lexus"
  }
//access computed property
 console.log(myCar.model1); // OUTPUT => Corolla
 console.log(myCar.model2); // OUTPUT => Camry
 console.log(myCar.model3); // OUTPUT => Lexus

In the example above, property names of myCar object are used as expression where carModel value is computed (line 2) and concatenated to get its computed property name (eg. model1, line 10 and so on)

Wrapping Up

In this learning-note post, Computed Property Name, an ES6 features in object property naming was discussed briefly. The ECMAScript 2015 (ES6) language specification standards and its library is listed on the MDN documentation. Some key ES6 features include, accessor descriptor properties, computed property names, Destructing Assignment etc. These features will be discussed in separate learning-note post series.

Useful Resources & Links

While preparing this post, I have referred the following references extensively. Visit original link for additional information.