javascript object variable key

Question

I am creating a plugin for Jquery and need to have a variable as a key in an object.

$(selector).animate({self.settings.direction: '+='+self.displacement+'px'}, "slow" , function () {});

this part causes the error:

self.settings.direction

any ideas where my syntax is wrong? thank you

I think the following link shows a pretty good solution I came up with for this using underscore. It couldn't be easier! 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:47

Amadan · Accepted Answer · 2023-02-27T07:25:48.940

AFAIK, you can't. Whatever is in front of the colon in the object literal notation will be automatically interpreted as a string. You will need to construct your object beforehand, and use the square bracket notation.

var options = {}
options[self.settings.direction] = '+=' + self.displacement + 'px';
$(selector).animate(options, "slow" , function () {});

EDIT: You can now:

const prop = "foo"
const bad = { prop: "bar" } // { prop: "bar" }
const good = { [prop]: "bar" } // { foo: "bar" }

so...

$(selector).animate({ [self.settings.direction]: '+='+self.displacement+'px'}, "slow" , function () {});

Easy to forget that's available – pizza247 May 08 '13 at 14:58 — pizza247, May 08 '13 at 14:58

score 11 · Answer 2 · answered Mar 13 '13 at 14:05

11

If the value is also a string you could use JSON.parse:

var a = 'key';
var b = 'value';
var test = JSON.parse('{"' + a + '":"' + b + '"}"');
//test = {key: 'value'}

answered Mar 13 '13 at 14:05

Ronald

383
3
8

+1: equal parts ugly and useful. Very handy. – msanford May 13 '14 at 15:11
What is this dark magic!? They should include this method in Coffeescript to add variable key superpowers. – Matt Fletcher May 28 '14 at 12:53
might be a good idea to escape double quotes like: ```JSON.parse('{\"' + a + '\":\"' + b + '\"}')``` – Demircan Celebi Sep 22 '14 at 15:23

score 7 · Answer 3 · edited Jan 26 '12 at 21:22

7

You can access the string defined by a variable with toString(). so :

var obj = new Object;

obj.a = 0;
obj.b = 1;

var a = "b";

obj["a"]; // will output 0
obj[a.toString()] // will output 1

edited Jan 26 '12 at 21:22

seth.miller

1,988
17
23

answered Jan 26 '12 at 18:40

Mathieu

79
1
1

6

The `.toString()` call is unnecessary. The variable `a` is already a string. All you need to do is remove the quotes: http://jsfiddle.net/FJCFW/. – Travesty3 Jan 18 '13 at 13:42

score 1 · Answer 4 · answered May 20 '11 at 12:08

Keep in mind you are defining an object there between the curly brackets. You can't use dots in property names. Assuming the displacement property is set somewhere else earlier, this will work for you:

$(selector).animate({settings: {direction: '+='+self.displacement+'px'}}, "slow" , function () {})

javascript object variable key

4 Answers4

Linked