Propriétés, Méthodes et Copie Shallow/Deep des Objets en JavaScript

En JavaScript, les objets sont des structures de données essentielles qui stockent des paires clé-valeur. Les propriétés représentent les clés, qui peuvent être liées à des valeurs de types primitifs (comme des nombres ou des chaînes) ou à des types cmoplexes (tels que d'autres objets ou fonctions, ces dernières étant appelées méthodes).

Par exemple, considérons un objet décrivant un véhicule :

let vehicule = {
  marque: "Toyota",
  annee: 2020,
  demarrer: function() {
    console.log("Véhicule démarré : " + this.marque);
  }
};

// Accès à une propriété
console.log(vehicule.marque); // Sortie: Toyota
// Invocation d'une méthode
vehicule.demarrer(); // Sortie: Véhicule démarré : Toyota

Dans cet exemple, marque et annee sont des propriétés de l'objet vehicule, tandis que demarrer est une méthode définissant un comportement spécifique.

Étant donné que les objets en JavaScript sont des types de référence, l'affectation directe d'un objet à une variable copie uniquement la référence en mémoire, pas l'objet lui-même. Cela signifie que des modifications sur l'une des variables affecteront l'autre. Pour éviter cela, on utilise des copies shallow (superficielles) ou deep (profondes).

Une copie shallow crée un nouvel objet où les propriétés de types primitifs sont dupliquées par valeur, mais les objets imbriqués restent des références partagées. Voici deux méthodes courantes pour réaliser une copie shallow :

let source = { nom: "Alice", coordonnees: { latitude: 48.8566 } };

// Utilisation de Object.assign()
let copieShallow1 = Object.assign({}, source);

// Utilisation de l'opérateur spread
let copieShallow2 = { ...source };

Dans ces copies, l'objet imbriqué coordonnees est partagé entre source et les copies. Ainsi, modifier copieShallow1.coordonnees.latitude impacte également source.coordonnees.latitude.

Une copie deep génère un nouvel objet avec des copies indépendantes de toutes les propriétés, y compris celles des objets imbriqués. Une approche répandue est d'utiliser JSON.parse(JSON.stringify(objet)), mais elle a des limitations, notamment avec les fonctions, les objets Date et les références circulaires.

let source = { nom: "Bob", coordonnees: { longitude: 2.3522 } };

// Copie deep via JSON
let copieDeep = JSON.parse(JSON.stringify(source));

// La modification de la copie deep n'affecte pas l'original
copieDeep.coordonnees.longitude = 10.0;
console.log(source.coordonnees.longitude); // Sortie: 2.3522

Pour les cas complexes impliquant des types non sérialisables en JSON, on peut recourir à des bibliothèques comme lodash avec _.cloneDeep() ou développer une fonction personnalisée pour gérer la copie profonde.

Étiquettes: JavaScript Objects Shallow Copy Deep Copy JSON

Publié le 12 juin à 19h25