… (spread) în JavaScript

[...tablou1, ...tablou2]
{ ...obiect, cheie: valoare }

Ce face ... (spread)

Cele trei puncte ... puse în fața unui tablou sau obiect îl „desfac” în elementele lui. Astfel faci ușor copii, combini tablouri sau obiecte ori dai elementele unui tablou ca parametri separați.

La obiecte, dacă aceeași cheie apare de două ori, câștigă ultima. Așa suprascrii setările implicite cu cele ale utilizatorului.

Copia este superficială: obiectele și tablourile din interior sunt în continuare comune cu originalul.

Exemple

Exemplul 1: Combinarea și copierea tablourilor

const fructe = ["mere", "pere"];
const legume = ["roșii", "ardei"];

const toate = [...fructe, ...legume, "pâine"];
console.log(toate);

const copie = [...fructe];
copie.push("prune");
console.log(fructe, copie);

Rezultat

[ 'mere', 'pere', 'roșii', 'ardei', 'pâine' ]
[ 'mere', 'pere' ] [ 'mere', 'pere', 'prune' ]

Exemplul 2: Setări implicite suprascrise

const implicite = { tema: "deschisă", limba: "ro", font: 14 };
const alese = { tema: "întunecată" };

console.log({ ...implicite, ...alese });

Rezultat

{ tema: 'întunecată', limba: 'ro', font: 14 }

Exemplul 3: Elementele unui tablou ca parametri

const note = [7, 10, 8, 9];

console.log(Math.max(...note));
console.log(Math.min(...note));

Rezultat

10
7

Greșeli frecvente

• Crezi că const copie = original face o copie. Ambele variabile arată același tablou, deci o modificare se vede în ambele. Scrie [...original].
• Te bazezi pe spread pentru obiecte cu mai multe niveluri. Nivelurile interioare rămân comune. Pentru o copie completă folosește structuredClone(obiect).

Comenzi înrudite

• destructuring: Destructurarea: scoate valori din obiecte și tablouri direct în variabile.
• push: Adaugă unul sau mai multe elemente la sfârșitul unui tablou.
• Object.keys / Object.values: Returnează un tablou cu cheile sau cu valorile unui obiect.