8

What kind of ES6 syntax is this?

{
  [ActionTypes.Repo](state, { username, res }) {
    /* ... */
  },

  [ActionTypes.Repo2](state, { username, res }) {
    /* ... */
}

Taken from : https://github.com/quangbuule/redux-example/blob/master/src/js/reducers/Repo.js

1 Answer 1

24

Those are method definitions, computed property names and destructuring at work.

Method definitions provide a concise way to create properties that contain functions:

// before
var obj = {
  foo: function() {}
};

// now
var obj = {
   foo() {}
};

That's the same syntax for creating methods in class definitions.

Computed properties allow you to use the result of any expression as property name in an object literal:

var foo='somePropertyName';

// before
var obj = {};
obj[foo] = 42;

// now

var obj = {
  [foo]: 42
};

And of course this also works with method definitions:

var obj = {
  [foo]() {}
};

Destructuring is like pattern matching and makes it easier to refer to nested properties of an array/object if thats all you need:

// before
function foo(obj) {
  var username = obj.username;
  var res = obj.res;
}

// now
function foo({username, res}) {

}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.