Square Brackets Javascript Object Key

JavascriptEcmascript 6

Javascript 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"}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionlcharbonView Question on Stackoverflow
Solution 1 - JavascriptSean VieiraView Answer on Stackoverflow
Solution 2 - JavascripthygullView Answer on Stackoverflow
Solution 3 - JavascriptMonireh DashtianiView Answer on Stackoverflow
Solution 4 - JavascriptEldiyar TalantbekView Answer on Stackoverflow
Solution 5 - JavascriptDean PView Answer on Stackoverflow