Destructuring de tableau
Le destructuring (ou déstructuration) permet d'extraire plusieurs valeurs d'un tableau en une seule ligne, au lieu de les récupérer une par une.
// Avant : laborieux
const couleurs = ["rouge", "vert"];
const c1 = couleurs[0];
const c2 = couleurs[1];
// Avec le destructuring : net
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2Les variables prennent les valeurs dans l'ordre des éléments du tableau.
Tu peux ignorer un élément en laissant une virgule vide, donner une valeur par défaut, et même échanger deux variables sans variable temporaire :
// Ignorer le premier
const [, second] = ["a", "b"]; // second = "b"
// Valeur par défaut si l'élément manque
const [x = 10, y = 20] = [5]; // x = 5, y = 20
// Échanger deux variables
let p = 1, q = 2;
[p, q] = [q, p]; // p = 2, q = 1Destructuring d'objet
Même principe avec les objets, mais cette fois on extrait par nom de propriété, pas par position :
const personne = { nom: "Alice", age: 30 };
const { nom, age } = personne;
console.log(nom); // "Alice"
console.log(age); // 30Tu peux renommer la variable au passage, et donner une valeur par défaut :
// Renommer : nom -> n
const { nom: n } = personne; // n = "Alice"
// Valeur par défaut si la propriété manque
const { ville = "Paris" } = personne; // ville = "Paris"L'usage le plus courant : déstructurer directement dans les paramètres d'une fonction. Plus besoin d'écrire options.nom, options.age partout :
function afficher({ nom, age }) {
return nom + " a " + age + " ans";
}
afficher({ nom: "Bob", age: 25 }); // "Bob a 25 ans"L'opérateur spread ...
Le spread (« étaler ») prend les éléments d'un tableau ou d'un objet et les répand ailleurs. Très pratique pour copier ou fusionner sans modifier l'original.
// Copier un tableau
const original = [1, 2, 3];
const copie = [...original]; // [1, 2, 3], nouveau tableau
// Fusionner deux tableaux
const a = [1, 2];
const b = [3, 4];
const tout = [...a, ...b]; // [1, 2, 3, 4]Avec les objets, même logique : on copie les propriétés et on peut en ajouter ou en écraser :
const base = { nom: "Alice", age: 30 };
// Copier et ajouter / écraser une propriété
const modifie = { ...base, age: 31, ville: "Lyon" };
// { nom: "Alice", age: 31, ville: "Lyon" }Le spread fait une copie de surface (shallow copy). Si l'objet contient un tableau ou un objet imbriqué, ce sous-objet reste partagé entre la copie et l'original : le modifier affecte les deux.
Les paramètres rest ...
Le rest (« le reste ») utilise le même symbole ... que le spread, mais fait l'inverse : au lieu d'étaler, il regroupe plusieurs valeurs dans un seul tableau.
// Regrouper tous les arguments dans un tableau
function somme(...nombres) {
return nombres.reduce((total, n) => total + n, 0);
}
somme(1, 2, 3); // 6
somme(10, 20); // 30Le rest s'utilise aussi en destructuring, pour capturer « tout le reste » :
const [premier, ...autres] = [1, 2, 3, 4];
console.log(premier); // 1
console.log(autres); // [2, 3, 4]Retiens la règle d'or : même symbole, sens opposé. Le spread étale un tableau/objet existant ; le rest regroupe des valeurs dans un nouveau tableau. C'est le contexte (appel vs déclaration) qui décide.
Array destructuring
Destructuring lets you extract several values from an array in a single line, instead of grabbing them one by one.
// Before: tedious
const colors = ["red", "green"];
const c1 = colors[0];
const c2 = colors[1];
// With destructuring: clean
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2Variables take values in order of the array elements.
You can skip an element with an empty comma, set a default value, and even swap two variables with no temporary variable:
// Skip the first one
const [, second] = ["a", "b"]; // second = "b"
// Default value when the element is missing
const [x = 10, y = 20] = [5]; // x = 5, y = 20
// Swap two variables
let p = 1, q = 2;
[p, q] = [q, p]; // p = 2, q = 1Object destructuring
Same idea with objects, but this time you extract by property name, not by position:
const person = { name: "Alice", age: 30 };
const { name, age } = person;
console.log(name); // "Alice"
console.log(age); // 30You can rename the variable on the fly, and provide a default value:
// Rename: name -> n
const { name: n } = person; // n = "Alice"
// Default value when the property is missing
const { city = "Paris" } = person; // city = "Paris"The most common use: destructure directly in a function's parameters. No more writing options.name, options.age everywhere:
function show({ name, age }) {
return name + " is " + age;
}
show({ name: "Bob", age: 25 }); // "Bob is 25"The spread operator ...
The spread operator takes the elements of an array or object and spreads them out elsewhere. Very handy to copy or merge without mutating the original.
// Copy an array
const original = [1, 2, 3];
const copy = [...original]; // [1, 2, 3], a new array
// Merge two arrays
const a = [1, 2];
const b = [3, 4];
const all = [...a, ...b]; // [1, 2, 3, 4]Same logic with objects: you copy the properties and can add or overwrite them:
const base = { name: "Alice", age: 30 };
// Copy and add / overwrite a property
const updated = { ...base, age: 31, city: "Lyon" };
// { name: "Alice", age: 31, city: "Lyon" }Spread makes a shallow copy. If the object contains a nested array or object, that sub-object stays shared between the copy and the original: mutating it affects both.
Rest parameters ...
Rest uses the same ... symbol as spread, but does the opposite: instead of spreading out, it gathers several values into a single array.
// Gather all arguments into an array
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3); // 6
sum(10, 20); // 30Rest also works in destructuring, to capture "everything else":
const [first, ...others] = [1, 2, 3, 4];
console.log(first); // 1
console.log(others); // [2, 3, 4]Remember the rule of thumb: same symbol, opposite direction. Spread spreads out an existing array/object; rest gathers values into a new array. The context (call vs declaration) decides which one it is.
Copiez ce prompt dans Claude ou ChatGPT :
Montre-moi 5 exemples concrets où le destructuring et le spread rendent du code JavaScript plus lisible. Pour chaque exemple, montre la version « avant » et la version moderne, et explique le gain.
Sans relire la réponse de l'IA : explique avec tes mots ce que fait const { nom: n, ville = "Paris" } = personne;. Que contiennent n et ville ?
nom: n est un renommage : la valeur de personne.nom va dans une variable appelée n (il n'existe pas de variable nom ici). ville = "Paris" est une valeur par défaut : si personne n'a pas de propriété ville, alors ville vaut "Paris" ; sinon elle prend la valeur réelle.L'IA voulait fusionner deux objets, mais elle a oublié le spread sur le premier : base n'est pas étalé. Ajoutez les ... manquants devant base.
L'IA propose cette fonction pour « copier sans toucher à l'original ». Ton rôle de relecteur : l'accepter ou la rejeter, et dire pourquoi.
function dupliquer(user) {
const copie = { ...user };
copie.roles.push("admin");
return copie;
}{ ...user } ne fait qu'une copie de surface : la propriété roles (un tableau) reste partagée entre user et copie. Le copie.roles.push("admin") modifie donc aussi le tableau de l'original, exactement le bug que cette fonction prétendait éviter. Pour un objet imbriqué, il faut copier le sous-tableau aussi, par ex. roles: [...user.roles, "admin"].Sans remonter dans la leçon : le symbole ... sert au spread et au rest. En une phrase chacun, que fait le spread et que fait le rest, et qu'est-ce qui décide lequel s'applique ?
[...a, ...b]. Le rest fait l'inverse : il regroupe plusieurs valeurs dans un nouveau tableau, ex. function f(...args). C'est le contexte qui tranche : à droite d'un = ou dans un appel/littéral, c'est du spread ; à gauche (destructuring) ou dans des paramètres de fonction, c'est du rest.second après const [, second] = ["a", "b"]; ?{ ...{a: 1}, a: 2 } ?function f(...args) {}, le ... est...You now master JavaScript and its modern syntax, on the browser side. But all this code stays trapped on the visitor's machine. To store data for good, manage accounts or send emails, you need a server. Off to PHP, the language that powers this very site and millions of others.
Discover PHP →