Square Brackets Javascript Object Key
JavascriptEcmascript 6Javascript Problem Overview
Can anyone explain how the why/how the below method of assigning keys in JavaScript works?
a = "b"
c = {[a]: "d"}
return:
Object {b: "d"}
Javascript Solutions
Solution 1 - Javascript
It's the new ES2015 (the EcmaScript spec formally known as ES6) computed property name syntax. It's a shorthand for the someObject[someKey]
assignment that you know from ES3/5:
var a = "b"
var c = {[a]: "d"}
is syntactic sugar for:
var a = "b"
var c = {}
c[a] = "d"
Solution 2 - Javascript
Really the use of []
gives an excellent way to use actual value of variable as key/
property while creating JavaScript objects.
> I'm pretty much statisfied with the above answer and I appreciate it as it allowed me to write this with a little example. > > I've executed the code line by line on Node REPL (Node shell).
> var key = "fullName"; // Assignment
undefined
>
> var obj = {key: "Rishikesh Agrawani"} // Here key's value will not be used
undefined
> obj // Inappropriate, which we don't want
{ key: 'Rishikesh Agrawani' }
>
> // Let's fix
undefined
> var obj2 = {[key]: "Rishikesh Agrawani"}
undefined
> obj2
{ fullName: 'Rishikesh Agrawani' }
>
Solution 3 - Javascript
const animalSounds = {cat: 'meow', dog: 'bark'};
const animal = 'lion';
const sound = 'roar';
{...animalSounds, [animal]: sound};
The result will be
{cat: 'meow', dog: 'bark', lion: 'roar'};
Solution 4 - Javascript
Also, only condition to use []
notation for accessing or assigning stuff in objects when we don't yet know what it's going to be until evaluation or runtime.
Solution 5 - Javascript
I want to make an object but I don't know the name of the key
until runtime.
Back in the ES5 days:
var myObject = {};
myObject[key] = "bar";
Writing two lines of code is so painful... Ah, ES6 just came along:
var myObject = {[key]:"bar"};
If the value of key
equals foo
, then both approaches result in:
{foo : "bar"}