Braces as an ES6 function declaration statement?

Question

Found this in a tutorial I was going over. It's ES6.

I'm just not sure whats exactly going on. Namely , the way the function(?) is being declared with the array. Where is the colon that declares it as a function?

[types.ADD_TO_CART] (state, { id })

Also what's up with the brackets in the parameter declaration?

(state, { id })

Here's the tutorial.

https://medium.com/@connorleech/build-a-shopping-cart-with-vue-2-and-vuex-5d58b93c513f

[types.ADD_TO_CART] (state, { id }) {
  const record = state.added.find(p => p.id === id)
  if (!record) {
    state.added.push({
      id,
      quantity: 1
    })
  } else {
    record.quantity++
  }
}

think of it like `with(obj)`, but without the crap and on a short-listed dynamic object. — dandavis, Jan 26 '18 at 23:50

nem035 · Accepted Answer · 2018-01-27T02:06:12.270

You must define a method on a class without using ::

class Example {
  method() {
    console.log('here')
  }
}

new Example().method()

With ES6 computed property names, you can make the name of that method be dynamic:

const name = 'method'
class Example {
  [name]() {
    console.log('here');
  }
}

new Example()[name]()

As far as the ({ id }) part, the id represents an extracted property from the arguments of that dynamic method using destructuring:

// this
[types.ADD_TO_CART](state, obj) => {
   let id = obj.id;
}

// can be abbreviated to this
[types.ADD_TO_CART](state, { id }) => {

}

For example:

const name = 'method'
class Example {
  [name]({
    id
  }) {
    console.log(id);
  }
}

new Example()[name]({
  id: 'example'
})

Further resources: this one and this one and this one

1

s/can define/must define/ :-) – Bergi Jan 27 '18 at 01:18

score 1 · Answer 2 · answered Jan 26 '18 at 22:28

With ES2015, you can get two new features for object literals:

// Computed object properties

const foo = 'bar'
const myObj = {
    [foo]: 'hello world'
}

// Shorthand method definitions:

const mySecondObj = {
    myMethod () {
        // code...
    }
}

The code in the example seems to combine both.

Also, ES2015 gives you object destructuring, which is used for the parameter – thus the curly brackets.

Check MDN for more details on the new syntax features.

Braces as an ES6 function declaration statement?

2 Answers2