Front-end · 6 mondes · 18 étapes

JavaScript

Le langage du web : types, fonctions, tableaux, objets et asynchrone.

Progression

0 %

0/18 étapes terminées

← Décryptages

Intermédiaire · 10 min de lecture

Tableaux et objets

Transformer des données sans les abîmer

1Définition

Tableaux et objets sont les deux structures de données de JavaScript. Les méthodes map, filter et reduce transforment sans modifier l'original ; la décomposition ... copie. Ne jamais modifier une donnée partagée, mais en fabriquer une nouvelle : c'est l'immuabilité.

2Principes fondamentaux

Méthodes pures et méthodes qui modifient

map, filter, reduce, slice renvoient du neuf ; push, sort, splice, reverse modifient sur place.

Copier avant de trier

[...liste].sort(...) protège l'original.

Un comparateur pour les nombres

sort((a, b) => a - b) ; sans lui, le tri compare des textes.

Déstructurer pour lire

const { nom, score } = fiche rend les intentions explicites.

3Exemples pratiques

Une chaîne complète

Exemple

1const podium = joueurs2  .filter((j) => j.score >= 1000)3  .sort((a, b) => b.score - a.score)4  .slice(0, 3)5  .map((j, i) => `${i + 1}. ${j.nom}`);

Chaque ligne fait une chose, et la liste d'origine n'est jamais modifiée — filter a fourni la copie que sort réorganise.

Mettre à jour sans modifier

Exemple

1const fiche = { nom: "codey", score: 4200 };2const promue = { ...fiche, score: 5000 };3 4const liste = [1, 2, 3];5const allongee = [...liste, 4];

C'est exactement la façon dont React attend qu'on mette à jour son état.

4Erreurs courantes

Trier l'original par accident

À éviter

const tries = joueurs.sort(…);

À faire

const tries = [...joueurs].sort(…);

Pourquoi : sort modifie le tableau sur lequel on l'appelle : joueurs serait trié lui aussi.

reduce sans valeur de départ

À éviter

prix.reduce((a, p) => a + p)

À faire

prix.reduce((a, p) => a + p, 0)

Pourquoi : Sur un tableau vide, la première forme lève une TypeError.

Copier par affectation

À éviter

const copie = fiche;

À faire

const copie = { ...fiche };

Pourquoi : Les deux noms désignent le même objet.

5Subtilités à connaître

◆La décomposition copie en surface : les objets imbriqués restent partagés. structuredClone fait une copie profonde.
◆toSorted() et toReversed(), plus récents, font la même chose que sort et reverse sans modifier l'original.
◆Object.entries(objet) transforme un objet en tableau de paires, ce qui ouvre toutes les méthodes de tableau aux objets.

6Vérifie ta compréhension

Question 1/3

Score 0

Laquelle modifie le tableau d'origine ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.