Creating object with dynamic keys [duplicate]

Question

First off, I'm using Cheerio for some DOM access and parsing with Node.js. Good times.

Heres the situation:

I have a function that I need to create an object. That object uses variables for both its keys and values, and then return that single object. Example:

stuff = function (thing, callback) {
  var inputs  = $('div.quantity > input').map(function(){
    var key   = this.attr('name')
     ,  value = this.attr('value');

     return { key : value }
  }) 

  callback(null, inputs);
}

It outputs this:

[ { key: '1' }, { key: '1' } ]

(.map() returns an array of objects fyi)

I need key to actually be the string from this.attr('name').

Whats the best way to assign a string as a key in Javascript, considering what I'm trying to do?

Terricolous

you can get dynamic object's key with by: myObj['key'] – Fescennine

Answer 1

In the new ES2015 standard for JavaScript (formerly called ES6), objects can be created with computed keys: Object Initializer spec.

The syntax is:

var obj = {
  [myKey]: value,
}

If applied to the OP's scenario, it would turn into:

stuff = function (thing, callback) {
  var inputs  = $('div.quantity > input').map(function(){
    return {
      [this.attr('name')]: this.attr('value'),
    };
  }) 

  callback(null, inputs);
}

Note: A transpiler is still required for browser compatiblity.

Using Babel or Google's traceur, it is possible to use this syntax today.

---

In earlier JavaScript specifications (ES5 and below), the key in an object literal is always interpreted literally, as a string.

To use a "dynamic" key, you have to use bracket notation:

var obj = {};
obj[myKey] = value;

In your case:

stuff = function (thing, callback) {
  var inputs  = $('div.quantity > input').map(function(){
    var key   = this.attr('name')
     ,  value = this.attr('value')
     ,  ret   = {};

     ret[key] = value;
     return ret;
  }) 

  callback(null, inputs);
}

Genovevagenre

Great edit. Now if ES6 can just be officially released we might have a shot at world peace! :) – Terricolous

You can use Computed Property Keys now if you're willing to use a transpiler like Babel. Example: babeljs.io/repl/… – Jook

Great update about computed keys. That's what I'm looking for these days. I just wonder how did you know about this "magic". Reading the (so long) ES2015 spec document? – Enginery

For computed keys, I am getting a syntax error when using gulp minify task. Any body faced this? and any solution? – Billbillabong

can this also work for nested Objects suppose i have a nested object can i use var obj ={ [dynamic key][dynamic key]=someValue } – Rilke

Any solution for TypeScript? – Feudalize

Answer 2

You can't define an object literal with a dynamic key. Do this :

var o = {};
o[key] = value;
return o;

There's no shortcut (edit: there's one now, with ES6, see the other answer).

Pellicle

I think in es6 you can now do this: var propname = 'thing' {[propname]:5} -> {thing:5} See this for more : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Inning