Create an object with dynamic property names [duplicate]

Question

I am trying to do this:

var KEYS = {} ;

KEYS.PHONE_TYPE = 'phone-type';
KEYS.AGENT_TYPE = 'agent-type';

var myAppConfig = {
    ...
    iconMap : { 
        KEYS.PHONE_TYPE : 'icon-phone', 
        KEYS.AGENT_TYPE : 'icon-headphones'
    };
    ...
};

But it is failing, with a message: Expected ':' and instead saw '.'.

How can I initialize an object using indirect (non-literal) keynames?

To be clear, the result I want is:

{
    'phone-type' : 'icon-phone',
    'agent-type' : 'icon-headphones'
}

Answer 1

If you're using ES6 (or something like Babel/browserify), you can write it like this:

iconMap : { 
    [KEYS.PHONE_TYPE] : 'icon-phone', 
    [KEYS.AGENT_TYPE] : 'icon-headphones'
};

Answer 2

You would have to add those properties separately using bracket notation:

var myAppConfig = {
    ...
    iconMap : { }
    ...
};

myAppConfig.iconMap[ KEYS.PHONE_TYPE ] = 'icon-phone';
myAppConfig.iconMap[ KEYS.AGENT_TYPE ] = 'icon-headphones';