Comment maîtriser la référence par rapport à la valeur en JavaScript

Cet article explique comment les différents types de données JavaScript se comportent lorsqu'ils sont affectés à une variable. Selon le type de données, la mémoire est allouée différemment pour la stocker. Il peut réserver un nouvel espace pour stocker une copie de la valeur ou ne pas créer de copie du tout et simplement pointer sur la valeur existante (référence).

Voici mes notes prises en suivant le cours Javascript30 de Wes Bos.

Nombres, Cordes et Booléens

En JavaScript, les types primitifs tels que indéfini, null, chaîne, nombre, booléen et symbole sont passés par valeur.

let name = ‘Marina’;
laisser nom2 = nom;
console.log ({name, name2});
 >> {nom: ‘Marina’, nom2: ‘Marina’}
name = ‘Vinicius’;
console.log ({name, name2});
>> {nom: ‘Vinicius’, nom2: ‘Marina’}
Passé par valeur.

Lorsque le nom de la variable est attribué, un espace dans la mémoire avec une adresse de 0x001 est réservé pour stocker cette valeur. Le nom de la variable pointe alors vers cette adresse. La variable name2 est alors définie sur le même nom. Un nouvel espace dans la mémoire, avec une nouvelle adresse 0x002, est alloué et stocke une copie de la valeur stockée dans l'adresse indiquée par le nom.

Ainsi, chaque fois que nous voulons modifier la valeur de name, la valeur stockée par name2 ne sera pas modifiée, car c’est une copie, stockée dans un emplacement différent.

Objets et tableaux

Les objets en JavaScript sont passés par référence. Lorsque plusieurs variables sont définies pour stocker un objet, un tableau ou une fonction, ces variables pointeront vers le même espace alloué dans la mémoire.

animaux const = ['Chat', 'Chien', 'Cheval', 'Serpent'];
laisser animaux2 = animaux;
console.log ({animaux, animaux2});
>>
{
  animaux: ['Chat', 'Chien', 'Cheval', 'Serpent'],
  animaux2: ['Chat', 'Chien', 'Cheval', 'Serpent']
}
animaux2 [3] = 'Wale';
console.log (animaux, animaux2);
>>
{
  animaux: ['Chat', 'Chien', 'Cheval', 'Wale'],
  animaux2: ['Chat', 'Chien', 'Cheval', 'Wale']
}
Passé par référence.

Lorsque animaux est configuré pour stocker un tableau, de la mémoire est allouée et une adresse est associée à cette variable. Ensuite, animals2 est défini sur les mêmes animaux. Étant donné que les animaux stockent un tableau, au lieu de créer une copie de ce tableau et une nouvelle adresse dans la mémoire, les animaux2 sont simplement dirigés vers le même objet dans l'adresse existante. Ainsi, toute modification apportée aux animaux2 aura des répercussions sur les animaux, car ils désignent le même endroit.

Vous verrez le même comportement pour les objets:

const personne = {
  nom: 'Marina',
  âge: 29
};
laisser femme = personne;
femme.age = 18;
console.log ({personne, femme});
>>
{
  personne: {nom: 'Marina', age: 18},
  femme: {nom: 'Marina', age: 18}
}

Copier des objets et des tableaux

Puisqu'une simple affectation ne suffit pas pour produire une copie d'un objet, cela peut être réalisé par d'autres approches:

Tableaux

tranche()

laisser animaux2 = animaux.slice ();
animaux2 [3] = 'Requin';

concat ()

laissez animaux3 = [] .concat (animaux);
animaux3 [3] = 'tigre';

propagation (ES6)

laisser animaux4 = [... animaux];
animaux4 [3] = 'Lion';

Les modifications n'affecteront que l'objet modifié:

console.log ({animaux, animaux2, animaux3, animaux4});
>>
{
  animaux: ['Chat', 'Chien', 'Cheval', 'Serpent'],
  animals2: ['Chat', 'Chien', 'Cheval', 'Requin'],
  animals3: ['Chat', 'Chien', 'Cheval', 'Tigre'],
  animals4: ['Chat', 'Chien', 'Cheval', 'Lion']
}

Objets

attribuer()

let human = Object.assign ({}, personne, {age: 20});
console.log (personne humaine);
>>
{
  personne: {nom: 'Marina', age: 29},
  humain: {nom: 'Marina', age: 20}
}

Deep Clone

Il est important de noter que ces méthodes ne sont qu’un seul niveau. Pour les clones profonds, il existe une méthode mal vue. Utilisez avec précaution.

let femme3 = JSON.parse (JSON.stringify (personne));
femme3.name = 'Leslie';
console.log (personne, femme3);
>>
{
  personne: {nom: 'Marina', age: 29},
  femme3: {name: 'Leslie', age: 29}
}

Références

  • WesBos - Javascript 30
  • Vous ne savez pas JS: Scope & Closures par Kyle Simpson

Initialement publié à marina-ferreira.github.io.