3.1 actualisation des types de reference et primitifs

Dans cette vidéo, nous abordons un concept fondamental de JavaScript qu'il faut absolument garder en tête : la différence entre types primitifs et types référence. Cette distinction est à l'origine de beaucoup de bugs subtils, en particulier en React où la gestion immuable de l'état est cruciale.

Primitifs vs références

• Primitifs : nombres, chaînes, booléens. Copiés par valeur.
• Références : objets et tableaux. Copiés par pointeur.
• Modifier la copie d'un objet modifie aussi l'original.
• L'opérateur spread permet une vraie copie immutable.

Quand on copie un nombre dans une autre variable (number2 = number), JavaScript copie la valeur réelle. Si on modifie number2, number reste inchangé. Mais pour un objet ou un tableau, l'affectation ne copie pas le contenu, elle copie un pointeur vers le même emplacement mémoire. Modifier l'un modifie donc aussi l'autre, ce qui peut provoquer des comportements totalement inattendus.

// Type primitif : copie par valeur
let num = 5;
let num2 = num;
num2 = 10;
console.log(num);    // 5 (inchangé)

// Type référence : copie par pointeur
const person = { name: "Mathieu" };
const second = person;
second.name = "Max";
console.log(person.name);    // "Max" !

// Vraie copie avec spread
const realCopy = { ...person };
realCopy.name = "Max";
console.log(person.name);    // "Mathieu" (préservé)

Pour éviter ce piège, on utilise l'opérateur spread (...) qui crée une vraie copie. Ce réflexe est essentiel en React, où modifier directement l'état (state) sans le copier provoque des bugs de rendu. Retenez cette règle : si vous voulez modifier un objet ou un tableau sans toucher l'original, copiez-le d'abord avec spread. C'est un réflexe à développer dès le début.