Copie superficielle

Une copie superficielle d'un objet est une copie dont les propriétés partagent les mêmes références (pointent vers les mêmes valeurs sous-jacentes) que celles de l'objet source à partir duquel la copie a été réalisée. Ainsi, lorsque vous modifiez l'objet source ou la copie, vous pouvez également provoquer une modification de l'autre objet. Ce comportement contraste avec celui d'une copie profonde, où la source et la copie sont totalement indépendantes.

Plus formellement, deux objets o1 et o2 sont des copies superficielles si :

1. Ce ne sont pas le même objet (o1 !== o2).
2. Les propriétés de o1 et o2 ont les mêmes noms dans le même ordre.
3. Les valeurs de leurs propriétés sont égales.
4. Leurs chaînes de prototypes sont égales.

Voir aussi la définition de équivalence structurelle.

La copie d'un objet dont toutes les propriétés ont des valeurs primitives correspond à la définition d'une copie profonde et d'une copie superficielle. Il est peu pertinent de parler de profondeur pour ce type de copie, car il n'a pas de propriétés imbriquées et on évoque généralement la copie profonde dans le contexte de la modification de propriétés imbriquées.

Pour une copie superficielle, seules les propriétés de premier niveau sont copiées, pas les valeurs des objets imbriqués. Ainsi :

• Réaffecter les propriétés de premier niveau de la copie n'affecte pas l'objet source.
• Réaffecter les propriétés des objets imbriqués de la copie affecte l'objet source.

En JavaScript, toutes les opérations standards de copie d'objet (syntaxe de propagation, Array.prototype.concat(), Array.prototype.slice(), Array.from(), et Object.assign()) créent des copies superficielles plutôt que des copies profondes.

Considérez l'exemple suivant, où un tableau ingredientsList est créé, puis un objet ingredientsListCopy est créé en copiant ce tableau ingredientsList.

const ingredientsList = ["nouilles", { list: ["œufs", "farine", "eau"] }];

const ingredientsListCopy = Array.from(ingredientsList);
console.log(ingredientsListCopy);
// ["nouilles",{"list":["œufs","farine","eau"]}]

La réaffectation de la valeur d'une propriété imbriquée sera visible dans les deux objets.

ingredientsListCopy[1].list = ["farine de riz", "eau"];
console.log(ingredientsList[1].list);
// Tableau [ "farine de riz", "eau" ]

La réaffectation de la valeur d'une propriété de premier niveau (l'index 0 dans ce cas) ne sera visible que dans l'objet modifié.

ingredientsListCopy[0] = "nouilles de riz";
console.log(ingredientsList[0]); // nouilles
console.log(JSON.stringify(ingredientsListCopy));
// ["nouilles de riz",{"list":["farine de riz","eau"]}]
console.log(JSON.stringify(ingredientsList));
// ["nouilles",{"list":["farine de riz","eau"]}]