Co to jest operator Spread i Rest w JavaScript?

W tym wpisie omówię operatory rest i spread, czyli trzy kropki ..., które są niezwykle przydatne w codziennej pracy z kodem.

Zapraszam do wspólnej nauki, gdzie dowiesz się jak 'rozsmarować' obiekty i tablice oraz jak przejść przez parametry funkcji w efektywny sposób.

Co to jest Operator Spread w JavaScript?

Operator spread (...) pozwala na rozproszenie elementów tablicy lub obiektu w miejscach, gdzie oczekiwane są listy wartości.

Dzięki niemu możemy łatwo kopiować, łączyć lub modyfikować tablice i obiekty.

Przykład Użycia Operatora Spread z Tablicami

Załóżmy, że masz dwie tablice:

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

Chcesz je połączyć w jedną tablicę. Możesz użyć operatora spread:

const combinedNumbers = [...numbers1, ...numbers2];
console.log(combinedNumbers); // [1, 2, 3, 4, 5, 6]

Tutaj rozproszyliśmy elementy obu tablic, tworząc nową tablicę combinedNumbers.

Kopiowanie Tablicy z Operatorem Spread

Jeśli chcesz stworzyć shallow copy (płytką kopię) tablicy, możesz użyć operatora spread:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

Teraz copiedArray jest nową tablicą, która zawiera te same elementy co originalArray, ale jest niezależna od niej.

Operator Spread z Obiektami

Operator spread działa również z obiektami (od ES2018). Możesz go użyć do kopiowania lub łączenia obiektów.

Przykład Kopiowania Obiektu

const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };

Rozproszyliśmy właściwości originalObject do nowego obiektu copiedObject.

Łączenie Obiektów

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 2 }

Co to jest Operator Rest w JavaScript?

Operator rest (...) pozwala na zbieranie wielu argumentów w pojedynczy parametr funkcji.

Jest to szczególnie przydatne przy pisaniu funkcji, które przyjmują nieokreśloną liczbę argumentów.

Rest Parameter w Funkcjach

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22

Tutaj parametr ...numbers zbiera wszystkie przekazane argumenty do tablicy numbers.

Rest i Spread Operator w Praktyce

Przekazywanie Argumentów do Funkcji

Załóżmy, że masz funkcję, która oczekuje trzech argumentów:

function introduce(a, b, c) {
  console.log(`Cześć, jestem ${a}, ${b} i ${c}.`);
}

Masz tablicę z trzema imionami:

const names = ["Ania", "Bartek", "Cezary"];

Możesz rozproszyć tę tablicę jako argumenty funkcji:

introduce(...names);
// Cześć, jestem Ania, Bartek i Cezary.

Łączenie Rest i Spread

Możesz też użyć operatora rest w połączeniu z innymi parametrami:

function greet(greeting, ...names) {
  names.forEach((name) => {
    console.log(`${greeting}, ${name}!`);
  });
}

greet("Cześć", "Ania", "Bartek", "Cezary");
// Cześć, Ania!
// Cześć, Bartek!
// Cześć, Cezary!

Operatory Rest i Spread w Pracy z Tablicami i Obiektami

Dodawanie Elementów do Tablicy

Chcesz dodać element na początku tablicy:

const originalArray = [2, 3, 4];
const newArray = [1, ...originalArray];
console.log(newArray); // [1, 2, 3, 4]

Aktualizowanie Właściwości Obiektu

Masz obiekt użytkownika i chcesz zaktualizować jego name:

const user = { name: "Jan", age: 30 };
const updatedUser = { ...user, name: "Piotr" };
console.log(updatedUser); // { name: 'Piotr', age: 30 }

Użycie Spread z Stringami

Operator spread może być również używany ze stringami:

const str = "hello";
const chars = [...str];
console.log(chars); // ['h', 'e', 'l', 'l', 'o']

Rest Parameter z Destrukturyzacją

const [first, ...restOfNumbers] = [10, 20, 30, 40];
console.log(first); // 10
console.log(restOfNumbers); // [20, 30, 40]

Praktyczne Zastosowania

Tworzenie Kopii Obiektów i Tablic

Operator spread jest przydatny do tworzenia kopii, co zapobiega modyfikacji oryginalnego obiektu lub tablicy.

Przekazywanie Nieskończonej Liczby Argumentów

Dzięki operatorowi rest, możesz pisać funkcje, które obsługują dowolną liczbę argumentów, co jest przydatne w wielu sytuacjach.

Podsumowanie

Operatory rest i spread pozwalają rozproszyć treści obiektów i tablic, a także przechwytywać wiele argumentów w pojedynczy parametr funkcji.

• Operator spread (...): Rozprasza elementy tablicy lub właściwości obiektu.
• Operator rest (...): Zbiera wiele argumentów w pojedynczy parametr.

Mam nadzieję, że ten artykuł pomógł Ci poznać i zrozumieć operatory rest i spread w JavaScript.

Powodzenia i do zobaczenia w kolejnym artykule!