Javascript: Les opérateurs ...spread et ...REST 
Tags: javascript, beginners, tutorial
Published: 2021-06-24 14:04:04

---
title: Javascript: Les opérateurs ...spread et ...REST 
published: true
description: Définition et exemple de l'opérateur Spread et Rest
tags: javascript, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik1c8mr2sz8zi3g466dq.jpg
---
Si vous désirez plus de contenu francophone comme celui-ci, cliquer <strong>Follow<string> ou <a href="https://twitter.com/EricLeCodeur" class="twitter-follow-button">suivez-moi sur Twitter</a>
<hr>
<h2>Définition</h2>
Opérateur *Spread* : Permet de déconstruire les itérables (tableaux/objets/chaînes) en éléments uniques.

Opérateur *Rest*: Rassemble tous les éléments restants dans un tableau.

<h2>Exemples Spread Operator</h2>
```js
const names = ['Mike', 'Paul', 'John']

// Utiliser le spread operator pour déconstruire un tableau
console.log(names) // ['Mike', 'Paul', 'John']
console.log(...names) // Mike Paul John

// Utiliser le spread operator pour modifier/ajouter à un tableau
const newNames = ['Jack', ...names, 'David']
// ['Jack', 'Mike', 'Paul', 'John', 'David']

// Utiliser le spread operator pour copier un tableau
const copyNames = [...names]

// Utiliser le spread operator pour joindre 2 tableaux
const numbers1 = [1, 2, 3]
const numbers2 = [4, 5, 6]
const allNumbers = [...numbers1, ...numbers2]

// Utiliser le spread operator pour les strings également
const name = 'Mike'
const letters = [...name] // ['M', 'i', 'k', 'e']

// Utiliser le spread operator comme paramêtres d'une fonction
numbers = [1, 2, 3]
const sumNumbers = function(num1, num2, num3) {
  return num1 + num2 + num3 + num4
}
// sans spread operator
sumNumbers(numbers[0], numbers[1], numbers[2])
// avec spread operator
sumNumbers(...numbers)

// Utiliser le spread operator pour déconstruire les objects
const person = {
  firstName: 'Mike',
  lastName: 'Taylor'
}
// Utiliser le spread operator pour copier les valeurs d'un object
const newPerson = {...person}

// // Utiliser le spread operator pour étendre un object
const customer = {...person, creditLimit: 1000)
```

<h2>Exemples REST operator</h2>
Le REST operator fonctionne selon le même principe que le spread operator mais du côté gauche du '=' 

Le REST operator permet de déconstuire l'assignation

Le REST operator doit être utiliser comme dernière assignation

Toutes les valeurs non assigné (avant l'ajout du REST) seront envoyé dans le REST 
```js
const [num1, num2, ...others] = [1, 2, 3, 4, 5]
console.log(num1, num2, others) // 1, 2, [3, 4, 5]

// Même principe avec les objects
const person = {
  firstName: 'Mike',
  lastName: 'Taylor',
  age = 25
}

const { age, ...personName } = person
// personName va assigner le "rest" des properties non utilisées
console.log(age, personName) // 25, { firstName: 'Mike', lastName: 'Taylor' }

// Utiliser le REST operator pour capter tous les paramètres
const sumNumbers(...numbers) {
  console.log(numbers);
}

// Le REST operator va rassembler tous les paramètre dans un tableau
sumNumbers(1, 2) // [1, 2]
sumNumbers(1, 2, 3) // [1, 2, 3]
sumNumbers(1, 2, 3, 4) // [1, 2, 3, 4]

// Utiliser le REST operator pour capter tous les autres paramètres:
const displayText(mainText, option1, option2, option3) {
  console.log(mainText, option1, option2, option3)
}

// Exemple, tous les autres paramètres après mainText se retrouverons dans options
const displayText(mainText, ...options) {
  console.log(mainText, options)
}
```