JavaScript set object key by variable

Question

I am building some objects in JavaScript and pushing those objects into an array, I am storing the key I want to use in a variable then creating my objects like so:

var key = "happyCount";
myArray.push( { key : someValueArray } );

but when I try to examine my array of objects for every object the key is "key" instead of the value of the variable key. Is there any way to set the value of the key from a variable?

Fiddle for better explanation: http://jsfiddle.net/Fr6eY/3/

The solution in ES6 is to put the variable in square brackets in order to evaluate it. `var key = "happyCount"; myArray.push({ [key]: someValueArray });` — Dan Cron, Apr 29 '16 at 20:40
@DanCron Sounds great, but when will 99%+ of 'browsers' in the user base be ES6-capable? — Jake, Sep 28 '17 at 07:09
@Jake The only browser that currently does not support this es6 feature is IE11: https://kangax.github.io/compat-table/es6/#test-object_literal_extensions_computed_properties — Hunter McMillen, Sep 28 '17 at 13:47
@Jake That's a good point. One possible solution is to use babel to transpile ES6 into ES5. — Dan Cron, Sep 29 '17 at 13:16
@HunterMcMillen You can't normally assume everyone is using the latest version of whatever browser - a significant number of web users have a significantly out of date browser. Your use of ES6-specific constructs will break your site for them. — Jake, Sep 30 '17 at 01:47
@Jake That is exactly what babel is for. As Dan Cron mentions above. — Hunter McMillen, Oct 02 '17 at 15:38
@Jake Like Hunter says, it's best not to code for ES5 users. If you need to support older browsers, pollyfill & transpile. It's now 2018, not 2009, we really need to move on. — Keith, Mar 21 '18 at 12:58
In my case, Dan Cron's tip was fastest to correct my code. As to what Keith says, I definitely agree. As to what @Hunter McMillen said about IE11, I am wondering more generally: Is it reasonable to take into account Microsoft browsers now, since their world market share amounts to peanuts nowadays? Just as Firefox (my favourite one), they are bound to die presently, including Opera. Quoting Keith: ' let's move on'. — Brice C., Apr 02 '22 at 09:32
Does this answer your question? [How to use a variable for a key in a JavaScript object literal?](/q/2274242/90527) — outis, Sep 01 '22 at 07:52

gen_Eric · Accepted Answer · 2021-09-27T16:25:46.093

2941

You need to make the object first, then use [] to set it.

var key = "happyCount";
var obj = {};

obj[key] = someValueArray;
myArray.push(obj);

UPDATE 2021:

Computed property names feature was introduced in ECMAScript 2015 (ES6) that allows you to dynamically compute the names of the object properties in JavaScript object literal notation.

const yourKeyVariable = "happyCount";
const someValueArray= [...];

const obj = {
    [yourKeyVariable]: someValueArray,
}

edited Sep 27 '21 at 16:25

answered Jul 16 '12 at 16:26

gen_Eric

223,194
41
299
337

2

Where did you define `myArray` ? – Alex G May 31 '15 at 02:00
5

@AlexG: It was used in the question. – gen_Eric Jun 01 '15 at 14:10
404

Note, that things changed [for the better in ES6](http://stackoverflow.com/a/2274327/444255), i.e. `{[key]:someValueArray}` – Frank N Mar 14 '17 at 17:53
12

@Frank Nocke I'm looking forward to be able to use it in about 10 years time when all the 'browsers' we have to support support it... – Jake Sep 28 '17 at 05:11
18

@Jake you can program in ES6 or ES7 today, and have Babel compile your JS file back to ES5. This is how webapps are built nowadays. – Barry Staes Nov 28 '17 at 08:34
31

for those who wonder how this ES6 feature is called: it is `Computed property name` – juggernaut Mar 13 '19 at 11:52
1

Specifically, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Computed_object_property_names_and_destructuring – massic80 Jul 09 '19 at 14:44
Couldn't you do ```{`${key}`:value}``` – Aidan Jul 15 '19 at 18:54
@AidanWelch: I tried that and got `SyntaxError: expected property name, got '${'`. – gen_Eric Jul 16 '19 at 15:40
`{`${key}`:value}` also requires ES6 for template literals – SpeedOfRound Nov 18 '19 at 15:31

kiranvj · Answer 2 · 2022-04-06T06:33:57.333

In ES6, you can do like this.

var key = "name";
var person = {[key]:"John"}; // same as var person = {"name" : "John"}
console.log(person); // should print  Object { name="John"}

    var key = "name";
    var person = {[key]:"John"};
    console.log(person); // should print  Object { name="John"}

Its called Computed Property Names, its implemented using bracket notation( square brackets) []

Example: { [variableName] : someValue }

Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name.

For ES5, try something like this

var yourObject = {};

yourObject[yourKey] = "yourValue";

console.log(yourObject );

example:

var person = {};
var key = "name";

person[key] /* this is same as person.name */ = "John";

console.log(person); // should print  Object { name="John"}

    var person = {};
    var key = "name";
    
    person[key] /* this is same as person.name */ = "John";
    
    console.log(person); // should print  Object { name="John"}

I provided a solution that I think may be of some interest to people at this link using underscore: http://stackoverflow.com/questions/5640988/how-do-i-interpolate-a-variable-as-a-key-in-a-javascript-object/30608422#30608422 — rashadb, Jun 02 '15 at 23:46

score 14 · Answer 3 · answered Jul 25 '22 at 19:37

14

var key = "happyCount";
myArray.push( { [key] : someValueArray } );

answered Jul 25 '22 at 19:37

Ishaan Kapoor

334
2
6

1

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. – Saeed Zhiany Jul 26 '22 at 03:16
This is not a different answer than existing ones. – Akaisteph7 Mar 09 '23 at 17:37

Rahul Pawar · Answer 4 · 2023-01-03T10:29:56.173

14

In ES6 We can write objects like this

const key= "Name";
const values = "RJK"

const obj = {
    [key]: values,
}

edited Jan 03 '23 at 10:29

answered Jan 03 '23 at 10:26

Rahul Pawar

157
1
3

2

This is not a different answer than existing ones. – Akaisteph7 Mar 09 '23 at 17:36

underflow · Answer 5 · 2023-02-03T19:47:15.510

14

The Reality

The problem in JS is simply that:

{ x: 2 }

is THE SAME as:

{ "x": 2 }

(even if you have x a variable defined!)

Solution

Add square brackets [] around the identifier of the key:

var key = "happyCount";
myArray.push( { [key] : someValueArray } );

(Nowadays the keyword var is not much used, so please use instead const or let)

tldr;

edited Feb 03 '23 at 19:47

answered Feb 03 '23 at 19:35

underflow

1,545
1
5
19

score 11 · Answer 6 · answered Apr 14 '22 at 08:59

11

Use this.

var key = 'a'
var val = 'b'

console.log({[key]:val})

//a:'b'

answered Apr 14 '22 at 08:59

devtunus

121
1
2

3

This answer was already given by @kiranvj – Tobias S. Apr 14 '22 at 09:00
I do like how I can get the answer very quickly, as opposed to @kiranvjs answer – jfunk Apr 15 '22 at 14:59

score 0 · Answer 7 · answered Nov 02 '22 at 02:38

In TypeScript, it should look something like this

    let title ="Current User";
    type User = {
      [key:string | number | symbol]: any
    };

    let myVar: User = {};

    myVar[ title ] = "App Developer";

    console.log(myVar)// Prints: { Current User:"App Developer"}

score 0 · Answer 8 · answered Nov 17 '22 at 15:00

0

let key = "name";
let name= "john";
const obj ={
 id:01
}
obj[key] = name;
console.log(obj); // output will {id:01,name:"john}

Use square brackets shown it will set as key

answered Nov 17 '22 at 15:00

Surendra Singh Kamboj

11
2

This is not a different answer than existing ones. – Akaisteph7 Mar 09 '23 at 17:36

JavaScript set object key by variable

8 Answers8

The Reality

Solution

tldr;

Linked

Related