Valeur vs référence : Comprendre les différences dans la copie de valeurs primitives et d'objets en JavaScript

Jan 24 2023
JavaScript est un langage de programmation populaire utilisé pour créer des sites Web interactifs et des applications Web. L'un des concepts clés à comprendre lorsque vous travaillez avec JavaScript est la différence entre les valeurs primitives et les objets.

JavaScript est un langage de programmation populaire utilisé pour créer des sites Web interactifs et des applications Web. L'un des concepts clés à comprendre lorsque vous travaillez avec JavaScript est la différence entre les valeurs primitives et les objets.

Les valeurs primitives, telles que les nombres , les chaînes et les booléens , sont stockées directement dans une variable. Lorsqu'une valeur primitive est affectée à une nouvelle variable, JavaScript crée une nouvelle copie de la valeur et l'affecte à la nouvelle variable. Par exemple:

let x = 5;
let y = x;
x = 10;
console.log(y); // Output: 5

Les objets , en revanche, sont stockés en tant que références. Cela signifie qu'une variable contient une référence à l'emplacement mémoire de l'objet, plutôt qu'à l'objet lui-même. Lorsqu'un objet est affecté à une nouvelle variable, la nouvelle variable contient une référence au même objet en mémoire. Par exemple:

const obj = { a: 1, b: 2 };
const ref = obj;
obj.a = 10;
console.log(ref.a); // Output: 10

Il est important de garder à l'esprit que lorsque vous travaillez avec des objets en JavaScript, il est généralement recommandé de créer une nouvelle copie de l'objet si vous devez y apporter des modifications, plutôt que de modifier l'objet d'origine. Une façon de créer une nouvelle copie d'un objet consiste à utiliser l' opérateur de propagation ... . Voici un exemple :

const a = [1, 2, 3];
const b = [...a];
const c = a;
a.push(4);
console.log(b); // Output: [1, 2, 3]
console.log(c); // Output: [1, 2, 3, 4]

En revanche, la variable cse voit attribuer une référence au même tableau que a, donc lorsque nous modifions ultérieurement le tableau d'origine a, les modifications sont également reflétées dans ccar elles pointent vers le même tableau.

Il est important de comprendre la différence entre les valeurs primitives et les objets en JavaScript afin d'écrire un code efficace et maintenable. L'opérateur de propagation est un outil utile pour créer de nouvelles copies d'objets et éviter les comportements inattendus causés par les références.

Outre l'opérateur de propagation, voici quelques autres techniques de copie qui peuvent être utilisées pour créer de nouvelles copies d'objets en JavaScript :

  • Object.assign(): Cette méthode crée un nouvel objet et lui affecte les propriétés d'un ou plusieurs objets source. Il peut être utilisé pour créer une copie superficielle d'un objet.
  • JSON.parse(JSON.stringify(obj)): Cette méthode crée un nouvel objet en convertissant l'objet d'origine en une chaîne JSON, puis en analysant cette chaîne en un objet. Il peut être utilisé pour créer une copie complète d'un objet.
  • Array.slice(): Cette méthode crée un nouveau tableau qui est une copie superficielle d'une partie d'un tableau existant.
  • Array.filter(), Array.map(), Array.reduce(): ces méthodes peuvent également être utilisées pour créer de nouveaux tableaux avec les éléments filtrés, mappés ou réduits

J'espère que vous comprenez mieux la différence entre copier des valeurs et copier des références après avoir lu cet article. N'hésitez pas à me contacter pour toute question ou commentaire que vous pourriez avoir. Je suis toujours heureux d'avoir des nouvelles de mes lecteurs et d'aider de toutes les manières possibles. Bon codage :)