Rest i spread w JavaScript: operator ... wyjaśniony

Ta sama składnia, dwa zadania

Trzy kropki ... pojawiają się w wielu miejscach nowoczesnego kodu JavaScript i robią dwie przeciwne rzeczy, zależnie od tego, gdzie stoją. Gdy dostrzeżesz schemat, każde użycie ... trafi do jednej z dwóch szufladek:

• Rest: ...name po stronie odbierającej zbiera wiele wartości w jedną tablicę lub obiekt.
• Spread: ...value po stronie dającej rozwija tablicę lub obiekt na poszczególne elementy.

To cały model myślowy. Reszta strony to po prostu przykłady obu przypadków i wzorce, do których będziesz wracać.

Parametry rest: zbieranie argumentów

Parametr rest w definicji funkcji zbiera dowolną liczbę argumentów w prawdziwą tablicę:

function sum(...nums) {
  let total = 0;
  for (const n of nums) total += n;
  return total;
}

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40, 50));
console.log(sum());

nums to zwykła tablica. Możesz wywołać na niej .map, .filter, sprawdzić jej .length, przekazać ją do innej funkcji: wszystko, co potrafią tablice.

Parametry rest można łączyć ze zwykłymi parametrami, ale parametr rest musi być ostatni:

function tag(label, ...items) {
  return items.map(item => `[${label}] ${item}`);
}

console.log(tag("todo", "buy milk", "call mom", "write docs"));

label przejmuje pierwszy argument, a wszystko po nim trafia do items. Umieszczenie parametru rest gdziekolwiek indziej niż na końcu to błąd składni.

Rest a stary obiekt arguments

Starszy kod JavaScript używa w zwykłych funkcjach magicznej zmiennej arguments. Wygląda jak tablica, ale nią nie jest, więc metody tablic nie działają na niej bezpośrednio. Parametry rest czysto ją zastępują:

function oldStyle() {
  // arguments is array-like, not a real array
  return Array.prototype.slice.call(arguments).map(x => x * 2);
}

function newStyle(...args) {
  return args.map(x => x * 2);
}

console.log(oldStyle(1, 2, 3));
console.log(newStyle(1, 2, 3));

Funkcje strzałkowe w ogóle nie mają obiektu arguments, więc parametry rest to jedyny sposób, żeby przyjmowały zmienną liczbę argumentów. W nowym kodzie wybieraj ...args.

Spread w wywołaniach funkcji

Spread działa odwrotnie: bierze tablicę i rozpakowuje ją na pojedyncze argumenty w miejscu wywołania.

function greet(greeting, name, punctuation) {
  return `${greeting}, ${name}${punctuation}`;
}

const parts = ["Hello", "Ada", "!"];
console.log(greet(...parts));

const nums = [5, 2, 9, 1, 7];
console.log(Math.max(...nums));

Math.max przyjmuje pojedyncze liczby, a nie tablicę. Przed spreadem pisało się Math.max.apply(null, nums). Teraz wystarczy ... i gotowe.

Zauważ, że dokładnie to samo ... jest rest w definicji funkcji i spread w jej wywołaniu: pozycja mówi ci, z którym masz do czynienia.

Spread w literałach tablic

Rozwinięcie w literale tablicy kopiuje albo łączy tablice:

const a = [1, 2, 3];
const b = [4, 5, 6];

const copy = [...a];
const joined = [...a, ...b];
const withExtra = [0, ...a, 99];

console.log(copy);
console.log(joined);
console.log(withExtra);

[...a] daje nową tablicę z tymi samymi elementami. Przydaje się, gdy chcesz sortować albo zmieniać dane bez ruszania oryginału:

const scores = [42, 17, 88, 3];
const sorted = [...scores].sort((x, y) => x - y);

console.log(sorted);
console.log(scores);

scores pozostaje nietknięte, bo .sort działało na kopii. Mały nawyk, a duży zysk, gdy piszesz kod, który nie powinien mieć zaskakujących efektów ubocznych.

Spread w literałach obiektów

Spread działa też na zwykłych obiektach i scala ich właściwości w nowy obiekt:

const user = { name: "Rosa", age: 30 };
const updates = { age: 31, city: "Lisbon" };

const merged = { ...user, ...updates };
console.log(merged);

Późniejsze klucze wygrywają. updates.age nadpisuje user.age, a city dochodzi przy okazji. Kolejność rozwinięć decyduje o wyniku, więc pamiętaj o tym, gdy nakładasz wartości domyślne i nadpisania:

const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 18 };

const settings = { ...defaults, ...userPrefs };
console.log(settings);

Najpierw wartości domyślne, potem wybory użytkownika. Użytkownik wygrywa przy fontSize, a theme dziedziczy.

Pułapka płytkiej kopii

Spread kopiuje jeden poziom w głąb. Zagnieżdżone obiekty i tablice nadal są współdzielone przez oryginał i kopię:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const copy = { ...original };

copy.tags.push("owner");

console.log(original.tags);
console.log(copy.tags);

Obie tablice pokazują nowy tag, bo copy.tags i original.tags to ta sama tablica. Spread nie sklonował zagnieżdżonej listy, tylko skopiował referencję.

Do prawdziwej głębokiej kopii zwykłych danych sięgnij po structuredClone:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const deep = structuredClone(original);

deep.tags.push("owner");

console.log(original.tags);
console.log(deep.tags);

Teraz obie tablice są niezależne. structuredClone jest wbudowane w nowoczesne przeglądarki i Node, radzi sobie z zagnieżdżonymi strukturami i jest właściwym wyborem zawsze, gdy płytka kopia nie wystarcza.

Rest w destrukturyzacji

Rest działa też w destrukturyzacji, gdzie zbiera pozostałe elementy lub właściwości:

const [first, second, ...others] = [10, 20, 30, 40, 50];
console.log(first);
console.log(second);
console.log(others);

const { name, ...rest } = { name: "Rosa", age: 30, city: "Lisbon" };
console.log(name);
console.log(rest);

Wyciągnięcie kilku pól i zachowanie reszty w jednym obiekcie to częsty wzorzec przy przekazywaniu propsów, usuwaniu wrażliwych pól albo budowaniu poprawionych wersji danych:

const user = { id: 1, name: "Rosa", password: "secret", email: "r@example.com" };
const { password, ...safe } = user;

console.log(safe);

password zostaje wyciągnięte (i zignorowane), a safe zawiera całą resztę. Bez mutacji i bez ręcznego kopiowania.

Szybkie podsumowanie

• ...name na liście parametrów albo we wzorcu destrukturyzacji to rest: zbiera.
• ...value w wywołaniu funkcji, literale tablicy albo literale obiektu to spread: rozwija.
• Kopie przez spread są płytkie. Zagnieżdżone struktury pozostają współdzielone. Do głębokich kopii używaj structuredClone.
• Parametry rest to prawdziwe tablice: używaj ich zamiast arguments.
• W literałach obiektów późniejsze rozwinięcia nadpisują wcześniejsze. Tak buduje się wartości domyślne z nadpisaniami.

Dalej: domknięcia

Funkcje w JavaScript nie tylko przyjmują dane i zwracają wyniki. Pamiętają też zakres, w którym zostały zdefiniowane. Ta pamięć nazywa się domknięciem (closure) i to ona stoi za callbackami, fabrykami i większością wzorców, które poznasz na następnej stronie.