Boucles et tableaux en JavaScript

Une boucle répète un bloc de code. Chaque exécution de son corps est une itération. Tu peux modifier le nombre de répétitions en changeant le compteur et la condition de la boucle, sans copier le corps.

Lis les trois parties

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Les parenthèses contiennent une initialisation, une condition et une mise à jour, séparées par des points-virgules. let i = 1 s’exécute une fois. JavaScript vérifie ensuite i <= 5. Si la condition est vraie, le corps affiche i, la mise à jour i++ ajoute 1 et JavaScript vérifie à nouveau la condition. Une condition fausse met fin à la boucle avant une nouvelle exécution du corps.

Il y a cinq itérations mais six vérifications de la condition. La dernière vérification échoue et n’entraîne pas l’exécution du corps. Une boucle dont la condition est fausse au départ ne comporte aucune itération.

Choisis les bornes et le pas

for (let i = 0; i < 10; i++) parcourt les valeurs de 0 à 9. En commençant à 1 avec i <= 10, elle parcourt les valeurs de 1 à 10. Les deux boucles s’exécutent dix fois. Pour un pas de 1 de a vers b, lorsque b est au moins égal à a, < b donne b - a itérations et <= b donne b - a + 1.

La mise à jour peut utiliser un pas plus grand : for (let i = 0; i <= 20; i += 5) parcourt 0, 5, 10, 15, 20. Pour compter à rebours, il faut une mise à jour décroissante et une condition adaptée : for (let i = 3; i >= 1; i--) parcourt 3, 2, 1. Note les première et dernière valeurs souhaitées avant de choisir < ou <= ; cela permet de repérer une erreur de décalage d’une unité.

Garde un total cumulé

let total = 0;
for (let i = 1; i <= 100; i++) {
  total += i;
}
console.log(total); // 5050

total est un accumulateur : il conserve le résultat d’une itération à la suivante. Après les trois premières itérations, il contient successivement 1, 3, puis 6. Place sa déclaration avant la boucle pour qu’il soit initialisé une seule fois. Le déclarer dans le corps le remettrait à zéro à chaque fois et le rendrait inaccessible après la boucle.

Diagnostique une boucle au comportement étrange

Le compteur de l’en-tête utilise let car i++ le réaffecte. Un compteur déclaré avec const permet la première exécution du corps, mais déclenche une TypeError lors de la mise à jour. Un let i déclaré dans l’en-tête appartient à la boucle ; le lire ensuite déclenche une ReferenceError, sauf si une autre variable nommée i existe à l’extérieur.

Un point-virgule juste après l’en-tête donne à la boucle un corps vide. Dans for (let i = 0; i < 3; i++); { console.log("Hello"); }, le bloc s’exécute une fois après la boucle. Garde l’accolade ouvrante attachée à l’en-tête. Enfin, vérifie le sens de la mise à jour : commencer à 0 avec i < 5 et i-- éloigne du point d’arrêt et la boucle ne se termine jamais.

Certaines tâches se terminent lorsqu’un résultat atteint une cible, et non après un nombre connu d’étapes. Une boucle while vérifie cette condition d’arrêt avant chaque répétition. Une boucle do...while la vérifie après le corps.

Vérifie d’abord avec while

let balance = 1000;
let years = 0;
while (balance < 1500) {
  balance = balance * 1.05;
  years++;
}
console.log(years); // 9

Le solde augmente de 5 % par an. Les deux variables sont initialisées avant la boucle. Après huit répétitions, le solde est d’environ 1477.46, en dessous de la cible : une répétition supplémentaire est donc nécessaire. Après neuf répétitions, il est d’environ 1551.33 ; la vérification suivante est fausse. Garde toutes les décimales du solde pendant le calcul et n’arrondis que le résultat affiché.

Si une condition while est fausse au départ, le corps ne s’exécute aucune fois. Pour une boucle de comptage simple, place l’initialisation avant while et la mise à jour à la fin du corps. Cela conserve le comportement d’une boucle for lorsqu’il n’y a pas de continue. Avec continue, la mise à jour demande une attention particulière car elle peut être ignorée.

Exécute une fois avant de vérifier

let n = 4096;
let digits = 0;
do {
  n = Math.floor(n / 10);
  digits++;
} while (n > 0);
console.log(digits); // 4

Math.floor arrondit à l’entier inférieur. Ici, chaque division supprime le dernier chiffre : 4096 devient 409, puis 40, 4 et 0. Chaque suppression augmente digits. En partant de 0, le corps s’exécute quand même une fois et compte correctement son unique chiffre. Une boucle while (n > 0) qui vérifie d’abord la condition ignorerait ce cas et compterait zéro chiffre. Cette méthode de comptage des chiffres s’applique aux entiers positifs ou nuls.

Avec let n = 10, le corps d’une boucle do...while qui affiche n s’exécute une fois même si sa condition est n < 5. La même condition vérifiée avant le corps ne produit aucun affichage. Le point-virgule se place après la condition finale dans do...while.

Progresse vers une sortie

Une boucle infinie se répète sans se terminer. Oublier n++ dans let n = 0; while (n < 3) { console.log(n); } laisse la condition vraie indéfiniment. Un code qui s’exécute longtemps peut bloquer un onglet du navigateur. Suis ce qui modifie la condition et arrête un script bloqué avec les commandes du navigateur.

Une condition composée comme attempts < 3 && !found ne permet de continuer que tant que les deux tests sont vrais. Elle s’arrête lorsque trois tentatives ont été utilisées ou qu’un résultat est trouvé. Pour un entier positif ou nul qui décroît vers zéro, while (count > 0) rend un compte à rebours plus clair que while (count). Les nombres négatifs sont eux aussi évalués comme vrais : cette évaluation ne signifie donc pas à elle seule qu’un compteur est positif.

Évite d’utiliser l’égalité comme test d’arrêt pour les nombres décimaux. Dix additions de 0.1 donnent 0.9999999999999999 en JavaScript : while (x !== 1) peut donc dépasser la borne prévue sans jamais s’arrêter. Une comparaison comme x < 1 permet de franchir la borne ; un compteur entier convient mieux lorsqu’il faut exactement dix étapes. Calcule chaque valeur décimale à partir de ce compteur.

Une boucle peut être quittée avant que sa condition ne devienne fausse ou ignorer des instructions pour un seul élément. Les boucles imbriquées permettent de répéter une séquence dans une autre, par exemple pour parcourir des lignes et des colonnes.

Utilise break ou continue

break quitte immédiatement sa boucle. Pour trouver le premier multiple de 7 supérieur à 50 :

for (let n = 51; n <= 100; n++) {
  if (n % 7 === 0) {
    console.log(n); // 56
    break;
  }
}

Après l’affichage de 56, l’exécution reprend après la boucle. Les valeurs de 57 à 100 ne sont jamais vérifiées. while (true) peut utiliser le même schéma lorsque la sortie est plus facile à tester dans le corps ; un break accessible doit permettre de sortir.

continue ignore le reste de l’itération en cours. Dans une boucle for, la mise à jour de l’en-tête s’exécute quand même avant la nouvelle vérification de la condition :

for (let i = 1; i <= 9; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

Pour les valeurs paires, l’affichage est ignoré : le résultat est donc 1, 3, 5, 7, 9. Remplacer continue par break mettrait fin à la boucle à 2 et seul 1 serait affiché.

Dans une boucle while, continue revient directement à la condition. Une mise à jour placée plus loin dans le corps est ignorée. Si i vaut 2 et que le corps commence par if (i === 2) continue;, cette valeur peut rester bloquée indéfiniment. Place la mise à jour nécessaire avant ce saut ou exprime le comptage avec for.

Répète une boucle intérieure pour chaque ligne

for (let row = 1; row <= 3; row++) {
  let line = "";
  for (let col = 1; col <= 4; col++) {
    line = line + (row * col) + " ";
  }
  console.log(line.trim());
}

Pour row = 1, la boucle intérieure parcourt les colonnes de 1 à 4 et construit le texte « 1 2 3 4 ». Elle recommence à la colonne 1 pour la ligne 2, ce qui produit « 2 4 6 8 ». La ligne 3 produit « 3 6 9 12 ». Le corps intérieur s’exécute douze fois : quatre colonnes pour chacune des trois lignes. Déclare line dans le corps extérieur pour que chaque ligne commence par une chaîne vide.

Utilise des noms différents pour les compteurs. Un let i intérieur masque un i extérieur, ce qui rend la lecture des deux positions difficile.

Parcours chaque paire distincte une fois

Pour quatre personnes numérotées de 0 à 3, fais commencer le compteur intérieur à i + 1 :

for (let i = 0; i < 4; i++) {
  for (let j = i + 1; j < 4; j++) {
    console.log(i, j);
  }
}

Les paires sont 0–1, 0–2, 0–3, 1–2, 1–3, 2–3 : six parcours. Faire commencer j à 0 produirait seize parcours, y compris des paires associant une personne à elle-même et des doublons inversés.

Un break ordinaire ne quitte que la boucle la plus intérieure. Pour terminer une recherche dans des boucles imbriquées, donne une étiquette à la boucle extérieure, par exemple outer: for (...), puis utilise break outer; lorsqu’une correspondance est trouvée. L’étiquette nomme la boucle à quitter ; elle ne change pas l’ordre dans lequel les paires sont testées.

Un tableau stocke une liste ordonnée sous un même nom. Ses valeurs sont appelées éléments. Un littéral de tableau utilise des crochets et des virgules : const temps = [18, 21, 19, 24];. Le littéral [] crée un tableau vide.

Compte les positions à partir de zéro

const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"
console.log(colors.length); // 3

L’indice d’un élément est sa position comptée à partir de zéro. Le troisième élément a l’indice 2. length compte les emplacements indicés, y compris les emplacements vides. Pour ce tableau sans trou, c’est aussi le nombre d’éléments. Le dernier indice est colors.length - 1 : colors[colors.length - 1] lit donc « blue ».

Lire colors[colors.length] demande l’indice 3, situé juste après la fin, et donne undefined. Un indice manquant ne déclenche pas d’erreur simplement parce qu’il est absent. colors[5] donne aussi undefined.

Lis à partir de la fin

colors.at(-1) lit le dernier élément et colors.at(-2) lit celui qui le précède. Les indices positifs ou nuls fonctionnent comme d’habitude : colors.at(0) lit « red ». Un nombre négatif entre crochets a un autre sens : colors[-1] ne compte pas à partir de la fin et donne undefined pour ce tableau.

Lis une liste dans une liste

Un élément peut lui-même être un tableau :

const grid = [[1, 2, 3], [4, 5, 6]];
console.log(grid[1]); // [4, 5, 6]
console.log(grid[1][0]); // 4

Le premier indice sélectionne une ligne. Le second sélectionne une valeur dans cette ligne. grid.length vaut 2, tandis que grid[0].length vaut 3. Ces longueurs décrivent des tableaux différents. Les lignes d’un tableau imbriqué peuvent avoir des longueurs différentes.

Les tableaux peuvent mélanger les types, comme dans [42, "km", true]. Une liste contenant un seul type de données, par exemple des températures, est plus facile à traiter car chaque élément peut être traité de la même façon.

Reconnais un tableau et évite les surprises liées aux emplacements vides

typeof [1, 2] renvoie « object » : ce n’est donc pas un test propre aux tableaux. Utilise Array.isArray(value) : la méthode renvoie true pour [1, 2] et false pour « 12 ».

new Array(3) crée trois emplacements vides ; il ne stocke pas le seul nombre 3. Utilise [3] pour un élément ou [0, 0, 0] pour trois zéros explicites. La lecture d’un emplacement vide donne undefined, mais c’est un trou, pas une valeur stockée explicitement. Écrire des littéraux de tableau rend le contenu souhaité explicite.

Lis les chaînes sans chercher à les modifier en place

Les chaînes permettent aussi l’accès par indice et prennent en charge length et at(). "hello"[1] vaut « e » et "hello".at(-1) vaut « o ». Les chaînes sont immuables : une affectation à la position d’un caractère ne le remplace pas. En mode strict, notamment dans les modules JavaScript, cette affectation déclenche une TypeError. Construis une nouvelle chaîne lorsque le texte doit changer.

La modification d’un tableau existant s’appelle une mutation. Certaines méthodes modifient le tableau par mutation ; d’autres renvoient un nouveau tableau. La valeur de retour d’une méthode peut aussi être une longueur ou un élément supprimé : vérifie donc à la fois le tableau et le résultat de l’appel.

Remplace des éléments et modifie les extrémités

const scores = [70, 80, 90];
scores[1] = 85;
console.log(scores); // [70, 85, 90]

const fait en sorte que scores continue à désigner le même tableau. Il ne fige pas le contenu de ce tableau. L’affectation scores = [] déclencherait une TypeError, mais l’affectation par indice est autorisée.

Pour const queue = ["Ana", "Ben"];, queue.push("Cleo") renvoie 3. Le tableau devient ["Ana", "Ben", "Cleo"]. Puis queue.pop() renvoie « Cleo » et laisse les deux premiers noms. Stocker le résultat d’un appel à push stocke sa longueur numérique, et non le tableau modifié. pop et shift renvoient undefined sur un tableau vide. Ajouter ou supprimer au début décale aussi les autres indices, ce qui peut demander plus de travail sur de longs tableaux.

Insère et supprime au milieu

splice(start, deleteCount, ...items) modifie le tableau et renvoie un tableau des éléments supprimés :

const days = ["Mon", "Tue", "Thu", "Fri"];
const removed = days.splice(2, 0, "Wed");
// days: ["Mon", "Tue", "Wed", "Thu", "Fri"]
// removed: []
const nextRemoved = days.splice(1, 2);
// days: ["Mon", "Thu", "Fri"]
// nextRemoved: ["Tue", "Wed"]

Le premier appel commence à l’indice 2, ne supprime aucun élément et insère « Wed » à cet endroit. Le second commence à l’indice 1 et supprime deux éléments. Son second argument est un nombre d’éléments, pas un indice de fin. Les éléments situés après une insertion ou une suppression reçoivent de nouveaux indices.

Copie une plage avec slice

slice(start, end) renvoie un nouveau tableau et exclut l’indice de fin. Pour const t = [10, 20, 30, 40, 50];, t.slice(1, 3) donne [20, 30] et laisse t inchangé. t.slice(-2) copie les deux derniers éléments, [40, 50]. Sans argument, t.slice() copie le tableau entier. La lettre supplémentaire dans splice signale une autre opération : cette méthode modifie l’original ; slice copie une plage.

Évite les trous accidentels dans la liste

Écrire au-delà de la fin crée des emplacements vides. Après const a = [1, 2]; a[4] = 5;, la longueur vaut 5 et les indices 2 et 3 sont des trous. delete a[i] laisse aussi un trou et conserve la longueur. Utilise push pour ajouter à la fin et splice(i, 1) pour supprimer un élément en comblant le trou.

Affecter une valeur plus petite à length supprime des éléments à la fin. a.length = 0 vide le tableau. Les éléments supprimés ne réapparaissent pas si la longueur est ensuite augmentée.

sort et reverse modifient aussi les tableaux par mutation. Les méthodes de copie comprennent slice, concat, map, filter, toSorted, toReversed, toSpliced et with. Lorsqu’une méthode renvoie un nouveau tableau, enregistre ou utilise ce résultat ; l’original conserve son contenu précédent.

Une recherche peut demander une réponse par oui ou par non, ou la position d’un élément. La conversion en texte a un autre objectif : elle modifie la forme des données pour qu’une liste puisse être lue, stockée ou traitée.

Demande si une valeur est présente ou où elle se trouve

includes(value) renvoie un booléen. ["tea", "coffee"].includes("tea") vaut true ; remplacer la recherche par « Tea » donne false. La recherche de texte tient compte de la casse et les types comptent : [5].includes("5") vaut false.

indexOf(value) renvoie le premier indice correspondant, ou -1 lorsqu’aucune valeur ne correspond. lastIndexOf effectue la recherche depuis la fin. Avec [3, 7, 3, 9], le premier 3 est à l’indice 0 et le dernier à l’indice 2. La recherche de 5 renvoie -1.

N’écris pas if (arr.indexOf(x)). L’indice 0 est évalué comme faux, tandis que -1 est évalué comme vrai : ce test rejette une correspondance au début et accepte une valeur absente. Utilise arr.indexOf(x) !== -1, ou utilise includes lorsque la position n’est pas nécessaire.

Pour les valeurs ordinaires, les deux méthodes exigent le même type et la même valeur, comme l’égalité stricte. Leur traitement de NaN diffère : [1, NaN].includes(NaN) vaut true, mais [1, NaN].indexOf(NaN) vaut -1. La règle d’égalité utilisée par includes permet de considérer NaN comme égal à lui-même.

Compare volontairement les contenus

Deux tableaux créés séparément sont des tableaux différents, même lorsque leurs éléments correspondent. [1, 2] === [1, 2] vaut false ; == compare aussi l’identité des tableaux. Pour vérifier que les contenus sont identiques et dans le même ordre, compare les longueurs puis les valeurs à chaque indice correspondant. Un simple test d’appartenance ne permettrait d’établir ni le même ordre ni le même nombre de répétitions.

Assemble les éléments en une chaîne

const dateParts = ["2026", "03", "15"];
console.log(dateParts.join("-")); // "2026-03-15"
console.log([1, 2, 3].join()); // "1,2,3"
console.log([1, 2, 3].join("")); // "123"

join place son séparateur entre les éléments, jamais après le dernier. Son séparateur par défaut est une virgule sans espaces. Les éléments null et undefined contribuent par un texte vide. Choisis explicitement le séparateur pour obtenir un résultat lisible.

Utiliser + avec une chaîne convertit aussi un tableau en texte, mais emploie des virgules : "List: " + [1, 2] devient « List: 1,2 ». La structure imbriquée est perdue dans ce texte : String([1, [2, 3]]) donne "1,2,3". Affiche le tableau lui-même pour examiner sa structure.

Découpe le texte en morceaux

"red,green,blue".split(",") renvoie ["red", "green", "blue"]. Le séparateur doit correspondre exactement. Découper « red, green » sur une simple virgule conserve l’espace au début du second morceau ; découper sur une virgule suivie d’un espace supprime la virgule et cet espace.

"4,8,15".split(",") renvoie des chaînes, pas des nombres. Convertis chaque morceau avant d’additionner les valeurs numériques. Sinon, l’opérateur + peut assembler du texte au lieu de calculer un total.

Pour un texte simple composé de lettres, "stressed".split("").reverse().join("") produit « desserts ». Le découpage crée un nouveau tableau, l’inversion modifie ce tableau et l’assemblage reconstruit une chaîne. Un séparateur vide découpe les unités de code UTF-16 ; certains symboles utilisent plusieurs unités : ce n’est donc pas une méthode générale pour inverser tout texte lisible.

Une boucle peut parcourir les positions d’un tableau ou prendre directement ses valeurs. Choisis la forme qui donne accès aux informations nécessaires au corps. Garde à l’esprit que les indices du tableau changent lorsque tu insères ou supprimes des éléments.

Utilise les indices pour les positions et le sens du parcours

const fruits = ["apple", "pear", "plum"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Les indices sont 0, 1, 2. Le test est < fruits.length, car l’indice 3 se trouve après la fin. Avec <=, une itération supplémentaire lirait undefined. Les boucles par indices peuvent aussi aller à rebours, en commençant à fruits.length - 1 et en continuant tant que i >= 0, ou parcourir un élément sur deux avec i += 2.

Utilise for...of pour les valeurs

for (const fruit of fruits) {
  console.log(fruit.toUpperCase());
}

Cela affiche « APPLE », « PEAR » et « PLUM ». fruit contient une valeur par itération. const fonctionne car chaque itération crée une nouvelle liaison ; la boucle ne réaffecte pas un compteur partagé. for...of fonctionne aussi sur les chaînes. Une boucle sur « banana » peut compter les voyelles en testant "aeiou".includes(ch) pour chaque ch.

Modifier un nombre local n’écrit pas dans le tableau. Après for (let n of nums) { n = n * 2; }, les éléments numériques de nums sont inchangés. Pour les modifier par mutation, effectue une affectation par nums[i], ou construis un nouveau tableau de nombres doublés.

Obtiens les valeurs et les indices ensemble

entries() fournit des paires contenant un indice et une valeur. Les crochets dans l’en-tête de la boucle extraient chaque paire :

for (const [i, fruit] of fruits.entries()) {
  console.log((i + 1) + ". " + fruit);
}

Le résultat est « 1. apple », « 2. pear », « 3. plum ». Les indices du tableau commencent toujours à zéro ; i + 1 ne change que la numérotation affichée.

for...in parcourt les noms de propriétés. Pour les tableaux, ses indices sont des chaînes et il peut inclure des propriétés supplémentaires. Utilise les formes de boucle ci-dessus pour traiter les éléments.

Évite de sauter des éléments décalés

const nums = [2, 4, 5, 6];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) nums.splice(i, 1);
}
// nums is [4, 5]

À l’indice 0, supprimer 2 déplace 4 à l’indice 0. La mise à jour fait passer i à 1 : 4 est donc sauté. La boucle rencontre ensuite 5 et supprime 6. Le résultat contient encore un nombre pair.

Lors d’une suppression par indice, parcours le tableau à rebours depuis la fin. La suppression d’un élément ne décale alors que des positions déjà parcourues. Une autre approche consiste à construire un nouveau tableau contenant les valeurs à garder. Évite d’ajouter des éléments au même tableau lorsque le test d’arrêt de la boucle dépend de sa longueur ; la borne peut continuer à se déplacer.

De nombreuses tâches sur les tableaux utilisent les mêmes schémas de boucles simples. Détermine le résultat voulu, choisis sa valeur de départ et mets-le à jour une fois pour chaque élément pertinent. Un suivi montre ce que représente le résultat après chaque étape.

Cumule un total et compte les correspondances

const temps = [18, 21, 19, 24];
let sum = 0;
let warm = 0;
for (const t of temps) {
  sum += t;
  if (t > 20) warm++;
}

sum additionne chaque température ; warm n’ajoute un que pour une température supérieure à 20 °C. Ces variables suivent des quantités différentes. Un suivi rend cette distinction visible :

La moyenne est sum / temps.length, soit 20,5 °C. Vérifie la longueur avant de diviser : un tableau vide donne 0 / 0, soit NaN, et non une moyenne qui a un sens.

Suis la plus grande ou la plus petite valeur

Pour un tableau non vide, initialise le maximum avec son premier élément. Remplace-le ensuite uniquement lorsqu’une valeur plus grande est trouvée :

const values = [-3, -7, -1, -5];
let max = values[0];
for (const n of values) {
  if (n > max) max = n;
}
// max is -1

Commencer à zéro conserverait incorrectement zéro pour une liste ne contenant que des valeurs négatives. Commencer à -Infinity fonctionne aussi pour un maximum, mais une entrée vide laisse alors cette valeur de départ. Pour un minimum, inverse la comparaison et choisis le premier élément ou Infinity comme valeur de départ.

Trouve une première correspondance ou teste toute une liste

Une recherche stocke une correspondance et quitte la boucle avec break. Avec let firstWarm;, la boucle peut affecter firstWarm = t au premier t > 20 et s’interrompre. Elle trouve 21 et laisse les éléments suivants sans les vérifier. Si aucun élément ne correspond, la variable reste à undefined.

Pour tester si « tous » satisfont une condition, initialise un indicateur à true et affecte-lui false au premier échec. Pour tester si « au moins un » la satisfait, initialise-le à false et affecte-lui true au premier succès. Si le seuil de réussite est fixé à 50, [72, 85, 49] échoue au test vérifiant que tous ont réussi à cause de 49. Une liste vide laisse l’indicateur à sa valeur de départ.

Construis des valeurs modifiées et compare les éléments voisins

const km = [1.5, 3, 0.25];
const meters = [];
for (const d of km) {
  meters.push(d * 1000);
}
// meters is [1500, 3000, 250]

Le nouveau tableau est vide au départ et reçoit une distance convertie par itération. Place une condition avant push lorsque seules certaines valeurs doivent figurer dans le résultat.

Pour calculer les changements d’un jour à l’autre, commence à l’indice 1, car l’indice 0 n’a pas de jour précédent :

const changes = [];
for (let i = 1; i < temps.length; i++) {
  changes.push(temps[i] - temps[i - 1]);
}
// changes is [3, -2, 5]

Il y a une différence de moins que de mesures. Soustraire dans l’ordre inverse inverserait tous les signes. On retrouve les mêmes formes de résultats dans les méthodes de tableau : map construit des valeurs transformées, filter garde les correspondances, find recherche, some et every testent, et reduce accumule. Une boucle reste utile lorsqu’un seul parcours doit produire plusieurs résultats, comme avec sum et warm.

Une fonction reçoit des entrées, exécute du code et peut renvoyer un résultat. Une fonction de rappel est une fonction transmise à une autre fonction pour que celle-ci l’appelle. Les méthodes de tableau utilisent des fonctions de rappel pour décrire le travail à effectuer sur chaque élément.

Écris une courte fonction fléchée

n => n * 2 reçoit un paramètre nommé n et renvoie sa valeur doublée. La flèche sépare les entrées du corps. Avec un seul paramètre, les parenthèses peuvent être omises. Elles sont nécessaires sans paramètre ou avec plusieurs paramètres : () => 0 et (a, b) => a - b.

const double = n => n * 2;
const doubled = [1, 2, 3].map(double);
// doubled is [2, 4, 6]

double désigne la fonction elle-même. La méthode l’appelle avec chaque nombre. Écrire map(double()) appellerait immédiatement la fonction et transmettrait son résultat à la place de la fonction. Avec un test nommé comme function isEven(n) { return n % 2 === 0; }, utilise filter(isEven) pour laisser la méthode fournir chaque élément.

Renvoie une valeur depuis un corps de bloc

Une expression placée après la flèche est renvoyée automatiquement. Les accolades créent un bloc : un résultat doit donc être renvoyé explicitement avec return :

const double = n => {
  const doubled = n * 2;
  return doubled;
};

Sans return, la fonction renvoie undefined. [1, 2, 3].map(n => { n * 2; }) produit donc [undefined, undefined, undefined]. La multiplication est exécutée, mais sa valeur ne devient jamais le résultat de la fonction de rappel.

Lis les arguments de la fonction de rappel selon leur position

Les méthodes comme map, filter et forEach transmettent d’abord l’élément, ensuite son indice commençant à zéro, puis le tableau entier. Dans (name, i) => ..., tu choisis les noms ; leurs positions déterminent ce qu’ils reçoivent. Omets les paramètres inutilisés en fin de liste. D’autres méthodes ont des signatures différentes : reduce reçoit aussi un accumulateur et une fonction de rappel de tri reçoit deux valeurs à comparer.

Utilise forEach pour effectuer des actions

const letters = ["a", "b"];
const result = letters.forEach((letter, i) => {
  console.log(i + ": " + letter);
});
// Prints "0: a" and "1: b".
// result is undefined.

L’affichage est un effet de bord : une action effectuée pendant l’exécution de la fonction de rappel. forEach ignore les valeurs renvoyées par la fonction de rappel et renvoie lui-même undefined. Utilise map lorsqu’un nouveau tableau de résultats est nécessaire. Renvoyer une valeur depuis une fonction de rappel de forEach ne change pas cette règle.

Un return dans cette fonction de rappel ne termine que l’appel en cours ; la méthode passe à l’élément suivant. On ne peut pas utiliser break dans une fonction de rappel pour quitter forEach. Choisis for...of avec break, ou une méthode de recherche comme find ou some, lorsque le traitement des éléments suivants doit s’arrêter à une correspondance.

Ces méthodes utilisant une fonction de rappel ne modifient pas elles-mêmes le tableau source. La fonction de rappel peut néanmoins le modifier par mutation, par exemple par une affectation à un indice ou avec push. Une fonction de rappel centrée sur sa valeur de retour ou sur l’action prévue aide à comprendre ce que contiendra le tableau source ensuite.

Choisis une méthode de tableau selon la forme du résultat. map produit une valeur pour chaque élément présent. filter garde les éléments d’origine qui satisfont un test. Les deux renvoient de nouveaux tableaux.

Transforme avec map

const km = [1.5, 3, 0.25];
const meters = km.map(d => d * 1000);
// meters is [1500, 3000, 250]; km is unchanged.

La valeur renvoyée par la fonction de rappel devient l’élément à la position correspondante. Pour une entrée sans trou, la fonction de rappel est appelée une fois par élément et le résultat a la même longueur. La transformation fonctionne aussi sur les éléments qui sont des chaînes : ["ana", "ben"].map(s => s.toUpperCase()) donne ["ANA", "BEN"].

Le deuxième paramètre de la fonction de rappel donne l’indice. ["Ana", "Ben"].map((name, i) => (i + 1) + ". " + name) construit ["1. Ana", "2. Ben"]. Si la fonction de rappel a un corps de bloc, renvoie explicitement la valeur à stocker.

Sélectionne avec filter

const temps = [18, 21, 19, 24];
const warm = temps.filter(t => t > 20);
// warm is [21, 24]

filter garde un élément lorsque la fonction de rappel renvoie un résultat évalué comme vrai. La méthode garde l’élément lui-même, pas le booléen de la fonction de rappel. Les valeurs retenues conservent leur ordre d’origine. Le résultat peut contenir tous les éléments, certains ou aucun ; temps.filter(t => t > 30) vaut [].

Ne renvoie pas l’élément lui-même lorsque zéro est une donnée valide. [0, 5, 0, 3].filter(n => n) écarte les deux zéros car ils sont évalués comme faux. Une condition comme n !== null supprime les mesures manquantes représentées par null tout en conservant zéro. Énonce la règle réelle pour garder un élément.

Utiliser map avec une condition qui renvoie undefined pour les éléments rejetés ne les supprime pas. Ces résultats undefined occupent toujours des positions dans le nouveau tableau.

Suis un enchaînement de gauche à droite

[12, 7, 30, 4].filter(n => n >= 10).map(n => n / 2) crée d’abord [12, 30], puis [6, 15]. La deuxième fonction de rappel ne reçoit que les éléments retenus. Filtrer avant de transformer convient lorsque le test porte sur les valeurs d’origine. Changer l’ordre peut modifier les valeurs examinées par le test.

Convertis explicitement le texte numérique

const numbers = "4,8,15".split(",").map(Number);
// numbers is [4, 8, 15]

Number reçoit chaque morceau de texte et produit un nombre. Passer directement parseInt est un piège : son deuxième argument est une base de numération, alors que map fournit l’indice à cette place. ["10", "10", "10"].map(parseInt) donne [10, NaN, 2]. Utilise map(s => parseInt(s, 10)) pour fixer la base, ou map(Number) pour ces chaînes numériques entières.

Ni map ni filter ne remplace la source. temps.map(t => t + 1); seul abandonne le tableau nouvellement calculé. Enregistre-le, renvoie-le depuis une fonction ou utilise-le dans un enchaînement.

Certaines questions demandent une valeur, d’autres une position ou une réponse par oui ou par non. Les méthodes de recherche peuvent s’arrêter dès que la réponse est connue. Choisir le bon type de retour facilite ensuite l’écriture correcte des conditions.

Choisis une valeur ou un indice

const temps = [18, 21, 19, 24];
console.log(temps.find(t => t > 20)); // 21
console.log(temps.findIndex(t => t > 20)); // 1
console.log(temps.findLast(t => t > 20)); // 24
console.log(temps.findLastIndex(t => t > 20)); // 3

find recherche depuis le début et renvoie le premier élément correspondant. findIndex renvoie son indice. Leurs formes Last recherchent à rebours. Les quatre s’arrêtent lorsqu’elles trouvent la correspondance demandée.

temps.find(t => t > 30) renvoie undefined ; temps.findIndex(t => t > 30) renvoie -1. Avant de passer un indice trouvé à splice, vérifie i !== -1. Sinon, splice(-1, 1) supprime le dernier élément alors qu’aucune correspondance n’a été trouvée.

Préserve les correspondances évaluées comme fausses

[3, 0, 5].find(n => n < 1) renvoie 0, une correspondance valide. if (result) la traite à tort comme un échec car zéro est évalué comme faux. Pour les données numériques, result !== undefined distingue zéro d’une absence de correspondance. Si un tableau peut lui-même contenir undefined comme valeur correspondante, utilise findIndex et compare le résultat à -1 ; la valeur seule ne permet pas de distinguer ces cas.

filter convient lorsque toutes les correspondances sont nécessaires. [5, 12, 8, 130].filter(n => n > 10) donne [12, 130] ; find ne renvoie que 12. Obtenir filter(...)[0] calcule le tableau entier des correspondances avant de lire sa première valeur.

Teste si au moins un ou tous satisfont une condition

const scores = [72, 85, 49];
const anyFailed = scores.some(s => s < 50); // true
const allPassed = scores.every(s => s >= 50); // false

some s’arrête au premier succès. every s’arrête au premier échec. Leurs réponses sont des booléens, pas des éléments. Dans ces appels, 49 fait réussir some et échouer every.

Pour un tableau vide, some renvoie false car aucun élément ne satisfait le test. every renvoie true car aucun élément n’échoue. Si un ensemble de résultats complété doit contenir au moins un score, combine les tests : scores.length > 0 && scores.every(s => s >= 50). La condition sur la longueur gère le cas vide ; every vérifie les éléments.

Choisis entre appartenance exacte et test personnalisé

includes("ana") recherche exactement cette valeur. Une recherche sans distinction de casse nécessite une fonction de rappel : names.some(n => n.toLowerCase() === "ana"). Elle peut accepter à la fois « Ana » et « ANA ». Utilise includes pour une valeur connue et une recherche avec fonction de rappel lorsque chaque élément doit être testé selon une règle.

reduce transmet un accumulateur d’un élément au suivant. Sa fonction de rappel renvoie l’accumulateur pour l’étape suivante. Après le dernier élément, la méthode renvoie cette valeur finale.

Suis le calcul d’un total

const temps = [18, 21, 19, 24];
const total = temps.reduce((sum, t) => sum + t, 0);
// total is 82

0 est l’accumulateur initial. La fonction de rappel reçoit d’abord sum, puis la température actuelle t. La somme qu’elle renvoie devient le premier argument de l’appel suivant.

C’est le même total cumulé qu’avec une boucle utilisant let sum = 0. Une fonction de rappel reçoit aussi des arguments facultatifs pour l’indice et le tableau après l’accumulateur et l’élément. Les noms des paramètres sont libres, mais leur ordre est fixe.

Fournis une valeur de départ utile

Avec une valeur initiale, la réduction commence au premier élément. Sans valeur initiale, le premier élément présent devient l’accumulateur et les appels de la fonction de rappel commencent à l’élément présent suivant. Sur un tableau vide, omettre la valeur initiale déclenche une TypeError. [].reduce((sum, n) => sum + n, 0) renvoie 0 sans erreur car aucun appel de la fonction de rappel n’est nécessaire.

La valeur de départ détermine aussi le type de résultat. Utilise 0 pour les totaux ou les dénombrements et "" pour le texte. ["a", "b", "c"].reduce((text, s) => text + s.toUpperCase(), "") construit « ABC ». Un total numérique qui commence par une chaîne peut concaténer du texte par accident avec +.

Compte et trouve une valeur extrême

const scores = [72, 85, 49];
const passed = scores.reduce(
  (count, s) => s >= 50 ? count + 1 : count,
  0
);
// passed is 2

Un succès ajoute un ; un échec renvoie le compteur inchangé. Chaque branche fournit le prochain accumulateur. Pour un maximum, renvoie la plus grande valeur : [-3, -7, -1, -5].reduce((max, n) => n > max ? n : max, -Infinity) donne -1. Commencer à zéro serait incorrect pour cette liste entièrement négative. Une entrée vide laisse -Infinity : gère donc ce résultat lorsqu’un maximum réel est nécessaire.

Renvoie une valeur dans chaque branche

Une fonction de rappel avec un corps de bloc nécessite return. (sum, n) => { sum + n; } renvoie undefined : le résultat final de la réduction est donc undefined. Un retour manquant dans certaines branches est aussi dangereux. Dans un comptage sur [72, 49, 85], renvoyer une valeur uniquement en cas de réussite donne d’abord 1, puis undefined pour 49, puis NaN lorsqu’on ajoute un pour 85. Renvoie l’accumulateur inchangé lorsqu’un élément ne contribue pas au résultat.

Combine les opérations sans masquer la tâche

Le total des scores atteignant le seuil de réussite est scores.filter(s => s >= 50).reduce((sum, s) => sum + s, 0), ce qui donne 157. Une moyenne nécessite un nombre d’éléments distinct : temps.reduce((sum, t) => sum + t, 0) / temps.length donne 20,5 °C. Vérifie d’abord la longueur, car une entrée vide donne NaN après division. Si une fonction de rappel commence à accomplir plusieurs tâches sans rapport, une boucle for...of peut montrer plus clairement les résultats qui changent.

Le tri détermine un ordre en comparant les éléments. L’inversion renverse simplement l’ordre existant. Pour ces deux opérations, certaines méthodes modifient le tableau et d’autres créent une copie.

Comprends l’ordre par défaut

[10, 9, 1, 100].sort() donne [1, 10, 100, 9]. Sans fonction de comparaison, sort compare les éléments comme des chaînes, caractère par caractère, à l’aide des unités de code UTF-16. « 100 » commence par « 1 », qui vient avant « 9 ». Les éléments stockés restent des nombres ; seule la comparaison utilise leur forme textuelle.

Pour les chaînes, ce comportement par défaut peut aussi surprendre les lecteurs. ["banana", "Cherry", "apple"].sort() donne ["Cherry", "apple", "banana"], car les lettres ASCII majuscules viennent avant les minuscules. Les lettres accentuées peuvent être séparées des lettres avec lesquelles les lecteurs les regroupent. Utilise une comparaison adaptée à la langue pour obtenir l’ordre alphabétique attendu.

Renvoie le bon signe

Une fonction de comparaison reçoit deux éléments, a et b. Une valeur de retour négative place a avant b ; une valeur positive le place après b ; zéro les traite comme égaux pour le tri.

const nums = [10, 9, 1, 100];
nums.sort((a, b) => a - b);
// nums is [1, 9, 10, 100]

Comparer 10 à 9 produit la valeur positive 1 : 9 vient donc avant 10. Pour un ordre numérique décroissant, utilise (a, b) => b - a. Renvoie un nombre dont le signe correspond à l’ordre voulu. (a, b) => a > b ne renvoie que true ou false, qui deviennent 1 ou 0 ; la fonction n’indique jamais que a doit venir avant b. Un tel comparateur produit un ordre non fiable.

Le tri est stable : les éléments considérés comme égaux par la comparaison conservent leur ordre relatif d’origine. ["kiwi", "fig", "pear", "plum"].sort((a, b) => a.length - b.length) donne ["fig", "kiwi", "pear", "plum"]. Les trois mots de quatre lettres conservent leur ordre.

Choisis entre mutation et copie

const sorted = scores.sort((a, b) => a - b); donne un second nom au même tableau, désormais trié. Cette instruction ne conserve pas l’ordre précédent. Pour obtenir un nouveau tableau trié, utilise scores.toSorted((a, b) => a - b) ou crée une copie par décomposition avant sort.

[3, 1, 2].toReversed() donne [2, 1, 3]. C’est une séquence inversée, pas un ordre numérique décroissant. Pour placer les plus grandes valeurs en premier, utilise un comparateur décroissant ou trie par ordre croissant avant d’inverser.

Vérifie les types avant de trier du texte numérique

Les valeurs issues de split sont des chaînes. ["10", "9", "100"].sort() donne ["10", "100", "9"]. La soustraction dans un comparateur convertit les chaînes numériques pendant la comparaison, mais laisse les éléments sous forme de chaînes. Lorsque les valeurs sont des données numériques, convertis-les d’abord avec map(Number), puis utilise un comparateur numérique. Cela prépare aussi les données à une addition ultérieure sans concaténation accidentelle de texte.

Les lecteurs s’attendent à ce que l’ordre du texte et la mise en forme des nombres suivent les conventions d’une langue. Conserve les valeurs sous des formes faciles à traiter, choisis des paramètres régionaux explicites pour la comparaison de texte et mets le résultat final en forme pour le lecteur.

Compare du texte selon les règles régionales

a.localeCompare(b, locale) renvoie un nombre négatif lorsque a vient avant b, un nombre positif lorsqu’il vient après, et zéro lorsque la comparaison les considère comme égaux. Seul le signe est garanti, et non la valeur exacte -1 ou 1.

const names = ["Zoe", "Émile", "adam"];
const sorted = names.toSorted((a, b) => a.localeCompare(b, "en"));
// sorted is ["adam", "Émile", "Zoe"]

Un paramètre régional est un code de langue comme « en », « de » ou « sv ». L’allemand place « ä » avant « z », tandis que le suédois le place après « z ». Passe la langue prévue pour la page afin de rendre ce choix explicite. Sans paramètre régional, les paramètres par défaut de l’environnement d’exécution déterminent l’ordre.

Les comparaisons simples avec < comparent toujours les codes des caractères. Soustraire des mots produit NaN, qui agit comme une comparaison d’égalité lors du tri ; cela ne crée pas d’ordre alphabétique.

Définis des options de comparaison utiles

Avec { numeric: true }, les suites de chiffres sont comparées numériquement. Trier ["file10", "file2", "file1"] avec (a, b) => a.localeCompare(b, "en", { numeric: true }) donne ["file1", "file2", "file10"]. Un tri comme simple texte place « file10 » avant « file2 ».

En anglais, { sensitivity: "base" } considère comme égales les variantes de casse et d’accent, comme « a », « A » et « á ». Ces règles dépendent de la langue : le suédois traite « a » et « ä » comme des lettres de base différentes. Utilise les paramètres régionaux prévus pour les recherches comme pour les tris.

Pour de nombreuses comparaisons, réutilise un collateur :

const collator = new Intl.Collator("en", { numeric: true });
const sorted = files.toSorted(collator.compare);

collator.compare est déjà une fonction de comparaison. La créer une fois évite de configurer à plusieurs reprises les mêmes options régionales lors d’un tri important.

Trie les dates avant de les mettre en forme

Les chaînes YYYY-MM-DD de largeur fixe placent l’année avant le mois et le jour. Le tri textuel suit alors l’ordre des dates : ["2026-03-15", "2025-11-02", "2026-01-20"].sort() donne ["2025-11-02", "2026-01-20", "2026-03-15"].

Un texte commençant par le jour, comme « 15/03/2026 » et « 20/01/2025 », compare d’abord le jour et peut donc placer l’année la plus récente en premier. Stocke et trie ces dates au format ISO, puis produis le texte d’affichage à la fin.

Construis des listes et des nombres lisibles

join(", ") utilise le même séparateur partout. Intl.ListFormat ajoute le mot de liaison final de la langue :

const list = new Intl.ListFormat("en-US", {
  style: "long", type: "conjunction"
});
list.format(["Ana", "Ben", "Cleo"]);
// "Ana, Ben, and Cleo"

« en-GB » produit « Ana, Ben and Cleo » ; « nl » produit « Ana, Ben en Cleo ». Une disjonction utilise « or » en anglais. Deux noms donnent « Ana and Ben » sans virgule.

(1234.5).toLocaleString("en-US") donne « 1,234.5 », tandis que « de-DE » donne « 1.234,5 ». Ces résultats sont des chaînes. Trie les données numériques avant d’appliquer toLocaleString avec map ; les mettre en forme d’abord remplace les valeurs numériques par du texte dont la ponctuation influe sur le tri textuel.

Une variable de tableau contient une référence à un tableau. Affecter cette variable à un autre nom partage le tableau. La syntaxe de décomposition permet de créer un nouveau tableau extérieur, de combiner des listes ou de passer des éléments comme arguments distincts à une fonction.

Distingue l’affectation de la copie

const a = [1, 2, 3];
const b = a;
b.push(4);
// a and b both refer to [1, 2, 3, 4].
console.log(a === b); // true

Il y a un tableau avec deux noms. const n’empêche pas d’utiliser l’un ou l’autre nom pour le modifier par mutation. Pour obtenir un nouveau tableau extérieur, il faut une véritable opération de copie :

const c = [...a];
c.push(5);
// c is [1, 2, 3, 4, 5]; a stays [1, 2, 3, 4].
console.log(c === a); // false

Les trois points déploient les éléments de a dans un nouveau littéral de tableau. Les omettre a un effet différent : [a] crée un tableau à un élément, qui est le tableau a entier. [...a] contient les éléments de a séparément.

Combine et insère

[...[1, 2], ...[3, 4]] donne [1, 2, 3, 4], tout comme [1, 2].concat([3, 4]). [...first, 99, ...second] place un élément supplémentaire entre deux listes. [...list, "new"] crée un tableau prolongé, tandis que list.push("new") modifie le tableau existant. La décomposition conserve l’ordre des éléments de chaque entrée.

Reconnais une copie superficielle

const grid = [[1, 2], [3, 4]];
const copy = [...grid];
copy[0].push(9);
// grid[0] and copy[0] are both [1, 2, 9].

Les tableaux extérieurs sont différents, mais leurs éléments représentant les lignes pointent toujours vers les mêmes tableaux intérieurs. C’est une copie superficielle. Remplacer copy[0] par une nouvelle ligne ne modifierait que le tableau extérieur copié ; modifier la ligne existante par mutation change la ligne partagée. structuredClone(grid) crée une copie profonde indépendante de ces tableaux imbriqués.

Décompose des valeurs dans un appel

Math.max(...[3, 9, 4]) fournit trois arguments distincts et renvoie 9. Passer directement le tableau, Math.max([3, 9, 4]), fournit un seul tableau et donne NaN. La décomposition d’un tableau vide donne Math.max(...[]) === -Infinity et Math.min(...[]) === Infinity.

De très grands tableaux peuvent dépasser la limite d’arguments d’un moteur lorsqu’ils sont décomposés dans un appel. Il n’existe pas de nombre d’éléments sûr universel. Utilise une boucle ou reduce pour trouver une valeur extrême dans une grande entrée. La décomposition dans un littéral de tableau ne crée pas de liste d’arguments de fonction.

Décompose des chaînes et mets à jour des copies

[..."hello"] produit cinq chaînes d’une lettre. La décomposition d’une chaîne parcourt les points de code Unicode : [..."a😀"] contient deux éléments, tandis que "a😀".split("") contient trois unités de code UTF-16. Certains symboles visibles combinent plusieurs points de code : la décomposition ne permet donc pas de compter tous les caractères visibles de manière générale. Un nombre n’est pas itérable ; [...5] déclenche une TypeError.

Dans une liste de paramètres, function total(...nums) utilise le reste pour regrouper les arguments dans un tableau. La décomposition dans un appel fait l’inverse : elle fournit des arguments distincts.

Pour les mises à jour par copie, [10, 20, 30].with(1, 25) donne [10, 25, 30] et .toSpliced(1, 1) donne [10, 30]. toSorted et toReversed préservent aussi la source. Ce sont des copies superficielles : la même règle de partage des tableaux intérieurs s’applique donc.