How to use a variable for a key in a JavaScript object literal?

Question

Why does the following work?

<something>.stop().animate(
 { 'top' : 10 }, 10
);

Whereas this doesn't work:

var thetop = 'top';
<something>.stop().animate(
 { thetop : 10 }, 10
);

To make it even clearer: At the moment I'm not able to pass a CSS property to the animate function as a variable.

• Bergi: see also: create object using variables for property name
• Bergi: see also: creating object with dynamic keys
• Bergi: see also: add dynamically named properties to object
• Abdul Aziz Barkat: Does this answer your question? JavaScript set object key by variable

Answer 1

{ thetop : 10 } is a valid object literal. The code will create an object with a property named thetop that has a value of 10. Both the following are the same:

obj = { thetop : 10 };
obj = { "thetop" : 10 };

In ES5 and earlier, you cannot use a variable as a property name inside an object literal. Your only option is to do the following:

var thetop = "top";
// create the object literal
var aniArgs = {};
// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 
// Pass the resulting object to the animate method
<something>.stop().animate(
 aniArgs, 10 
); 

ES6 defines ComputedPropertyName as part of the grammar for object literals, which allows you to write the code like this:

var thetop = "top",
 obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

You can use this new syntax in the latest versions of each mainstream browser.

• speendo: I understand! Thank you! Shoudln't this also work with eval? I mean it doesn't work in my example at the moment, but I thin it should... :-)
• Andy E: @Marcel: eval() wouldn't work inside an object literal for dynamic property names, you'd just get an error. Not only that, but eval() really shouldn't be used for such things. There's an excellent article on correct and incorrect usage of eval: blogs.msdn.com/ericlippert/archive/2003/11/01/53329.aspx
• Alexei Levenkov: @AndyE consider updating "recent versions" and "current IE TP" with some more specific time like "Versions later than XXX" or "after 2014-mm" (I'd make change myself, but I don't know what good values would be.
• wasabigeek: for ES6, is there a way to leave out the property if the key is null/undefined? For example, in {[key] : "value"}, if key was null, it would give { null: "value"}, whereas I'd like the result to be {}

Answer 2

With ECMAScript 2015 you are now able to do it directly in object declaration with the brackets notation:

var obj = {
 [key]: value
}

Where key can be any sort of expression (e.g. a variable) returning a value.

So here your code would look like:

<something>.stop().animate({
 [thetop]: 10
}, 10)

Where thetop will be evaluated before being used as key.

Answer 3

ES5 quote that says it should not work

Note: rules have changed for ES6: https://stackoverflow.com/a/2274327/895245

Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

PropertyName :

• IdentifierName
• StringLiteral
• NumericLiteral

[...]

The production PropertyName : IdentifierName is evaluated as follows:

1. Return the String value containing the same sequence of characters as the IdentifierName.

The production PropertyName : StringLiteral is evaluated as follows:

1. Return the SV [String value] of the StringLiteral.

The production PropertyName : NumericLiteral is evaluated as follows:

1. Let nbr be the result of forming the value of the NumericLiteral.
2. Return ToString(nbr).

This means that:

• { theTop : 10 } is the exact same as { 'theTop' : 10 }

  The PropertyName theTop is an IdentifierName, so it gets converted to the 'theTop' string value, which is the string value of 'theTop'.

• It is not possible to write object initializers (literals) with variable keys.

  The only three options are IdentifierName (expands to string literal), StringLiteral, and NumericLiteral (also expands to a string).

• Bergi: Ah, right. I typically cite the specific questions in a blockquote to make it clear when I answer them directly. Quoting the standard can make a good answer even better, but currently your post doesn't even answer the question imo. Stating what can make a key in ES5 doesn't imply how they work. Surely thetop is an IdentifierName, so why does it not work? That question is still open.
• Ciro Santilli OurBigBook.com: @Bergi thanks again for explaining to me! I have updated it to make it more explicit. I hadn't done it before because I though it was obvious, because we can write {a:1}.a, so a clearly not expand the variable value in the identifier case. But yes, explaining further is an improvement in this case.

Answer 4

ES6 / 2020

If you're trying to push data to an object using "key:value" from any other source, you can use something like this:

let obj = {}
let key = "foo"
let value = "bar"
obj[`${key}`] = value
// A `console.log(obj)` would return:
// {foo: "bar}
// A `typeof obj` would return:
// "object"

Hope this helps someone :)

• tinystone: obj[`some-prefix-${key}`] = value also works if someone wish to enjoy the flexibility to modify the key variable. The result is { some-prefix-foo: "bar" }

Answer 5

Adding square bracket around the variable works good for me. Try this

var thetop = 'top';
<something>.stop().animate(
 { [thetop] : 10 }, 10
);

• Oliver: This won't work in older versions of EcmaScript, but nowadays this is a very clean approach.

Answer 6

I have used the following to add a property with a "dynamic" name to an object:

var key = 'top';
$('#myElement').animate(
 (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
 10
);

key is the name of the new property.

The object of properties passed to animate will be {left: 20, width: 100, top: 10}

This is just using the required [] notation as recommended by the other answers, but with fewer lines of code!

Answer 7

You can also try like this:

const arr = [{
 "description": "THURSDAY",
 "count": "1",
 "date": "2019-12-05"
},
{
 "description": "WEDNESDAY",
 "count": "0",
 "date": "2019-12-04"
}]
const res = arr.map(value => {
 return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);

Answer 8

I couldn't find a simple example about the differences between ES6 and ES5, so I made one. Both code samples create exactly the same object. But the ES5 example also works in older browsers (like IE11), wheres the ES6 example doesn't.

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';
matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';
function addObj(obj, key, value) {
 obj[key] = value;
 return obj;
}
matrix[a] = addObj({}, b, addObj({}, c, d));

Answer 9

Update: As a commenter pointed out, any version of JavaScript that supports arrow functions will also support ({[myKey]:myValue}), so this answer has no actual use-case (and, in fact, it might break in some bizarre corner-cases).

Don't use the below-listed method.

---

I can't believe this hasn't been posted yet: just use arrow functions with anonymous evaluation!

Completely non-invasive, doesn't mess with the namespace, and it takes just one line:

myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);

demo:

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);

(削除) useful in environments that don't support the new {[myKey]: myValue} syntax yet, such as—apparently; I just verified it on my Web Developer Console—Firefox 72.0.1, released 2020年01月08日. (削除ここまで) I stand corrected; just wrap the thing in parenthesis and it works.

(I'm sure you could potentially make some more powerful/extensible solutions or whatever involving clever use of reduce, but at that point you'd probably be better served by just breaking out the Object-creation into its own function instead of compulsively jamming it all inline)

---

not that it matters since OP asked this ten years ago, but for completeness' sake and to demonstrate how it is exactly the answer to the question as stated, I'll show this in the original context:

var thetop = 'top';
<something>.stop().animate(
 ((k,v)=>{o={};o[k]=v;return o;})(thetop,10), 10
);

• Sebastian Simon: Arrow functions and computed property names were introduced at the same time. Your console check is incorrect, as you need to type ({ [myKey]: myValue }) into the console to make it an object, not a block. "It takes just one line" — Sure, the entire minified jQuery library takes just one line. "non-invasive" — not true if the object has getters, setters, or is a Proxy target.
• Ramil Shavaleev: The answer can be rewritten as var myNewObj = (function (myKey, myValue) { o = {}; o[myKey] = myValue; return o; })(myKey, myValue); for support versions < ES6

Answer 10

Given code:

var thetop = 'top';
<something>.stop().animate(
 { thetop : 10 }, 10
);

Translation:

var thetop = 'top';
var config = { thetop : 10 }; // config.thetop = 10
<something>.stop().animate(config, 10);

As you can see, the { thetop : 10 } declaration doesn't make use of the variable thetop. Instead it creates an object with a key named thetop. If you want the key to be the value of the variable thetop, then you will have to use square brackets around thetop:

var thetop = 'top';
var config = { [thetop] : 10 }; // config.top = 10
<something>.stop().animate(config, 10);

The square bracket syntax has been introduced with ES6. In earlier versions of JavaScript, you would have to do the following:

var thetop = 'top';
var config = (
 obj = {},
 obj['' + thetop] = 10,
 obj
); // config.top = 10
<something>.stop().animate(config, 10);

• Sebastian Simon: obj['' + thetop] can just be replaced by obj[thetop]. It’s automatically stringified, unless it’s a symbol.

Answer 11

2020 update/example...

A more complex example, using brackets and literals...something you may have to do for example with vue/axios. Wrap the literal in the brackets, so

[ ` ... ` ]

{
 [`filter[${query.key}]`]: query.value, // 'filter[foo]' : 'bar'
}

Answer 12

ES5 implementation to assign keys is below:

var obj = Object.create(null),
 objArgs = (
 (objArgs = {}),
 (objArgs.someKey = {
 value: 'someValue'
 }), objArgs);
Object.defineProperties(obj, objArgs);

I've attached a snippet I used to convert to bare object.

var obj = {
 'key1': 'value1',
 'key2': 'value2',
 'key3': [
 'value3',
 'value4',
 ],
 'key4': {
 'key5': 'value5'
 }
}
var bareObj = function(obj) {
 var objArgs,
 bareObj = Object.create(null);
 Object.entries(obj).forEach(function([key, value]) {
 var objArgs = (
 (objArgs = {}),
 (objArgs[key] = {
 value: value
 }), objArgs);
 Object.defineProperties(bareObj, objArgs);
 });
 return {
 input: obj,
 output: bareObj
 };
}(obj);
if (!Object.entries) {
 Object.entries = function(obj){
 var arr = [];
 Object.keys(obj).forEach(function(key){
 arr.push([key, obj[key]]);
 });
 return arr;
 }
}
console(bareObj);

Answer 13

If you want object key to be same as variable name, there's a short hand in ES 2015. New notations in ECMAScript 2015

var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10

Answer 14

You can do it this way:

var thetop = 'top';
<something>.stop().animate(
 new function() {this[thetop] = 10;}, 10
);

Answer 15

This way also you can achieve desired output

var jsonobj={};
var count=0;
$(document).on('click','#btnadd', function() {
 jsonobj[count]=new Array({ "1" : $("#txtone").val()},{ "2" : $("#txttwo").val()});
 count++;
 console.clear();
 console.log(jsonobj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

Answer 16

You could do the following for ES5:

var theTop = 'top'
<something>.stop().animate(
 JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

Or extract to a function:

function newObj (key, value) {
 return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}
var theTop = 'top'
<something>.stop().animate(
 newObj(theTop, 10), 10
)