🧠 Trier des tableaux en JavaScript

« Un tableau est soit sous contrôle… soit il vous ridiculise en production. » 😅

Trier des tableaux en JavaScript donne l’impression d’être une simple ligne de code,
mais en coulisses, de petits démons sont à l’œuvre.
Dans cet article, nous allons voir :

✔️ Pourquoi les tableaux sont parfois mal triés
✔️ Ce que fait réellement sort()
✔️ Les nombres, les chaînes de caractères, les objets, les caractères turcs
✔️ Une utilisation sûre et professionnelle
✔️ Des astuces pratiques issues du monde réel

Le tout expliqué avec beaucoup d’exemples et beaucoup d’humour.

📦 1. La méthode sort() : silencieuse mais dangereuse

La méthode principale utilisée pour trier des tableaux en JavaScript est :

array.sort()

Mais…
Cette méthode a l’air innocente, alors qu’en réalité elle sème le chaos 😄

🔍 Premier essai (l’erreur innocente)

let numbers = [1, 10, 2, 5];
numbers.sort();
console.log(numbers);

📤 Résultat :

[1, 10, 2, 5]

🤨 « C’est… trié, ça ? »

🧠 Que se passe-t-il vraiment ?

Par défaut, sort() :

👉 Convertit les éléments en chaînes de caractères
👉 Les trie par ordre alphabétique (ordre du dictionnaire)

Donc JavaScript pense en réalité comme ceci :

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

📌 Règle :
sort() n’est pas un mathématicien — c’est un littéraire 😄

🔢 2. Trier correctement les nombres (fonction de comparaison)

C’est le cœur du sujet 💓
Si vous passez une fonction de comparaison à sort(), le contrôle est entre vos mains.

✅ Ordre croissant (du plus petit au plus grand)

let numbers = [1, 10, 2, 5];

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

📤 Résultat :

[1, 2, 5, 10]

🧠 Que fait cette fonction ?

• a - b < 0 → a passe avant
• a - b > 0 → b passe avant
• 0 → aucun changement

🎯 Exemple :

(2, 10) => 2 - 10 = -8 → 2 passe avant

🔽 Ordre décroissant (du plus grand au plus petit)

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

📤 Résultat :

[10, 5, 2, 1]

📌 Astuce mémo :

• Croissant → a - b
• Décroissant → b - a

🔤 3. Tableaux de chaînes : ça marche… jusqu’à ce que ça casse

let names = ["Zeynep", "Ahmet", "Mehmet", "Can"];
names.sort();
console.log(names);

📤 Résultat :

["Ahmet", "Can", "Mehmet", "Zeynep"]

Jusqu’ici, tout va bien 👍
Mais ajoutons maintenant des caractères turcs.

🇹🇷 4. Caractères turcs & localeCompare (le sauveur)

let cities = ["İzmir", "Ankara", "Çanakkale", "Bursa"];
cities.sort();
console.log(cities);

😬 Le tri sera très probablement incorrect.

✅ La méthode correcte et professionnelle

cities.sort((a, b) => a.localeCompare(b, "tr"));
console.log(cities);

📤 Résultat :

["Ankara", "Bursa", "Çanakkale", "İzmir"]

🧠 Pourquoi ça fonctionne ?

• localeCompare connaît les règles linguistiques
• "tr" → tri selon l’alphabet turc

📌 Astuce du monde réel :
E-commerce, listes, panels d’administration → utilisez toujours localeCompare

🧍‍♂️ 5. Tableaux d’objets (la vraie vie commence ici)

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

🎂 Trier par âge

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

📤 Résultat :

[
  { name: "Can", age: 20 },
  { name: "Ayşe", age: 25 },
  { name: "Mehmet", age: 30 }
]

📌 Logique :
JavaScript peut comparer non seulement des nombres,
mais aussi des nombres à l’intérieur des objets.

🔤 Trier par nom (compatible avec le turc)

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

💡 La même règle s’applique aux chaînes de caractères.

⚠️ 6. Le piège le plus dangereux : sort() modifie le tableau original !

let arr = [3, 1, 2];
let sortedArr = arr.sort();

😱 ATTENTION :
arr vaut maintenant [1, 2, 3]

🛡️ Utilisation sûre et professionnelle

let sortedArr = [...arr].sort((a, b) => a - b);

📌 Pourquoi est-ce important ?

• State React
• Redux
• Données Vue
• Bugs en production 😅

« Si tu tries un tableau sans le copier, tu es courageux… mais tu n’es pas seul. »

🚀 7. Avancé : trier selon plusieurs critères

let people = [
  { name: "Ali", age: 30 },
  { name: "Ali", age: 20 },
  { name: "Veli", age: 25 }
];

D’abord par nom, puis par âge

people.sort((a, b) => {
  if (a.name === b.name) {
    return a.age - b.age;
  }
  return a.name.localeCompare(b.name, "tr");
});

📌 Ce niveau est souvent demandé en entretien 😉

🧠 8. Mini aide-mémoire (à sauvegarder 📌)

❌ sort() seul → risqué
✅ Nombres → (a, b) => a - b
🔽 Décroissant → (a, b) => b - a
🇹🇷 Turc → localeCompare("tr")
🧍‍♂️ Objets → comparaison via les propriétés
🛡️ Préserver l’original → [...array]

🎯 Mot de la fin

Trier des tableaux en JavaScript :

« Ça commence simple, ça devient profond, et une fois maîtrisé, c’est un vrai plaisir. » 😄