Javascript ES6 Object

Question

I see the code in internet:

const SIGNIN_USER = 'SIGNIN_USER';
const SIGNUP_USER = 'SIGNUP_USER';
const ACTION_HANDLERS = {
  [SIGNIN_USER]: (para1) => { return para1; },
  [SIGNUP_USER]: (para2) => { return para2;},
}

// Using ACTION_HANDLERS object:
const handler = ACTION_HANDLERS[para3];
return handler ? handler(para3) : "Frist Time";

I understand the ACTION_HANDLERS is an object. But I don't understand what [SIGNIN_USER], [SIGNUP_USER], ACTION_HANDLERS[para3] mean here???.

I tried on Babel to tranlate to ES5, but I don't understand at all.

I don't know the keyword to search too. Can anyone help me out?

there's a lot of ES2015 goodness happening in that code - if you don't understand what the ES5 version means, it's going to be hard to explain it in a way you'll understand — Jaromanda X, Dec 05 '16 at 05:58
Seems like `computed properties` are probably what you are looking for? — loganfsmyth, Dec 05 '16 at 05:59

score 3 · Accepted Answer · answered Dec 05 '16 at 06:06

Objects in ES6 support computed property key names.

const myKey = 'baz';
const someObjWithRandomValues = {
  ['foo']: someValue,
  [myKey]: otherValue,
  ['rab'.reverse()]: anotherValue
};

// This is the same as
const someObjWithRandomValues = {
  foo: someValue,
  baz: otherValue
  bar: anotherValue
};

The expression in the square brackets is evaluated and that becomes the name of the property.

const someObj = {
  [someExpression]: someValue
};

is the same thing as

const someObj = {};
someObj[someExpression] = someValue;

As for ACTION_HANDLERS[para3], that is just accessing a property with square brackets, and has been a feature Javascript has had for a long time.

const para3 = 'foo';
myObj[para3]();
// Same thing as:
myObj.foo();

Javascript ES6 Object

1 Answers1