How a javascript object can have only property without predefined key

Question

I have some "dumb" question, sorry, but I really don't understand how it works.

In this createReducer call we are passing the second argument - js object (as I understand).

But I didn't see any key... only function. How it can works?

  export const todos = createReducer([], {
      [ActionTypes.ADD_TODO](state, action) {
        let text = action.text.trim()
        return [ ...state, text ]
      }
    })


function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
}

I expected to see some like:

    {
          [ActionTypes.ADD_TODO] : (state, action) => {
                let text = action.text.trim()
                return [ ...state, text ]
              }
        }

The same with this construction: it's a function where is the key? How it can be?

const dynamicRoutes = {
    component : AppComponent,
    childRoutes : [
        {
            path : "/",
            getComponent(location, cb) {
                System.import("../modules/landing-page/LandingPage.module")
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }
        }

    ]
};

Thanks for any help!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions#Description — pawel, Jan 19 '17 at 12:28
Possible duplicate of [Javascript syntax [\]() and ()()](http://stackoverflow.com/q/41399719/218196) — Felix Kling, Jan 19 '17 at 15:13

score 2 · Accepted Answer · answered Jan 19 '17 at 11:07

2

It's a shorthand notation for methods. The key is the name of the function. So [ActionTypes.ADD_TODO](state, action) { is equivalent to [ActionTypes.ADD_TODO]: function(state, action) {

answered Jan 19 '17 at 11:07

a better oliver

26,330
2
58
66

score 2 · Answer 2 · answered Jan 19 '17 at 11:17

These are valid object initializer syntaxes. The second example is simple case of MethodDefinition (link to spec)

The case [ActionTypes.ADD_TODO](state, action) is also a MethodDefinition, but method/property name is defined as a ComputedPropertyName which has the syntax [ AssignmentExpression[In, ?Yield] ]. In case of ComputedPropertyNames it's possible to put a variable/object property between square brackets and the value will be used as property name in the newly created object.

How a javascript object can have only property without predefined key

2 Answers2