How do I interpolate a variable as a key in a JavaScript object?

JavascriptDictionary

Javascript Problem Overview


How can I use the value of the variable a as a key to lookup a property? I want to be able to say: b["whatever"] and have this return 20:

var a = "whatever";
var b = {a : 20};     // Want this to assign b.whatever
alert(b["whatever"]); // so that this shows 20, not `undefined`

I am asking if it's possible during the creation of b, to have it contain "whatever":20 instead of a:20 where "whatever" is itself in a variable. Maybe an eval could be used?

Javascript Solutions


Solution 1 - Javascript

var a = "whatever";
var b = {};
b[a] = 20;
alert(b["whatever"]); // shows 20

Solution 2 - Javascript

This works in Firefox 39 and Chrome 44. Don't know about other browsers. Also it doesn't work in nodejs v0.12.7.

var a = "whatever";
var b = { [a]: 20 };
console.log(b["whatever"]); // shows 20

That is, to interpolate a variable, enclose it in brackets.

I'm not sure if this is a part of any standard. Originally, I saw such syntax here: https://hacks.mozilla.org/2015/07/es6-in-depth-classes/ where the author defined:

[functionThatReturnsPropertyName()] (args) { ... }

I'm also not sure if you should use that syntax. It's not widely known. Other members on your team might not understand the code.

Solution 3 - Javascript

var a = "whatever";
var b = {a : 20};
b[a] = 37;
alert(b["whatever"]); // 37

'a' is a string with the value 'a'. a is a variable with the value 'whatever'.

Solution 4 - Javascript

Great question. I had a time trying to figure this out with underscore but the answer couldn't be more simple:

var a = "whatever";
var b = {a : 20};

var array = [a, b]
var answer = _.object([[array]])// {whatever: {a:20}}//NOTICE THE DOUBLE SET OF BRACKETS AROUND [[array]]

I hope this helps!

Solution 5 - Javascript

Try this:

var a = "whatever";
var c = "something";
var b = {whatever : 20, something: 37};
alert(b[a]); // Shows 20
alert(b[c]); // Shows 37

Here is the fiddle.

Or if I understand from the below comments correctly, try this:

var a = "whatever";
var b = {a : 20};
alert(b.a); // Shows 20

Solution 6 - Javascript

To show all options, I want mention the CoffeeScript way of doing this, which is:

var a = "whatever";
var b = (
  obj = {},
  obj["" + a] = 20,
  obj
);

alert(b.whatever); // 20

Although I prefer:

var a = "whatever";
var b = {};
b[a] = 20;

alert(b.whatever); // 20

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGeoView Question on Stackoverflow
Solution 1 - JavascriptmVChrView Answer on Stackoverflow
Solution 2 - JavascriptmbezjakView Answer on Stackoverflow
Solution 3 - JavascriptRocket HazmatView Answer on Stackoverflow
Solution 4 - JavascriptrashadbView Answer on Stackoverflow
Solution 5 - JavascriptNaftaliView Answer on Stackoverflow
Solution 6 - JavascriptBenny NeugebauerView Answer on Stackoverflow