ES6, ES2015 : Les object literals

Là encore, cette évolution du langage amène un sucre syntaxique bien pratique lors de l'initialisation d'objets.

#Nom des propriétés raccourcies

Lorsqu'on crée un objet, il arrive fréquemment que lorsqu'on définisse une propriété depuis une variable, la clé porte le même nom que la variable.

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

return {
  firstname: firstname,
  lastname: lastname,
}

Avec ES2015, on va pouvoir l'écrire comme ça :

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

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

De la même manière, on pourra déclarer des méthodes en se passant du mot clé function. Idem pour les getter / setter.

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

#Nom de propriétés calculées

La dernière nouveauté concernant les literal objects va nous permettre de créer des noms de propriétés depuis une expression, directement à la création de l'objet. Auparavant, il fallait procéder en 2 temps, création puis affectation.

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

En ES2015, cela donnerait :

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

À noter qu'avec l'introduction des propriétés calculées, on va pouvoir aussi déclarer plusieurs fois une même propriété, la dernière déclaration écrasant les précédentes (et plus de syntaxError).

Écrit par 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.

5 contributeurs sur cette page