How to use a variable for a key in a JavaScript object literal?
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.
{ 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.