🧠 Trier des Tableaux en JavaScript

(Trier des tableaux en JavaScript – sans perdre la santé mentale)

Les tableaux (arrays) en JavaScript…
Parfois, ce sont :

• une liste de produits 🛒
• des utilisateurs 👥
• ou des données qui te font dire : « Mais qui a trié ça, et selon quoi ? » 😅

Mais la vérité est simple :

👉 Un jour ou l’autre, tu devras trier un tableau.

Et JavaScript ne te propose qu’une seule porte :

🚪 Array.prototype.sort()

Mais attention…
Derrière cette porte se cachent de petits pièges et de grosses surprises.

🔁 Que signifie “trier” en JavaScript ?

Le tri (sorting) =
Organiser les éléments d’un tableau selon une règle précise.

Ces règles peuvent être :

• 🔢 Numérique (croissant / décroissant)
• 🔤 Alphabétique
• 🌍 Selon la langue (français, turc, allemand…)
• 🧠 “À ma façon” (logique personnalisée)

Et tu dis en gros à JavaScript :

« Mets-les dans l’ordre, mais les règles, c’est moi qui les décide. »

🧓 1. La Version la Plus Pure : sort()

Commençons par la version la plus innocente.
C’est le mode “t’inquiète, je gère” de JavaScript.

🔧 Code :

const fruits = ["banana", "apple", "cherry"];
fruits.sort();

console.log(fruits);

✅ Résultat :

["apple", "banana", "cherry"]

🎉 Parfait !
Mais… ça marche surtout bien avec les chaînes de caractères.

🧠 Pourquoi ça a fonctionné ?

Parce que :

• Les strings sont triées alphabétiquement
• JavaScript ne réfléchit pas trop ici
• Logique : “A vient avant B”

📌 En résumé :
sort() → fonctionne par défaut comme un tri de chaînes

⚠️ Le Grand Piège : Les Nombres et la Déception

Essayons maintenant la même chose avec des nombres 😈

🔧 Code :

const numbers = [1, 10, 2, 5];
numbers.sort();

console.log(numbers);

❌ Résultat :

[1, 10, 2, 5]

😐 « Pardon ?! »

🧠 Pourquoi ce résultat ?

JavaScript a fait ça en coulisses :

["1", "10", "2", "5"]

Puis il a décidé :

• "10" vient avant "2"
• Parce que le tri est alphabétique

📚 Pas de maths
📚 Juste l’alphabet

JavaScript te dit clairement :

« Je ne traite pas les nombres comme des nombres…
sauf si tu me le demandes explicitement. »

🧮 2. Trier Correctement les Nombres (Comparator Function)

C’est ici qu’entre en scène la fonction de comparaison 🎭
Et là, le contrôle est totalement entre tes mains.

🔧 Tri Croissant (du plus petit au plus grand)

numbers.sort((a, b) => a - b);

🧠 Que se passe-t-il ici ?

• Si a - b est négatif → a passe avant
• Si a - b est positif → b passe avant
• Si c’est 0 → pas de changement

📌 Tu dis à JavaScript :

« Laisse-moi comparer, toi tu exécutes. »

🔧 Tri Décroissant (du plus grand au plus petit)

numbers.sort((a, b) => b - a);

🧠 Même logique, sens inverse.

🎯 Règle d’Or (À Retenir)

🔴 Si tu tries des nombres, n’utilise JAMAIS sort() sans comparator

🔤 3. Trier Correctement les Textes (localeCompare)

Ici, le niveau monte 🌍
Parce qu’il y a des langues, des accents, des caractères spéciaux.

🔧 Données :

const names = ["Émile", "Zoé", "André"];

❌ Tri classique :

names.sort();

Parfois ça marche…
Parfois ça viole complètement les règles linguistiques.

✅ Solution Professionnelle : localeCompare

names.sort((a, b) => a.localeCompare(b));

🧠 Que fait localeCompare ?

• Compare selon les règles de la langue
• Prend en compte les accents
• Produit un tri plus “humain”

📌 Panneaux d’administration
📌 Projets multilingues
📌 Applications internationales

👉 Indispensable.

🧑‍💼 4. Trier des Tableaux d’Objets (La Vraie Vie)

Là, le jeu commence vraiment 🎮
Parce que dans un vrai projet :

« Je ne trie jamais juste des nombres. »

🔧 Données :

const users = [
  { name: "Ayşe", age: 25 },
  { name: "Mehmet", age: 30 },
  { name: "Zeynep", age: 20 }
];

🔢 Trier par Âge

users.sort((a, b) => a.age - b.age);

🧠 Logique :

• On compare a.age et b.age
• L’âge le plus petit passe en premier

🔤 Trier par Nom

users.sort((a, b) => a.name.localeCompare(b.name));

📌 Lisible
📌 Correct
📌 Professionnel

⚠️ TRÈS IMPORTANT : sort() Modifie le Tableau !

C’est le piège classique 🕳️

❗ sort() modifie le tableau original (mutation)

❌ Utilisation Dangereuse

const sortedUsers = users.sort((a, b) => a.age - b.age);

Résultat :

• users est modifié
• Pas de retour en arrière 😬

✅ Méthode Sûre et Propre

const sortedUsers = [...users].sort((a, b) => a.age - b.age);

🧠 Ce qu’on a fait :

• Copie avec le spread operator
• Tableau original protégé
• Nouveau tableau trié créé

🛡️ Réflexe senior
🛡️ Code propre
🛡️ Debug serein

🧠 Mini Astuces (De l’Or Pur)

✨ Nombres + sort = comparator obligatoire
✨ Textes multilingues = localeCompare
✨ Tu veux protéger les données ? → copie le tableau
✨ Côté UI, pense toujours immutable

🆚 Tableau Récapitulatif Rapide

☕ Mot de la Fin

Le tri en JavaScript est :

« Simple en apparence,
mais responsable de beaucoup de bugs. »

Mais maintenant :

• Tu connais les pièges
• Tu connais les bonnes méthodes
• Et surtout, tu comprends pourquoi 😎

Le jour où quelqu’un te dira :

« Pourquoi cette liste est cassée ? »

Tu souriras tranquillement 😏☕