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

Problem explained:

Why does the following work?

    { 'top' : 10 }, 10

Whereas this doesn’t work:

var thetop = 'top';
    { 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.

How to use a variable for a key in a JavaScript object literal? 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
    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(; // -> 10

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

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:

  [thetop]: 10
}, 10)

Where thetop will be evaluated before being used as key.

Answer #3:

S5 quote that says it should not work


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).

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 🙂

Answer #5:

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

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

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 #6:

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.


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

matrix[a] = {[b]: {[c]: d}};


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 #7:

Given code:

var thetop = 'top';
    { thetop : 10 }, 10


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 }; // = 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,
); // = 10
<something>.stop().animate(config, 10);

Hope you learned something from this post.

Follow Programming Articles for more!

About ᴾᴿᴼᵍʳᵃᵐᵐᵉʳ

Linux and Python enthusiast, in love with open source since 2014, Writer at, India.

View all posts by ᴾᴿᴼᵍʳᵃᵐᵐᵉʳ →