Découvrez l’opérateur spread en JavaScript

Lors de la sortie de JavaScript ES6, de nouvelles fonctionnalités ont été introduites. Parmi elles, l’une des plus connues est l’opérateur de décomposition (alias « spread operator »).

Vous pouvez reconnaître cet opérateur lorsque vous voyez trois points à la suite dans votre code « ...« .

Cet opérateur de décomposition va vous permettre d’extraire des éléments d’un objet itérable en JavaScript.

Cas d’utilisation de l’opérateur spread en JavaScript

J’ai regroupé ci-dessous les cinq cas d’utilisation les plus communs avec l’opérateur de décomposition en JavaScript.

Ces exemples vont simplifier votre code et vous aider à comprendre pourquoi vous devez utiliser l’opérateur spread.

Créer un nouveau tableau / Copier un tableau

const girlNames = ['Jessica', 'Emma', 'Amandine']

// L'opérateur de diffusion prend :
// - "Jessica"
// - "Emma"
// - "Amandine"
// et les extrait vers un nouveau tableau
const newGirlNames = [...girlNames]

console.log(newGirlNames)
// Sortie : ["Jessica", "Emma", "Amandine"]

Dans l’exemple ci-dessus, nous avons un tableau girlNames et nous voulons copier les éléments de celui-ci dans un nouveau tableau en utilisant l’opérateur spread.

L’opérateur de diffusion va itérer sur l’ensemble des valeurs du tableau (« Jessica », « Emma », « Amandine ») et va les extraire à l’intérieur du nouveau tableau newGirlNames.

Créer un nouvel objet

const user = {
  firstName: 'John',
  lastName: 'D',
  age: 25,
}

// L'opérateur de diffusion prend
// les propriétés de l'objet :
// - firstName
// - lastName
// - age
// et va les extraire dans un nouvel objet.
// Ensuite, nous allons remplacer la variable `firstName`
// de l'objet précédent.
// "John" devient "Jane"
const newUser = { ...user, firstName: 'Jane' }

console.log(newUser)
// Sortie : {
//  firstName: "Jane",
//  lastName: "D",
//  age: 25,
//};

Cet exemple suit la logique de la section précédente.

Nous avons un objet user et nous créons un nouvel objet à partir de celui-ci en utilisant l’opérateur de diffusion (spread operator).

L’opérateur de diffusion va parcourir les propriétés de l’objet (firstName, lastName et age) pour les extraire dans un nouvel objet newUser.

Dans cet exemple, j’ai ajouté la propriété firstName: "Jane" à l’objet newUser pour vous montrer que vous pouvez créer un nouvel objet et ajouter des propriétés à celui-ci.

Cependant, les propriétés des objets doivent avoir des noms uniques, de ce fait la variable firstName du premier objet a été remplacé par celle du second objet (« John » devient « Jane »).

Fusionner des objets

const user = {
  firstName: 'John',
  lastName: 'D',
  age: 25,
}

const userJob = {
  jobName: 'Développeur',
}

const completeUser = { ...user, ...userJob }

console.log(completeUser)
// Sortie : {
//  firstName: "John",
//  lastName: "D",
//  age: 25,
//  jobName: "Développeur"
//};

Grâce à l’opérateur de décomposition (spread operator), fusionner des objets est plus simple.

Vous pouvez fusionner des objets à l’infini. Je vous laisse essayer par vous-même !

Créez un nouvel objet userFamily avec une propriété wifeName et fusionner le avec completeUser.

Note : Soyez prudent en utilisant des propriétés avec le même nom en JavaScript. Si vous fusionnez deux objets avec une propriété qui a le même nom, seulement la dernière valeur être préservée.

Fusionner des tableaux

const girlNames = ['Jessica', 'Emma', 'Amandine']
const boyNames = ['John', 'Terry', 'Alexandre']

const namesWithSpreadSyntax = [...girlNames, ...boyNames]

console.log(namesWithSpreadSyntax)
// Sortie : ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']

Maintenant que vous savez fusionner des objets, vous pouvez fusionner des tableaux en JavaScript.

Convertir une chaîne de caractère en tableau

Tel qu’expliqué au début de ce tutoriel, vous pouvez extraire des éléments de tous les objets itérables en JavaScript.

Dans ce dernier cas d’utilisation, vous allez décomposer une chaîne de caractère en un tableau.

const helloWorld = 'Hello world!'

const helloArray = [...helloWorld]

console.log(helloArray)
// Sortie : ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

En utilisant l’opérateur de diffusion, vous parcourez l’ensemble des caractères de helloWord et les diffusez dans un tableau.

Le résultat final est un tableau avec pour éléments les caractères de la chaîne.