Problem explained:
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.
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
<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.
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:
S5 quote that says it should not work
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:
- Return the String value containing the same sequence of characters as the IdentifierName.
The production PropertyName : StringLiteral is evaluated as follows:
- Return the SV [String value] of the StringLiteral.
The production PropertyName : NumericLiteral is evaluated as follows:
- Let nbr be the result of forming the value of the NumericLiteral.
- Return ToString(nbr).
This means that:
{ theTop : 10 }
is the exact same as{ 'theTop' : 10 }
ThePropertyName
theTop
is anIdentifierName
, 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
, andNumericLiteral
(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';
$('#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 #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.
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 #7:
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);
Hope you learned something from this post.
Follow Programming Articles for more!