ES6’s “Computed Property Names” feature allows you to have an expression (a piece of code that results in a single value like a variable or function invocation) be computed as a property name on an object.
For example, say you wanted to create a function that took in two arguments (key
, value
) and returned an object using those arguments. Before Computed Property Names, because the property name on the object was a variable (key
), you’d have to create the object first, then use bracket notation to assign that property to the value.
function objectify (key, value) {
let obj = {}
obj[key] = value
return obj
}
objectify('name', 'Tyler') // { name: 'Tyler' }
However, now with Computed Property Names, you can use object literal notation to assign the expression as a property on the object without having to create it first. So the code above can now be rewritten like this.
function objectify (key, value) {
return {
[key]: value
}
}
objectify('name', 'Tyler') // { name: 'Tyler' }
Where key
can be any expression as long as it’s wrapped in brackets, []
.
Hear me out - most JavaScript newsletters suck. That's why we made Bytes.
The goal was to create a JavaScript newsletter that was both insightful and entertaining. Over 80,000 subscribers later and well, reviews don't lie
I pinky promise you'll love it, but here's a recent issue so you can decide for yourself.
Delivered to over 80,000 developers every Monday