ES6, ES2015 : Object literals

Again, ES6 brings us more syntax sugar, that you might appreciate when creating new object.

#Shorter property name

When you create an object, you might create a variable and then reuse it to define a property of an object that have the same name.

var firstname = "Robert";
var lastname = "Laiponje";

return {
  firstname: firstname,
  lastname: lastname
};

Thanks to ES6, you can directly write:

const firstname = "Robert";
const lastname = "Laiponje";

return {
  firstname,
  lastname
};
// { firstname: "Robert", lastname: "Laiponje" }

In the same spirit, you will be able to declare methods without the function keyword (this also apply for getter and setter).

const obj = {
  get email() {
    return this.email();
  },
  set email(email) {
    this.email = email;
  },
  validateEmail(email) {
    return true;
  }
};

#Dynamic property name

One last thing for objects literal will allow you to create dynamic property name using an expression, directly when you create an object. With ES5 you have to do that in two steps:

function action(type, data) {
  var payload = {};
  payload[type] = data;
  return payload;
}

Now with ES6, you can do:

function action(type, data) {
  return {
    [type]: data
  };
}

Note: with dynamic properties, declaring multiples properties with the same name is accepted and do not throw an error. Keep in mind that only the last value will be kept.

Written by lionelB

Développeur front-end indépendant et un peu bricoleur, les mains blanches, dans le plâtre dès la maternelle, les mains noires, dans le cambouis du vélo très vite après, les mains propres depuis, dans le code informatique… Et quand il code pas, il rêve à son prochain voyage en vélo.

Be the first to contribute to this page