Destrukturyzacja w JavaScript: obiekty, tablice, wartości domyślne i rest

Destrukturyzacja to dopasowywanie wzorców do kształtów

Destrukturyzacja pozwala napisać wzorzec odwzorowujący kształt obiektu lub tablicy i w jednej linii wyciągnąć z niego wartości po nazwie albo po pozycji. Zamiast sięgać do wartości właściwość po właściwości, opisujesz, czego chcesz, a JavaScript ci to podaje.

Dwa warianty:

const user = { name: "Ada", age: 36 };
const { name, age } = user;
console.log(name, age);

const scores = [90, 85, 72];
const [first, second, third] = scores;
console.log(first, second, third);

Nawiasy klamrowe dopasowują obiekt po nazwach właściwości. Nawiasy kwadratowe dopasowują tablicę po pozycji. W obu przypadkach zmienne po lewej stronie to nowe deklaracje: nie indeksujesz wartości, tylko opisujesz wzorzec, który wydobywa z niej kawałki.

Zanim pojawiła się destrukturyzacja, ten sam kod wyglądał tak:

const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];

To nie koniec świata, ale robi się monotonne, gdy piszesz to w każdej funkcji.

Destrukturyzacja obiektu używa nazw właściwości

W przypadku obiektów nazwy w nawiasach klamrowych muszą odpowiadać nazwom właściwości źródła. Kolejność nie ma znaczenia, bo JavaScript wyszukuje je po kluczu.

const book = {
    title: "The Pragmatic Programmer",
    author: "Hunt & Thomas",
    year: 1999,
};

const { year, title } = book;
console.log(title, year);

Jeśli obiekt nie ma danej właściwości, zmienna dostaje wartość undefined, bez żadnego błędu:

const book = { title: "Refactoring" };
const { title, author } = book;
console.log(title);
console.log(author);

O tym cichym undefined warto pamiętać, gdy literówka w nazwie właściwości każe ci drapać się po głowie o drugiej w nocy.

Zmiana nazw zmiennych

Czasem nazwa właściwości w obiekcie nie jest tą, którą chcesz nadać zmiennej: może koliduje z czymś innym w zakresie albo API używa konwencji nazewnictwa, która ci nie odpowiada. Użyj original: newName, żeby przypisać ją pod inną nazwą:

const response = { id: 42, msg: "ok" };
const { id: userId, msg: message } = response;

console.log(userId, message);

Czytaj to jako „weź właściwość id i nazwij ją userId”. Najpierw nazwa właściwości, po dwukropku nazwa nowej zmiennej. Wygląda jak adnotacja typu z innych języków, ale nią nie jest.

Wartości domyślne

Jeśli właściwości może brakować, podaj wartość domyślną bezpośrednio we wzorcu:

function connect(options) {
    const { host = "localhost", port = 5432, timeout = 5000 } = options;
    console.log(`connecting to ${host}:${port} (timeout ${timeout}ms)`);
}

connect({ host: "db.example.com" });
connect({});

Wartości domyślne działają tylko wtedy, gdy wartość to undefined. null, 0 i "" przechodzą bez zmian:

const { retries = 3 } = { retries: null };
console.log(retries);

Na tym wiele osób się łapie. Jeśli chcesz, żeby null też uruchamiał wartość domyślną, potrzebujesz jawnego sprawdzenia albo operatora nullish coalescing ?? po destrukturyzacji.

Wartości domyślne można łączyć ze zmianą nazwy:

const { host: hostname = "localhost" } = {};
console.log(hostname);

Destrukturyzacja tablicy używa pozycji

Tablice nie mają nazw, tylko indeksy, więc wzorzec dopasowuje po pozycji. Przecinkami pomijasz elementy, które cię nie interesują:

const coords = [40.7, -74.0, 10];
const [lat, lon] = coords;
console.log(lat, lon);

const [, , altitude] = coords;
console.log(altitude);

Dwa początkowe przecinki znaczą „pomiń indeks 0 i 1”. Wizualnie trochę gęste, ale przydatne, gdy chcesz tylko jedną wartość ze środka.

Destrukturyzacja tablic błyszczy przy funkcjach, które zwracają krotki:

function minMax(nums) {
    return [Math.min(...nums), Math.max(...nums)];
}

const [low, high] = minMax([5, 2, 9, 1, 7]);
console.log(low, high);

Ten sam wzorzec pojawia się wszędzie w hookach Reacta: const [count, setCount] = useState(0).

Wzorce rest: zbieranie resztek

Wewnątrz wzorca destrukturyzacji ...name zbiera do nowej zmiennej wszystko, czego nie dopasowano po nazwie ani po pozycji.

W tablicach rest zbiera ogon:

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head);
console.log(tail);

W obiektach rest zbiera każdą właściwość, której nie wymieniono jawnie:

const user = { id: 1, name: "Ada", email: "ada@example.com", role: "admin" };
const { id, ...rest } = user;

console.log(id);
console.log(rest);

To idiomatyczny sposób na usunięcie jednego pola z obiektu bez jego modyfikowania: rest to nowy obiekt zawierający wszystko oprócz id.

Rest musi być ostatnim elementem wzorca. const [...init, last] to błąd składni.

Zagnieżdżona destrukturyzacja

Wzorce można zagnieżdżać. Jeśli właściwość sama jest obiektem lub tablicą, możesz ją destrukturyzować w tym samym wyrażeniu:

const response = {
    status: 200,
    data: {
        user: { name: "Ada", age: 36 },
        tags: ["admin", "beta"],
    },
};

const {
    status,
    data: {
        user: { name },
        tags: [primaryTag],
    },
} = response;

console.log(status, name, primaryTag);

To potężne narzędzie, ale korzystaj z niego ostrożnie. Trzy poziomy zagnieżdżonych klamer zaczynają przypominać łamigłówkę. Gdy tak się dzieje, wyciągnij wartości pośrednie do osobnych zmiennych: czytelność wygrywa ze sprytem.

Jedna pułapka: data: { user } we wzorcu nie tworzy zmiennej o nazwie data. To polecenie „wejdź do data i destrukturyzuj dalej”. Jeśli potrzebujesz samego data, dodaj je osobno:

const response = { data: { user: { name: "Ada" } } };
const { data, data: { user } } = response;
console.log(data);
console.log(user);

Destrukturyzacja parametrów funkcji

Najczęściej destrukturyzację spotkasz na liście parametrów funkcji. Zamienia „przekaż obiekt opcji” w sygnaturę, która sama się dokumentuje:

function createUser({ name, email, role = "member", active = true }) {
    console.log({ name, email, role, active });
}

createUser({ name: "Ada", email: "ada@example.com" });
createUser({ name: "Boris", email: "b@example.com", role: "admin" });

W miejscu wywołania wygląda to jak każde inne wywołanie z obiektem opcji. Wewnątrz funkcji dostajesz nazwane zmienne z wartościami domyślnymi, bez szablonowego options.name || "default".

Jedna ostra krawędź: wywołanie tej funkcji bez argumentu kończy się błędem, bo nie da się destrukturyzować undefined. Nadaj wartość domyślną całemu parametrowi:

function createUser({ name = "anon", role = "member" } = {}) {
    console.log(name, role);
}

createUser();

= {} po wzorcu znaczy „jeśli nie przyszedł żaden argument, udawaj, że był to pusty obiekt”. Potem do akcji wkraczają wewnętrzne wartości domyślne.

Zamiana i ponowne przypisanie

Destrukturyzacja działa też z już zadeklarowanymi zmiennymi, ale wzorzec obiektu trzeba wtedy otoczyć nawiasami okrągłymi (inaczej JavaScript odczyta { jako początek bloku):

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b);

let user = { name: "Ada" };
({ name: user.name } = { name: "Boris" });
console.log(user);

Zamiana przez tablicę jest czysta. Ponowne przypisanie przez obiekt zdarza się rzadziej, ale sztuczkę z nawiasami warto zapamiętać na wypadek, gdyby była potrzebna.

Realistyczny przykład

Połączenie większości tego, co powyżej: funkcja przetwarzająca odpowiedź API:

function summarise({
    status,
    data: { items = [] } = {},
    meta: { total = 0 } = {},
} = {}) {
    const [firstItem, ...rest] = items;
    return {
        ok: status === 200,
        first: firstItem?.name ?? "none",
        remaining: rest.length,
        total,
    };
}

console.log(summarise({
    status: 200,
    data: { items: [{ name: "alpha" }, { name: "beta" }, { name: "gamma" }] },
    meta: { total: 3 },
}));

console.log(summarise());

Każda destrukturyzowana warstwa ma wartość domyślną, więc funkcja radzi sobie z niepełnymi danymi bez stosu strażników if. To prawdziwa korzyść: sygnatury, które są jednocześnie precyzyjne i wyrozumiałe.

Dalej: object spread

Destrukturyzacja wyciąga wartości z obiektów. Spread je wkłada: kopiuje, łączy i nadpisuje. W nowoczesnym JavaScript te dwie techniki stale idą w parze, a spread omawia następna strona.