Spread i rest

Spread syntax

Spread syntax, to nowy zapis, który umożliwia rozbijanie iterowanej wartości na składowe. Może nią być string (bo składa się z poszczególnych liter), może to być tablica (bo składa się z elementów), mogą to być kolekcje (po których bardzo często robiliśmy pętle for) czy nawet obiekty (po których robiliśmy pętle for in), a nawet pojedyncze obiekty.

Poniżej kilka przykładów użycia tego zapisu:

//rozbijanie tablicy na poszczególne liczby
const tab = [1, 2, 3, 4];
console.log(...tab); //1, 2, 3, 4

//kopiowanie tablicy
const tab2 = [...tab];

//łączenie tablic
const tabPart = [3, 4]
const tabFull = [1, 2, ...tabPart, 5, 6]; //[1, 2, 3, 4, 5, 6]

//rozdzielanie tekstu na poszczególne litery
const str = "Ala ma kota";
const tab = [...str]; //["A", "l", "a", " ", "m", "a", " ", "k", "o", "t", "a"]

//Math.max wymaga parametrów po przecinku (nie jako tablica), więc mogę tutaj zastosować spread:

const tab = [1, 2, 3, 5, 4];
Math.max(...tab); //5

Spread mogę też wykorzystać do zamiany kolekcji elementów na tablicę, dzięki czemu mogę używać dla nich metod tablicowych:

const divs = document.querySelectorAll("div");

//nowa tablica z samymi tekstami z divów
const texts = [...divs].map(el => el.innerText);

W nowej wersji JavaScript spread możemy też zastosować dla obiektów:

const ob1 = {
    a : 10,
    b : 20
}

const ob2 = {
    a : 15,
    c : 30
}

const obBig = {
    ...ob1,
    ...ob2,
    d: 40
};

console.log(obBig); //{ a : 15, b : 20, c : 30, d : 40 }

Rest parameter

Identycznie jak spread syntax wygląda rest parameter, różnicą jest miejsce użycia - w tym przypadku jako parametr funkcji. Zapis ten umożliwia zbieranie w jedną zmienną (będącą tablicą) wielu parametrów przekazywanych do funkcji:

function myF(...param) {
    console.log(param); //[1, 2, 3, 4, 5]
}

myF(1,2,3,4,5);

function myF(...param) {
    const newTab = [...param];
    newTab.push("Ala");
    console.log(param, newTab); //[1,2,3], [1,2,3,"Ala"]
}

myF(1,2,3);

Rest operator możemy też wykorzystywać do pobierania w formie tablicy "pozostałych" wartości:

function printAbout(name = "Ala", ...other) {
    console.log("To jest " + name);

    if (other.length) {
        console.log(`${name} ma zwierzaki: ${other.join()}`);
    }
}

printAbout("Marcin", "pies", "kot"); //To jest Marcin. Marcin ma zwierzaki: pies,kot
printAbout(); //To jest Ala

Pamiętaj, że rest musi występować jako ostatni w parametrach:

function myF(a, b, ...numbers) {

}

function myF(a, ...numbers, b) { //błąd : Rest parameter must be last formal parameter

}