🧊 Utilisation des Const Arrays en JavaScript

En JavaScript, il y a un jour où tu finis forcément par dire :

« Je l’ai déclaré avec const… comment ça se modifie encore ? »

Et JavaScript te répond calmement, avec un léger sourire moqueur :

« Je ne t’ai jamais dit que c’était immutable. »

Dans cet article, on va voir :

• ce que const signifie vraiment
• pourquoi const + array fait chauffer le cerveau
• ce que tu peux faire… et ce que tu ne peux jamais faire
• comment obtenir une vraie immutabilité
• pourquoi les développeurs React tremblent quand ils voient push

Le tout avec beaucoup d’exemples, un peu d’humour et zéro blabla inutile.

🧠 1️⃣ Qu’est-ce que const ? (Il est temps de casser les mythes)

En JavaScript, const signifie :

« Cette variable ne peut pas être réassignée. »

Autrement dit :

const age = 30;
age = 31; // ❌ TypeError

📌 Ce qu’il se passe ici est très simple :

• age est une constante
• On ne peut pas lui attribuer une nouvelle valeur
• JavaScript est clair, net et sans négociation

Mais…
dès qu’on parle de tableaux (arrays) ou d’objets, le décor change 🎭

📦 2️⃣ Déclarer un Array avec const (La vraie source de confusion)

const fruits = ["apple", "banana", "orange"];

Voici comment JavaScript voit les choses :

• fruits → une référence
• l’array → un emplacement en mémoire

📌 Ce que const protège :
👉 la référence

📌 Ce que const ne protège PAS :
👉 le contenu de l’array

Pensons comme JavaScript :

« L’adresse ne changera pas.
Mais à l’intérieur de la maison, tu peux déplacer le canapé, changer la table… ça m’est égal. »

❌ 3️⃣ Ce que TU NE PEUX PAS faire avec un const Array

🚫 Réassigner complètement l’array

const fruits = ["apple", "banana"];
fruits = ["pear", "grape"]; // ❌ TypeError

📌 Pourquoi cette erreur ?

• Parce que fruits ne peut plus pointer vers un autre array
• La référence est verrouillée 🔒

🧠 Phrase à retenir :

const = adresse fixe, maison fixe

✅ 4️⃣ Ce que TU PEUX faire avec un const Array (La partie surprenante)

➕ Ajouter un élément

const fruits = ["apple", "banana"];
fruits.push("orange");

console.log(fruits);
// ["apple", "banana", "orange"]

😲 « Mais c’est const pourtant ? »

Oui, parce que :

• l’array est le même
• la référence est la même
• seul le contenu a changé

➖ Supprimer un élément

fruits.pop();

📌 pop() :

• supprime le dernier élément
• modifie le contenu de l’array
• ne touche pas à la référence

✏️ Modifier un élément

fruits[0] = "pear";

JavaScript ne dit toujours rien 😌
Parce que c’est toujours le même array.

🧪 5️⃣ Mini expérience : « Pourquoi il n’y a pas d’erreur ? »

const numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers);
// [1, 2, 3, 4]

❓ Pourquoi aucune erreur ?

Parce que JavaScript vérifie :

• « Nouvel array assigné ? » ❌
• « Même array, contenu modifié ? » ✅

Mais essaie ça :

numbers = [1, 2, 3, 4]; // ❌ BOOM

🚨 Et là, c’est terminé.

🔗 6️⃣ La vérité sur les références (Le cœur du problème)

Les arrays ne sont pas des types primitifs, ce sont des types par référence.

const a = [1, 2, 3];
const b = a;

b.push(4);

console.log(a); // [1, 2, 3, 4]

😱 « Mais je n’ai jamais touché à a ! »

Si, indirectement 😄
Parce que :

• a et b pointent vers le même emplacement mémoire

📌 Règle d’or :

Si deux variables pointent vers le même array,
modifier l’une modifie l’autre.

🧊 7️⃣ Être VRAIMENT Immutable (Niveau PRO)

✅ Le Spread Operator (...)

const fruits = ["apple", "banana"];

const newFruits = [...fruits, "orange"];

📌 Résultat :

• l’ancien array n’est pas modifié
• un nouvel array est créé
• la référence change

🎯 React, Vue et Redux applaudissent 👏

✅ map() – Transformer sans modifier

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);

console.log(numbers); // [1, 2, 3]
console.log(doubled); // [2, 4, 6]

📌 map() :

• ne touche jamais à l’original
• retourne toujours un nouvel array

✅ filter() – Sélectionner proprement

const numbers = [1, 2, 3, 4];

const evenNumbers = numbers.filter(n => n % 2 === 0);

🎯 Résultat :

• [2, 4]
• propre
• sûr
• immutable

❄️ 8️⃣ Object.freeze() (Puissant… mais pas totalement)

const settings = Object.freeze(["dark", "light"]);

settings.push("auto"); // ❌ (erreur en strict mode)

📌 Attention toutefois :

• freeze superficiel (shallow freeze)
• les objets imbriqués ne sont pas protégés

const data = Object.freeze([{ name: "JS" }]);
data[0].name = "TS"; // 😈 Ça fonctionne

⚠️ 9️⃣ Les erreurs les plus fréquentes (Vécu réel)

❌ Penser que const = immutable
❌ Mettre à jour un state avec push
❌ Oublier le partage de références
❌ Modifier directement un array dans React

🧠 Règle d’or en React :

Ne jamais muter le state.

🎯 1️⃣0️⃣ Quand utiliser un const Array ?

✅ TOUJOURS, si :

• la variable ne doit pas être réassignée
• tu veux un code plus sûr
• tu veux détecter les erreurs plus tôt

📌 Philosophie JavaScript moderne :

const par défaut
let si nécessaire
var… pièce de musée 🏛️

🏁 CONCLUSION : Acceptons la réalité

• un const array n’est pas immutable
• il protège la référence, pas le contenu
• la vraie immutabilité passe par :
  • la création de nouveaux arrays
  • spread, map, filter

JavaScript te dit en substance :

« Tu es libre…
mais responsable de ce que tu modifies. »