JavaScript : Tableaux & objets

Un programme passe son temps à manipuler des collections de données : une liste de projets, un utilisateur, une réponse d'API. En JavaScript, deux structures suffisent à tout représenter : les tableaux et les objets. Elles sont partout, et encore plus en React.

# Les tableaux

Un tableau (array) est une liste ordonnée de valeurs, entre crochets. On accède à un élément par son index, qui commence à zéro.

const fruits = ["pomme", "poire", "kiwi"];

fruits[0];        // "pomme"
fruits.length;    // 3
fruits.push("figue");   // ajoute à la fin

const fruits = ["pomme", "poire", "kiwi"];

fruits[0];        // "pomme"

fruits.length;    // 3

fruits.push("figue");   // ajoute à la fin

Quelques méthodes utiles au quotidien :

# map, filter, reduce

Ce sont les trois méthodes les plus importantes. Elles ne modifient pas le tableau d'origine, elles en produisent un nouveau. C'est cette approche qu'on utilise sans arrêt en React.

map transforme chaque élément :

const nombres = [1, 2, 3];
const doubles = nombres.map((n) => n * 2);   // [2, 4, 6]

const nombres = [1, 2, 3];

const doubles = nombres.map((n) => n * 2);   // [2, 4, 6]

filter garde les éléments qui passent un test :

const nombres = [1, 2, 3, 4];
const pairs = nombres.filter((n) => n % 2 === 0);   // [2, 4]

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

const pairs = nombres.filter((n) => n % 2 === 0);   // [2, 4]

reduce agrège tout en une seule valeur :

const nombres = [1, 2, 3, 4];
const somme = nombres.reduce((total, n) => total + n, 0);   // 10

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

const somme = nombres.reduce((total, n) => total + n, 0);   // 10

# Les objets

Un objet est une collection de paires clé-valeur, entre accolades. C'est ce qu'on utilise pour représenter une « chose » avec plusieurs propriétés.

const projet = {
  nom: "Voyager3",
  annee: 2025,
  actif: true,
};

projet.nom;          // "Voyager3"  (notation par point)
projet["annee"];     // 2025        (notation par crochets)
projet.actif = false;   // on modifie une propriété
projet.stack = "Podman";  // on en ajoute une nouvelle

const projet = {

  nom: "Voyager3",

  annee: 2025,

  actif: true,

};

projet.nom;          // "Voyager3"  (notation par point)

projet["annee"];     // 2025        (notation par crochets)

projet.actif = false;   // on modifie une propriété

projet.stack = "Podman";  // on en ajoute une nouvelle

Une valeur d'objet peut être n'importe quoi : un nombre, une chaîne, un tableau, ou même un autre objet. C'est comme ça qu'on représente des données structurées (par exemple une réponse JSON d'API).

# La destructuration

La destructuration (destructuring) permet d'extraire des valeurs d'un objet ou d'un tableau en une seule ligne. C'est très courant en React, notamment pour lire les props.

// Sur un objet
const projet = { nom: "Voyager3", annee: 2025 };
const { nom, annee } = projet;
// nom vaut "Voyager3", annee vaut 2025

// Sur un tableau
const [premier, second] = ["pomme", "poire"];
// premier vaut "pomme", second vaut "poire"

// Sur un objet

const projet = { nom: "Voyager3", annee: 2025 };

const { nom, annee } = projet;

// nom vaut "Voyager3", annee vaut 2025

// Sur un tableau

const [premier, second] = ["pomme", "poire"];

// premier vaut "pomme", second vaut "poire"

Tu reconnaîtras la syntaxe : un composant React comme function Salutation({ nom }) déstructure justement la prop nom de son objet de props.

# Le spread (...)

L'opérateur spread (...) « étale » le contenu d'un tableau ou d'un objet. On l'utilise surtout pour copier ou fusionner sans modifier l'original.

// Copier / fusionner des tableaux
const a = [1, 2];
const b = [...a, 3, 4];   // [1, 2, 3, 4]

// Copier / mettre à jour un objet
const projet = { nom: "Voyager3", actif: true };
const majProjet = { ...projet, actif: false };
// { nom: "Voyager3", actif: false }

// Copier / fusionner des tableaux

const a = [1, 2];

const b = [...a, 3, 4];   // [1, 2, 3, 4]

// Copier / mettre à jour un objet

const projet = { nom: "Voyager3", actif: true };

const majProjet = { ...projet, actif: false };

// { nom: "Voyager3", actif: false }

# À retenir

• Un tableau est une liste ordonnée ([]), accessible par index à partir de zéro.
• map, filter et reduce transforment un tableau sans le modifier. Ce sont les outils du quotidien, et le cœur du rendu de listes en React.
• Un objet est une collection de paires clé-valeur ({}), idéale pour des données structurées.
• La destructuration et le spread (...) rendent le code plus lisible et encouragent l'immutabilité, un principe clé de React.

Prochaine étape : comprendre comment JavaScript communique avec la page grâce au DOM.