Les raccourcis de propriétés (property shorthand) en JavaScript

La property shorthand que l'on peut traduire par raccourci de propriété est une syntaxe en JavaScript qui permet de créer et d'initialiser des propriétés d'objet de manière plus concise. Elle existe depuis ES6, c'est-à-dire ECMAScript 2015 avec un très bon support donc il n'y a aucune raison de s'en passer.

Au lieu d'avoir à écrire le nom (la clé) de la propriété, suivi de la valeur, on peut utiliser la property shorthand pour définir la propriété en utilisant uniquement son nom (sa clé).

Construction d'objet

Par exemple, si on dispose d'une variable kiwi contenant une chaîne de caractères :

const kiwi = "miam"

...on peut utiliser un raccourci pour créer une propriété kiwi (du même nom donc) dans un objet JavaScript, en écrivant simplement { nomDelaVariable }, au lieu de {nomDelaVariable: nomDelaVariable}.

const dessert = {
  kiwi
}

// ou

const dessert = { kiwi }

Ce qui correspondra à la valeur réelle :

{
  kiwi: "miam"
}

Ainsi on peut constituer des propriétés sans avoir à répéter inutilement du code.

const prenom = "Joan"
const nom = "Clarke"
const age = 42

const personne = {
  nom,
  prenom,
  age
}

Bien sûr en situation réelle ces différentes variables vont souvent provenir d'autres portions du code, plutôt que d'être déclarées immédiatement avant, ce qui n'a pas grand intérêt. D'ailleurs on cela peut cohabiter avec la déstructuration qui consiste (en résumé) à extraire les propriétés d'un objet grâce à leur nom.

Si par un concours de nommage l'une des propriétés ne peut bénéficier de ce raccourci, il est bien sûr possible de procéder autrement et de mélanger les syntaxes.

const nomDeFamille = "Clarke"

const personne = {
  nom: nomDeFamille,
  prenom,
  age: 42
}

Les méthodes d'un objet sont aussi concernées par une écriture plus concise grâce à ES2015.

const personne = {
  parler() {}
}

// Plutôt que...

const personne = {
  parler: function() {}
}

Toute cette syntaxe est vérifiée par la règle object-shorthand d'ESLint.