L'opérateur Spread Partie 1

Fait partie de la section Logique & Flux du Journey JavaScript de Coddy — leçon 18 sur 65.

L'opérateur de décomposition (...) a de nombreux cas d'utilisation pour le JSON. Par exemple, lors de l'opération suivante :

const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456
console.log(obj2.key1)

Quel serait le résultat ?

console.log(obj2.key1)
// Résultat : "456"

Cela pourrait être surprenant ! Même si nous n'avons modifié que obj1, obj2 a également changé.

Cela se produit car lorsque nous assignons des objets directement (obj2 = obj1), nous créons une référence, pas une copie. Les deux variables pointent vers le même objet en mémoire.

C'est ici que l'opérateur spread devient utile. Voyons comment créer une véritable copie :

const obj1 = {key1: "123"};
const obj2 = {...obj1};
obj1.key1 = "456";
console.log(obj2.key1);
// Sortie: "123"

L'opérateur de décomposition (spread operator) crée un nouvel objet et copie toutes les propriétés énumérables de l'objet source dans le nouveau.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Aide-mémoire

L'opérateur de décomposition (...) crée une copie d'un objet au lieu d'une référence :

// Référence (les deux variables pointent vers le même objet)
const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456"
console.log(obj2.key1) // Sortie : "456"

// Copie utilisant l'opérateur de décomposition
const obj1 = {key1: "123"}
const obj2 = {...obj1}
obj1.key1 = "456"
console.log(obj2.key1) // Sortie : "123"

L'opérateur de décomposition copie toutes les propriétés énumérables de l'objet source dans un nouvel objet.

Essayez vous-même

Cette leçon ne comprend pas de défi de code.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.