Destrukturyzacja
Destrukturyzacja (destructuring) wyciąga wartości z tablic i obiektów prosto do osobnych zmiennych.
Przykład
#const student = { name: 'Ania', level: 3, course: 'JavaScript' }
const { name, level } = student
const podium = ['Ola', 'Kuba', 'Ania']
const [winner, second] = podium
console.log(name, level)
console.log(winner, second)Definicja i zastosowanie
#Destrukturyzacja to skrócony zapis przypisania. Zamiast odczytywać po kolei user.name i user.level, piszesz const { name, level } = user i od razu masz dwie zmienne. Przy tablicach nawiasy kwadratowe pobierają elementy według pozycji: const [first, second] = list.
W obiektach liczą się nazwy właściwości, a nie kolejność. Możesz zmienić nazwę zmiennej ({ name: userName }), podać wartość domyślną na wypadek undefined ({ level = 1 }) i sięgać do zagnieżdżonych obiektów. Zapis ...rest zbiera pozostałe elementy lub właściwości.
Destrukturyzacja działa także w parametrach funkcji i w pętlach. Funkcja przyjmująca obiekt ustawień od razu rozpakowuje potrzebne pola, a for (const [key, value] of Object.entries(obj)) daje wygodny dostęp do par klucz i wartość.
Składnia
#const [a, b] = array
const [first, , third] = array
const [head, ...rest] = array
const { a, b } = object
const { a: newName, b = defaultValue } = object
const { nested: { c } } = object
function fn({ a, b = 1 }) {}Więcej przykładów
#const settings = { theme: 'dark', sounds: false, fontSize: 18 }
const { theme: mode, language = 'pl', ...others } = settings
console.log(mode, language)
console.log(others)function createUser({ name, role = 'student', active = true }) {
return `${name}: ${role}, aktywny: ${active}`
}
console.log(createUser({ name: 'Kuba' }))
console.log(createUser({ name: 'Ola', role: 'mentor', active: false }))let first = 'HTML'
let second = 'CSS'
;[first, second] = [second, first]
console.log(first, second)Średnik na początku linii chroni przed sklejeniem z poprzednią instrukcją, gdy piszesz kod bez średników. Linia zaczynająca się od [ mogłaby zostać uznana za dalszy ciąg poprzedniej.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Destrukturyzacja
nulllubundefinedrzucaTypeError. Przy opcjonalnym argumencie dodaj domyślną wartość całego parametru:function fn({ a } = {}). - Wartość domyślna działa tylko dla
undefined. Jeśli pole ma wartośćnull, zmienna dostanienull. - Nie przesadzaj z zagnieżdżaniem. Trzy poziomy klamer w jednej linii są trudne do odczytania, czytelniej rozpakować dane w dwóch krokach.
Powiązane hasła
#- Spread (...)Składnia spread rozkłada tablicę, napis lub obiekt na pojedyncze elementy: do kopiowania, łączenia i przekazywania argumentów.
- Object.entries()Zwraca tablicę par [klucz, wartość] obiektu.
- functionDeklaruje nazwaną funkcję: blok kodu z parametrami, który można wywoływać wiele razy i który może zwrócić wynik.
- for...ofPrzechodzi po kolejnych wartościach obiektu iterowalnego: tablicy, napisu, Map, Set i innych.
- constDeklaruje stałą o zasięgu blokowym. Takiej zmiennej nie można ponownie przypisać wartości.
- Parametry domyślneWartości, które parametr funkcji dostaje, gdy argument nie zostanie podany albo ma wartość undefined.
Widzisz błąd albo brakuje przykładu? Napisz do nas.