Comprendre la déstructuration, les paramètres de rest et la syntaxe Spread en JavaScript

La déstructuration d’objets vous permet de créer de nouvelles variables en utilisant une propriété de l’objet comme valeur.

Prenons cet exemple, un objet qui représente une note avec une id, un titre et une date :

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Traditionnellement, si vous vouliez créer une nouvelle variable pour chaque propriété, vous deviez affecter chaque variable individuellement, avec beaucoup de répétition :

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

Avec la déstructuration des objets, tout cela peut être fait en une seule ligne. En entourant chaque variable d’accolades {}, JavaScript créera de nouvelles variables à partir de chaque propriété portant le même nom :

// Destructure properties into variables
const { id, title, date } = note

Maintenant, console.log() les nouvelles variables :

console.log(id)
console.log(title)
console.log(date)

Vous obtiendrez les valeurs initiales des valeurs des propriétés comme résultat :

Output
1
My first note
01/01/1970

L’affectation par défaut pour la déstructuration des objets crée de nouvelles variables portant le même nom que la propriété de l’objet. Si vous ne souhaitez pas que la nouvelle variable ait le même nom que le nom de la propriété, vous avez également la possibilité de renommer la nouvelle variable en utilisant deux-points ( : ) pour décider d’un nouveau nom, comme on le verra avec la noteId dans ce qui suit :

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

Enregistrez la nouvelle variable noteId dans la console :

console.log(noteId)

Vous recevrez le résultat suivant :

Output
1

Vous pouvez également déstructurer les valeurs d’objets imbriqués. Par exemple, mettez à jour l’objet note pour avoir un objet auteur imbriqué :

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

Vous pouvez maintenant déstructurer note, puis déstructurer à nouveau pour créer des variables à partir des propriétés de l'auteur :

// Destructure nested properties
const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

Ensuite, enregistrez les nouvelles variables firstName et lastName en utilisant les littéraux du modèle :

console.log(`${firstName} ${lastName}`)

Cela donnera le résultat suivant :

Output
Sherlock Holmes

Notez que dans cet exemple, bien que vous ayez accès au contenu de l’objet auteur, l’objet auteur lui-même n’est pas accessible. Pour accéder à un objet ainsi qu’à ses valeurs imbriquées, il faudrait les déclarer séparément :

// Access object and nested values
const {
  author,
  author: { firstName, lastName },
} = note

console.log(author)

Ce code produira l’objet author:

Output
{firstName: "Sherlock", lastName: "Holmes"}

La déstructuration d’un objet n’est pas seulement utile pour réduire la quantité de code que vous devez écrire ; elle vous permet également de cibler votre accès aux propriétés qui vous intéressent.

Enfin, déstructurer peut être utilisé pour accéder aux propriétés des objets des valeurs primitives. Par exemple, String est un objet global pour les chaînes de caractères, et possède une propriété de longueur :

const { length } = 'A string'

Cela permettra de trouver la propriété de longueur inhérente d’une chaîne et de la rendre égale à la variable de longueur. Enregistrez la longueur pour voir si cela a fonctionné :

console.log(length)

Vous aurez le résultat suivant :

Output
8

La chaîne A string a été implicitement convertie en un objet ici pour récupérer la propriété de longueur.

La déstructuration des tableaux vous permet de créer de nouvelles variables en utilisant un élément de tableau comme valeur. Prenons cet exemple, un tableau avec les différentes parties d’une date :

const date = ['1970', '12', '01']

Les tableaux en JavaScript sont garantis pour préserver leur ordre, donc dans ce cas le premier indice sera toujours une année, le second sera le mois, et ainsi de suite. Sachant cela, vous pouvez créer des variables à partir des éléments du tableau :

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

Mais le faire manuellement peut prendre beaucoup de place dans votre code. Avec la déstructuration des tableaux, vous pouvez décomposer les valeurs du tableau dans l’ordre et les affecter à leurs propres variables, comme ceci :

// Destructure Array values into variables
const [year, month, day] = date

Enregistrez maintenant les nouvelles variables :

console.log(year)
console.log(month)
console.log(day)

Vous aurez le résultat suivant :

Output
1970
12
01

Les valeurs peuvent être sautées en laissant la syntaxe de déstructuration vide entre les virgules :

// Skip the second item in the array
const [year, , day] = date

console.log(year)
console.log(day)

L’exécution de cette opération donnera la valeur de l'année et du jour :

Output
1970
01

Les tableaux imbriqués peuvent également être déstructurés. Tout d’abord, créez un tableau imbriqué :

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

Ensuite, déstructurez ce tableau et enregistrez les nouvelles variables :

// Destructure nested items
const [one, two, [three, four], five] = nestedArray

console.log(one, two, three, four, five)

Vous recevrez le résultat suivant :

Output
1 2 3 4 5

La syntaxe de déstructuration peut être appliquée pour déstructurer les paramètres d’une fonction. Pour tester cela, vous déstructurez les clés et les valeurs à partir de Object.entries().

Déclarez d’abord l’objet de la note :

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Étant donné cet objet, vous pourriez dresser la liste des paires clé-valeur en déstructurant les arguments au fur et à mesure qu’ils sont passés à la méthode forEach() :

// Using forEach
Object.entries(note).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

Ou vous pourriez faire la même chose en utilisant une boucle for :

// Using a for loop
for (let [key, value] of Object.entries(note)) {
  console.log(`${key}: ${value}`)
}

Dans tous les cas, vous recevrez ce qui suit :

Output
id: 1
title: My first note
date: 01/01/1970

La déstructuration d’objets et la déstructuration de tableaux peuvent être combinées en une seule affectation de déstructuration. Les paramètres par défaut peuvent également être utilisés avec la déstructuration, comme le montre cet exemple qui fixe la date par défaut à new Date().

Déclarez d’abord l’objet de la note :

const note = {
  title: 'My first note',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
  tags: ['personal', 'writing', 'investigations'],
}

Puis déstructurez l’objet, tout en définissant une nouvelle variable de date avec la valeur par défaut de new Date() :

const {
  title,
  date = new Date(),
  author: { firstName },
  tags: [personalTag, writingTag],
} = note

console.log(date)

console.log(date) donnera alors un résultat similaire à ce qui suit :

Output
Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

Comme le montre cette section, la syntaxe de l’affectation de déstructuration ajoute beaucoup de souplesse à JavaScript et permet d’écrire un code plus succinct. Dans la section suivante, vous verrez comment la syntaxe de spread peut être utilisée pour étendre les structures de données dans leurs entrées de données constitutives.

Spread peut simplifier les tâches courantes avec les tableaux. Par exemple, disons que vous avez deux tableaux et que vous voulez les combiner :

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

A l’origine, vous deviez utiliser concat() pour concaténer les deux tableaux :

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

Désormais, vous pouvez également utiliser spread pour déballer les tableaux dans un nouveau tableau :

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]

console.log(allTools)

L’exécution de cette opération donnerait les résultats suivants :

Output
["hammer", "screwdriver", "wrench", "saw"]

Cela peut être particulièrement utile en cas d’immuabilité. Par exemple, vous pourriez travailler avec une application dont les utilisateurs sont stockés dans un ensemble d’objets :

// Array of users
const users = [
  { id: 1, name: 'Ben' },
  { id: 2, name: 'Leslie' },
]

Vous pourriez utiliserpush pour modifier le tableau existant et ajouter un nouvel utilisateur, ce qui serait l’option mutable :

// A new user to be added
const newUser = { id: 3, name: 'Ron' }

users.push(newUser)

Mais cela change le tableau user, que nous pourrions vouloir conserver.

Spread vous permet de créer un nouveau tableau à partir de celui qui existe déjà et d’ajouter un nouvel élément à la fin :

const updatedUsers = [...users, newUser]

console.log(users)
console.log(updatedUsers)

Maintenant, le nouveau tableau, updatedUsers, a le nouvel utilisateur, mais le tableau original users reste inchangé :

Output
[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}]

[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}
 {id: 3, name: "Ron"}]

Créer des copies de données au lieu de modifier les données existantes peut aider à prévenir les changements inattendus. En JavaScript, lorsque vous créez un objet ou un tableau et que vous l’affectez à une autre variable, vous ne créez pas réellement un nouvel objet - vous passez une référence.

Prenez cet exemple, dans lequel un tableau est créé et assigné à une autre variable :

// Create an Array
const originalArray = ['one', 'two', 'three']

// Assign Array to another variable
const secondArray = originalArray

Supprimer le dernier élément du deuxième tableau modifiera le premier :

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Cela donnera le résultat :

Output
["one", "two"]

Spread vous permet de faire une copie superficielle d’un tableau ou d’un objet, ce qui signifie que toutes les propriétés de haut niveau seront clonées, mais que les objets imbriqués seront toujours passés par référence. Pour les tableaux ou objets simples, une copie superficielle peut suffire.

Si vous écrivez le même exemple de code mais copiez le tableau avec spread, le tableau original ne sera plus modifié :

// Create an Array
const originalArray = ['one', 'two', 'three']

// Use spread to make a shallow copy
const secondArray = [...originalArray]

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Les éléments suivants seront enregistrés sur la console :

Output
["one", "two", "three"]

Spread peut également être utilisé pour convertir un set, ou tout autre iterable, en un tableau.

Créez un nouvel ensemble et ajoutez-y quelques entrées :

// Create a set
const set = new Set()

set.add('octopus')
set.add('starfish')
set.add('whale')

Ensuite, utilisez l’opérateur spread avec set et enregistrez les résultats :

// Convert Set to Array
const seaCreatures = [...set]

console.log(seaCreatures)

Cela donnera le résultat :

Output
["octopus", "starfish", "whale"]

Cela peut également être utile pour créer un tableau à partir d’une chaîne de caractères :

const string = 'hello'

const stringArray = [...string]

console.log(stringArray)

Cela donnera un tableau avec chaque caractère en tant qu’élément dans le tableau :

Output
["h", "e", "l", "l", "o"]

Lorsqu’on travaille avec des objets, spread peut être utilisé pour copier et mettre à jour les objets.

A l’origine, Object.assign() était utilisé pour copier un objet :

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

Le secondObject sera désormais un clone de l’originalObject.

La syntaxe de spread simplifie cette opération (vous pouvez copier un objet superficiellement en l’étalant dans un nouvel objet) :

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject)

Ce qui donnera le résultat suivant :

Output
{enabled: true, darkMode: false}

Tout comme pour les tableaux, cela ne créera qu’une copie superficielle, et les objets imbriqués seront toujours passés par référence.

L’ajout ou la modification de propriétés sur un objet existant de manière immuable est simplifié avec spread. Dans cet exemple, la propriété isLoggedIn est ajoutée à l’objet user:

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

Il en résultera ce qui suit :

Output
{id: 3, name: "Ron", isLoggedIn: true}

Une chose importante à noter concernant la mise à jour des objets spread est que tout objet imbriqué devra également être diffusé. Par exemple, disons que dans l’objet user, il y a un objet organisationnel imbriqué :

const user = {
  id: 3,
  name: 'Ron',
  organization: {
    name: 'Parks & Recreation',
    city: 'Pawnee',
  },
}

Si vous essayez d’ajouter un nouvel élément à l’organisation, il écrasera les champs existants :

const updatedUser = { ...user, organization: { position: 'Director' } }

console.log(updatedUser)

Ce qui donnera le résultat suivant :

Output
id: 3
name: "Ron"
organization: {position: "Director"}

Si la mutabilité n’est pas un problème, le champ pourrait être mis à jour directement :

user.organization.position = 'Director'

Mais comme nous recherchons une solution immuable, nous pouvons diffuser l’objet intérieur pour conserver les propriétés existantes :

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

console.log(updatedUser)

Cela donnera le résultat :

Output
id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

Spread peut également être utilisé avec les arguments dans les appels de fonction.

Par exemple, voici une fonction multiply qui prend trois paramètres et les multiplie.

// Create a function to multiply three items
function multiply(a, b, c) {
  return a * b * c
}

Normalement, vous feriez passer trois valeurs individuellement comme arguments à l’appel de fonction, comme ceci :

multiply(1, 2, 3)

Cela donnerait ce qui suit :

Output
6

Cependant, si toutes les valeurs que vous voulez passer à la fonction existent déjà dans un tableau, la syntaxe de spread vous permet d’utiliser chaque élément d’un tableau comme argument :

const numbers = [1, 2, 3]

multiply(...numbers)

Cela donnera le même résultat :

Output
6

multiply.apply(null, [1, 2, 3])

Output
6

Maintenant que vous avez vu comment spread peut raccourcir votre code, vous pouvez vous pencher sur une utilisation différente de la syntaxe ... : les paramètres de rest.