Destrukturyzacja tablic w JavaScript

W tej lekcji przeanalizujemy operację destrukturyzacji tablic. Ta operacja jest przeznaczona do masowego zapisywania elementów tablicy do zmiennych w jednej linii kodu.

Składnia tej operacji jest następująca:

javascriptlet [zmienna1, zmienna2, zmienna3] = tablica;

Jak widać, po lewej stronie znaku = w nawiasach kwadratowych wymienione są nazwy zmiennych. Te zmienne są masowo deklarowane przez let, który znajduje się przed otwierającym nawiasem.

W wyniku operacji do pierwszej zmiennej zostanie zapisany pierwszy element tablicy (czyli z kluczem zero), do drugiej zmiennej - drugi, do trzeciej zmiennej - trzeci.

Spójrzmy na praktyczny przykład. Załóżmy, że mamy tablicę przechowującą rok, miesiąc i dzień:

javascriptlet arr = [2025, 12, 31];

Zapiszmy rok, miesiąc i dzień w odpowiednich zmiennych, używając destrukturyzacji:

javascriptlet arr = [2025, 12, 31];
let [year, month, day] = arr;

Spójrzmy na zawartość naszych zmiennych:

javascriptconsole.log(year);  // wyświetli 2025
console.log(month); // wyświetli 12
console.log(day);   // wyświetli 31

Dla porównania zobacz, jak niewygodny i długi będzie kod bez destrukturyzacji:

javascriptlet arr = [2025, 12, 31];

let year  = arr[0];
let month = arr[1];
let day   = arr[2];

console.log(year);  // wyświetli 2025
console.log(month); // wyświetli 12
console.log(day);   // wyświetli 31

javascriptlet arr = ['John', 'Smit', 'development', 'programmer', 2000];

let name       = arr[0];
let surname    = arr[1];
let department = arr[2];
let position   = arr[3];
let salary     = arr[4];