Référence ou valeur


TLDR: En JavaScript, les types primitifs traitent des valeurs, alors que les objets, tableaux, ensembles ou cartes fonctionnent par référence !

Qu’est-ce que la valeur de passage ?

Nous avons parlé d’un tas de types en JavaScript dans mes précédents articles. Les chaînes de caractères, les nombres ou les booléens fonctionnent par valeurs. Qu’est-ce que j’entends par là ?

let person = "Parwinder";
let human = person;

console.log(person); // Parwinder
console.log(human); // Parwinder

person = "Ricky";

console.log(person); // Ricky
console.log(human); // Parwinder

J’ai créé une variable person et lui a attribué une valeur. La variable human était égal à la variable person mais cela ne signifie pas que human reflète les changements dans person. Quand j’ai fait human égal à person J’ai fait cela en faisant passer la valeur de person à human. Une copie a été faite, et ils ne sont pas liés entre eux. Il s’agit d’un passage de valeur.

Qu’est-ce que passer par référence ?

Les objets, les tableaux, les ensembles et les cartes fonctionnent par référence et non par valeur.

let personObject = {
    firstName: "Parwinder",
    lastName: "Bhagat"
};

let humanObject = personObject;

console.log(personObject.firstName); // Parwinder
console.log(humanObject.firstName); // Parwinder

personObject.firstName = "Ricky";

console.log(personObject.firstName); // Ricky
console.log(humanObject.firstName); // Ricky

Avez-vous remarqué la différence ? Le changement de firstName de personObject se reflète dans la firstName de humanObject. C’est parce que lorsque j’ai créé humanObject et l’a rendu égal à personObjectIl n’a pas copié sur l’objet. Il a plutôt créé une référence à l’objet personObject. Comme les deux objets pointent vers la même référence, une modification apportée à la référence se reflète dans les deux.

Le passage par référence n’est pas seulement limité à la copie d’informations. Elle va au-delà. Un exemple serait l’appel d’une fonction. Lorsque vous appelez une fonction en passant une variable qui est une chaîne de caractères, un nombre ou un booléen, elle passe la valeur. Ainsi, si nous modifions la valeur passée quelque part dans la fonction, la valeur originale n’est pas affectée.

D’autre part, si je passe un objet à une fonction et que, dans le cadre de cette fonction, je modifie une propriété de l’objet passé, l’objet original est affecté. L’objet d’origine reflète la valeur modifiée maintenant.

Dans le cas d’un type primitif

function changeValue(arg) {
    arg = "This is a new value";
    return arg;
}

let person = "Parwinder"
console.log(changeValue(person)); // This is a new value
console.log(person); // Parwinder

Vous pouvez voir que la variable person n’a pas changé lorsque j’ai effectué une opération sur variable/argument arg.

En cas d’objet

function changeValue(arg) {
    arg.name = "Ricky";
    return arg;
}

let person = {
    name: "Parwinder",
    age: 33
}
console.log(changeValue(person)); // { name: 'Ricky', age: 33 }
console.log(person); // { name: 'Ricky', age: 33 }

Alors qu’ici, changer le nom dans la fonction a changé l’objet original ! 😱

Alors, comment copier des objets ?

Si vous voulez copier les valeurs d’un objet et ne pas travailler avec des références, vous devez cloner l’objet original. Pour ce faire, vous pouvez utiliser la fonction diffuser (…) opérateur.

let personObject = {
    firstName: "Parwinder",
    lastName: "Bhagat"
};

let humanObject = { ...personObject };

console.log(personObject.firstName); // Parwinder
console.log(humanObject.firstName); // Parwinder

personObject.firstName = "Ricky";

console.log(personObject.firstName); // Ricky
console.log(humanObject.firstName); // Parwinder

Vous pouvez voir que humanObject est une copie de personObject parce que lorsque j’ai changé le firstName de la propriété, il n’a fait que changer de personObject. Le changement ne s’est pas propagé à humanObject!

Est-ce si simple ?

En bref, la réponse est non. Ce que nous avons fait ci-dessus en utilisant l’opérateur d’étalement, c’est que nous avons fait un peu profond copie de l’objet. La copie peu profonde copie les propriétés de premier niveau de l’objet. Les propriétés plus profondes que le premier niveau sont toujours référencées !

let personObject = {
    firstName: "Parwinder",
    lastName: "Bhagat",
    vehicles: {
        car: "Honda Civic",
        bike: "Honda Rebel"
    }
};

let humanObject = { ...personObject };

console.log(personObject.vehicles.car); // Honda Civic
console.log(humanObject.vehicles.car); // Honda Civic

personObject.firstName = "Ricky";

console.log(personObject.firstName); // Ricky
console.log(humanObject.firstName); // Parwinder

personObject.vehicles.car = "BMW X5";

console.log(personObject.vehicles.car); // BMW X5
console.log(humanObject.vehicles.car); // BMW X5

Dans l’exemple ci-dessus, j’ai fait une copie peu profonde, et lorsque j’ai changé le nom dans un objet, il n’a pas changé dans l’autre (comme prévu). Mais lorsque je change la voiture qui ne se trouve pas au premier niveau de l’objet, elle est changée dans l’autre objet. N’oubliez pas que la copie superficielle ne copie que le premier niveau, les niveaux plus profonds sont toujours par référence.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*