Real use case dynamic (computed) property

Question

A dynamic property:

var obj = {
  // Computed (dynamic) property names
  [ 'prop_' + (() => 42)() ]: 42
};

This is of course very fancy. But where could someone use this without adding unnecessary complexity?

could it not be used to calculate a value of a property which represents the price + tax or similar? — Sam Holder, Jan 11 '16 at 18:19
@SamHolder That would be a real dynamic property, but the OP is talking about dynamic property names, from the example in the question. — Juan Mendes, Jan 11 '16 at 18:24
Have a look at our canonical [Using a variable for a key in a JavaScript object literal](http://stackoverflow.com/q/2274242/1048572) and all its linked questions for an overview of use cases — Bergi, Jan 11 '16 at 18:33
Okay... And now I just used it myself:) `{ [match.isHomeMatch ? 'home' : 'away']: own(), [match.isHomeMatch ? 'away' : 'home']: theirs() }` — Laoujin, Feb 09 '16 at 02:15

score 9 · Accepted Answer · answered Jan 11 '16 at 18:22

9

If you have a property name as a constant:

var obj = { [SOME_CONSTANT]: 42 };

answered Jan 11 '16 at 18:22

SLaks

837,282
173
1,862
1,933

Juan Mendes · Answer 2 · 2016-01-11T18:29:57.110

One case where I wanted it was where property names for JSON were defined in generated files, based off Java classes.

// Generated
var SomeJsonBodyParams = {NAME: 'name', ID: 'id', ETA, 'estimatedTimeOfArrival'};

// Using it
sendAjax('some/url', {
    [SomeJsonBodyParams.NAME] = userData.name,
    ...
});

We even had a method so we could kind of do it

function makeObj() {
  var obj = {};
  for (var i=0; i < arguments.length; i+=2) {
      obj[i] = obj[i+i];
  }
  return obj;
}

sendAjax('some/url', makeObj(
    SomeJsonBodyParams.NAME, userData.name,
    ...
));

score 3 · Answer 3 · answered Jan 11 '16 at 18:38

3

You can use it in class and with Symbols:

class MyClass {
    [Symbol.iterator]() {
        // my iterator
    }
}

answered Jan 11 '16 at 18:38

madox2

45,325
15
94
95

score 2 · Answer 4 · answered Jan 11 '16 at 18:28

Let's say you have:

var hi = 'hi';
var test = 'test';
var hello = 'hello';

Instead of:

var object = {};

object[hi] = 111;
object[test] = 222;
object[hello] = 333;

You could write it in a much shorter syntax:

var object = {
    [hi]: 111,
    [test]: 222,
    [hello]: 333
}

score 1 · Answer 5 · answered Jan 11 '16 at 18:25

E.g. it could be used when you want to use a, let's say, constant as a key in object.

const DATA_TYPE = {
    PERSON: 'person',
    COMPANY: 'company'
};

let cache = {
    [DATA_TYPE.PERSON]: getPerson()
};

And later access:

cache[DATA_TYPE.PERSON]

Instead of DATA_TYPE.PERSON could be anything (including some real-time calculated values).

Real use case dynamic (computed) property

5 Answers5