Syntaxe spread — copier, combiner, et remplacer des paramètres

Fusionne une liste de produits en stock avec une liste d'articles en attente en une seule. Superpose seulement les champs qu'un utilisateur a changés sur des paramètres par défaut. Dans des cas comme ceux-ci, tu construis un nouveau tableau ou objet avec le contenu disposé, tout en laissant les données originales exactement comme elles étaient.

Cet article couvre la syntaxe spread pour ça, et quelle valeur gagne quand la même clé apparaît deux fois.

Disposer du contenu sur place — la syntaxe spread

Tu veux fusionner une liste de produits en stock avec une liste d'articles en attente en une seule ? Ajoute-les un par un avec push, et le tableau original se fait réécrire. C'est un cas où tu veux construire un nouveau tableau avec le contenu disposé, tout en laissant les listes originales exactement comme elles étaient.

La syntaxe spread (écrire ... avant une valeur pour disposer le contenu d'un tableau ou d'un objet sur place) te permet d'écrire const allItems = [...inStock, ...backOrder]; pour construire un nouveau tableau combiné. Écris-en un seul, comme dans [...inStock], et c'est une copie — un tableau séparé avec le même contenu.

Les objets fonctionnent pareil, avec { ...product }. Remarque que c'est une copie du premier niveau seulement — le comportement quand il y a un objet ou tableau imbriqué à l'intérieur est couvert dans l'article sur les références et la copie.

... joue un rôle différent selon où tu l'écris. Du côté gauche de =, c'est rest, qui regroupe ce qui reste. À l'intérieur de [] ou {} du côté droit, c'est spread, qui dispose du contenu. C'est le même symbole, mais regrouper et disposer fonctionnent dans des directions opposées.

const inStock = ["Souris sans fil", "Hub USB-C"];
const backOrder = ["Bras d'écran"];

// Construit un nouveau tableau disposant les deux
const allItems = [...inStock, ...backOrder];
console.log(allItems.join(", "));   // Souris sans fil, Hub USB-C, Bras d'écran

// Le tableau original est intact
console.log(inStock.length);        // 2

// Tu peux mélanger des valeurs individuelles au milieu
const featured = ["Sélection de la semaine", ...inStock];
console.log(featured.length);       // 3

// Les objets peuvent être copiés de la même façon
const product = { name: "Hub USB-C", price: 2480 };
const copied = { ...product };
console.log(copied.price);          // 2480

Construis un tableau d'affichage à partir de 2 tableaux — en stock et en attente. inStock et backOrder sont déjà déclarés.

① Construis un nouveau tableau combinant les deux, et affiche-le joint avec « , ».

② Affiche le compte du tableau combiné.

③ Construis un tableau qui ajoute « Nouveauté » au devant du tableau combiné, et affiche les 2 premiers articles joints avec « , ».

④ Construis un nouveau tableau copiant le tableau en stock, et affiche son compte.

(Si tout s'exécute correctement, une explication apparaîtra.)

Réécris un tableau ou objet copié et vois ce qui arrive à l'original. inStock et product sont déjà déclarés.

① Construis une copie de inStock, ajoute « Câble HDMI », et affiche son compte.

② Affiche le compte de l'original inStock.

③ Construis une copie de product, change son prix à 1980, et affiche-le.

④ Affiche le prix de l'original product.

Superposer des paramètres — le plus récent gagne

Les paramètres d'une appli sont parfois mis en place avec un tour complet de valeurs par défaut, puis seuls les champs que l'utilisateur a changés se font remplacer. Vérifier et assigner chaque champ changé un par un, cependant, veut dire ajouter du code à chaque fois qu'un nouveau paramètre apparaît.

Aligne deux spreads d'objets, comme dans { ...defaultSettings, ...userSettings }, et une clé partagée se fait écraser par la valeur écrite le plus tard. Une clé que l'utilisateur n'a pas précisée reste à sa valeur par défaut.

L'ordre dans lequel tu les écris devient directement la priorité, donc mets les valeurs par défaut d'abord et ce que tu veux prioritaire après.

const defaultSettings = { theme: "light", itemsPerPage: 20, notifications: true };
const userSettings = { theme: "dark" };

const merged = { ...defaultSettings, ...userSettings };
console.log(merged.theme);           // dark (celui écrit le plus tard gagne)
console.log(merged.itemsPerPage);    // 20 (absent côté utilisateur, donc la valeur par défaut reste)

// Inverse l'ordre, et la valeur par défaut gagne à la place
const reversed = { ...userSettings, ...defaultSettings };
console.log(reversed.theme);         // light

// Même une valeur undefined écrase, tant que la clé existe côté récent
const partial = { theme: undefined };
const broken = { ...defaultSettings, ...partial };
console.log(broken.theme);           // undefined

Même undefined écrase

Tant que la clé existe côté que tu superposes, ça écrase — même si la valeur est undefined. Superpose ainsi un champ de formulaire non rempli, et la valeur par défaut disparaît, remplacée par undefined. Pour un champ que tu ne veux utiliser que quand il a réellement une valeur, vérifie-le un par un, comme dans userSettings.theme ?? defaultSettings.theme.

Superpose les changements d'un utilisateur sur des paramètres par défaut pour construire les paramètres que tu vas réellement utiliser. defaultSettings et userSettings sont déjà déclarés.

① Construis un objet superposant les paramètres de l'utilisateur sur les défauts, et affiche-le tel quel.

② Affiche le thème du résultat superposé.

③ Construis un objet avec l'ordre de superposition inversé, et affiche son thème.

④ Affiche ce qui arrive au paramètre notifications, absent côté utilisateur, dans le résultat superposé.