Computed Property Names is an ES6 feature which allows the names of object properties in JavaScript object literal notation to be determined dynamically, i.e. computed.
JavaScript objects are really dictionaries, so it was always possible to dynamically create a string and use it as a key with the syntax object[‘property’] = value.
However, ES6 Computed Property Names allow us to use dynamically generated names within object literals. Example:
const myPropertyName = 'c'
const myObject = {
a: 5,
b: 10,
[myPropertyName]: 15
}
console.log(myObject.c) // prints 15
To stress that expressions can be used directly as computed property names, another example:
const fieldNumber = 3
const myObject = {
field1: 5,
field2: 10,
['field' + fieldNumber]: 15
}
console.log(myObject.field3) // prints 15
This can be very handy.
One more variation is to use template literals (string interpolation) for the computed property names — note that this still requires the square bracket syntax, however:
const fieldNumber = 3
const myObject = {
field1: 5,
field2: 10,
[`field${fieldNumber}`]: 15
}
console.log(myObject.field3) // prints 15