Javascript: Les opérateurs ...spread et ...REST

Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter

Définition

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.

Exemples Spread Operator

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)

Exemples REST operator

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

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)
}