6

I have an object and I want to use object property value as key (simplified):

var App = function() {
    this.settings = {
        'tetris': {
            title: 'Tetris'
        },
        'galaxian': {
            title: 'Galaxian'
        }
    };
    this.gameName = 'tetris';
    this.request = {
        this.settings[this.gameName].title: 'THIS KEY IS INVALID' // :(
    }
};

I know I could assign it as:

this.request[ this.settings[this.gameName].title ] = 'Valid...';

But I wonder if I can define the property name using the object property value?

skobaljic
  • 9,379
  • 1
  • 25
  • 51

3 Answers3

7

I am afraid, what you mean is not possible. You can not use a variable as a key in an object literal like this:

var key = "somekey";
var obj = {key: "value"}

The above code will result in an object that has the key key.

You can only use a variable to define an object element like this:

var key = "somekey";
var obj = {};
obj[key] = "value"

Then the object get's an element with the key somekey

EDIT: As stated in the comments, in ECMAScript 6 the support for computed properties in object literals got introduced. However the browser support for the computed properties in object literals is very slim (you can look it up here under syntax -> object literals). For example IE 11 has no support for it, neither has Chrome 43.

Markai
  • 2,098
  • 1
  • 10
  • 15
  • Not possible? Only until support for [*computed property names*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) in [*ECMA-262 ed 6*](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object-initializer) is sufficiently widespread. ;-) – RobG Apr 10 '15 at 21:29
  • @RobG Well I'd guess, that around at least 90 % of user browsers do not support it yet, therefore I would say it is not "possible" yet ;) – Markai Apr 13 '15 at 06:37
4

Computed property names will be introduced in ECMAScript edition 6, they're in the current draft, so you can do:

this.request = {
    [this.settings[this.gameName].title]
}

They're reasonably well supported now, see MDN for more detail.

nima
  • 7,796
  • 12
  • 36
  • 53
RobG
  • 142,382
  • 31
  • 172
  • 209
  • It says it is supported only by Firefox. Good to know it will come one day. Thanks man. Actually I tried with normal brackets, of course without success. – skobaljic Apr 10 '15 at 21:47
  • Computed property names are supported in Safari 7.1.3 – RobG Apr 11 '15 at 13:31
  • heh, Safari died man, it is not supported even by apple for PCs. – skobaljic Apr 12 '15 at 20:13
  • @skobaljic—a group of 70+ health clubs I'm working on a web site for get nearly 50% of their traffic from Safari on mobile. Yeah, dead. – RobG Apr 12 '15 at 20:42
1

You can't define literal objects with computed property names; you have to assign them.

In other words, you can either define a literal object using {...} notation if the property name is well-known, or assign values into keys in a map using x[prop] = v notation if the property name is computed.

Think of your JS objects as being either objects or maps, but not both. If the JS object has well-known property names then it's acting as an object:

var obj = { 
  wellKnownPropertyName = 'value';
};

var value = obj.wellKnownPropertyName;

But if the property name is computed then it's not really a property of an object but more like a key in a map, and should be assigned (and read) as such:

var map = {};
var key = getUnknownKeyFromSomewhere();
map[key] = 'value';

var value = map[key];
Avish
  • 4,516
  • 19
  • 28