Destrukturyzacja

Dane z obiektów możemy wyciągać tak jak to robiliśmy do tej pory, czyli korzystając ze składni kropki lub kwadratowych nawiasów. Możemy też skorzystać z tak zwanego przypisania destrukturyzującego, czy też destrukturyzacji, która skraca zapis.

const tab = ["Ala", "Ola", "Ela"];

//pobieram wartości klasycznie
const name1 = tab[0];
const name2 = tab[1];

//za pomocą destrukturyzacji
const [name1, name2] = tab;

const ob = {
    name : "Rudzik",
    pet : "kot"
}

//klasycznie
const name = ob.name;
const pet = ob["pet"];

//za pomocą destrukturyzacji
const {name, pet} = ob;

Destrukturyzacja tablic

Aby stworzyć nowe zmienne na bazie danych z tablicy możemy skorzystać z zapisu:

const tab = ["Ala", "Ola", "Ela", "Fela"];
const [a, b] = tab;

console.log(a, b) //"Ala", "Ola"

Jeżeli chcielibyśmy z tablicy wyciągnąć wartości, ale z pominięciem kolejnej, wtedy po prostu jej nie podajemy:

const tab = ["Ala", "Ola", "Ela", "Fela"];
const [name1, name2, , name4] = tab;

console.log(name1, name2, name4); //"Ala", "Ola", "Fela"

Podczas tworzenia zmiennych, możemy im też ustawić domyślną wartość, która zostanie użyta, jeżeli w tablicy nie będzie wartości na danym indeksie:

const tab = ["Ala", "Ola"];

const [ name1 = "brak", name2 = "brak", name3 = "brak" ] = tab;

console.log(name1, name2, name3); //"Ala", "Ola", "brak"

Przypisanie takie możemy też zastosować przy zamianie miejscami wartości zmiennych:

let a = 1;
let b = 5;

[a, b] = [b, a];

console.log(a); // 5
console.log(b); // 1

Destrukturyzacja obiektów

Przypuśćmy, że mamy obiekt:

const obj = {
    first_name : "Karol",
    last_name : "Kowalski",
    age : 10
}

Jeżeli teraz chciałbym, z tego obiektu wyciągnąć dane i podstawić je pod zmienne mógłbym to zrobić w klasyczny sposób:

const obj = {
    first_name : "Karol",
    last_name : "Kowalski",
    age : 10
}

const name = obj.first_name;
const surname = obj.last_name;
const age = obj.age;

Ale i korzystając z destrukturyzacji:

const obj = {
    first_name : "Karol",
    last_name : "Kowalski",
    age : 10
}

const {
    first_name,
    last_name,
    age
} = obj;

Tak samo jak w przypadku tablic, zmiennym możemy ustawić domyślną wartość:

const obj = {
    first_name : "Karol",
    last_name : "Kowalski"
}

const {
    first_name = "brak",
    last_name = "brak",
    favoritePet = "kot"
} = obj;

console.log(first_name); //Karol
console.log(last_name); //Kowalski
console.log(favoritePet); //"kot"

Gdybyś chciał stworzyć zmienne o nowych nazwach, musisz użyć znaku dwukropka:

const obj = {
    first_name : "Karol",
    last_name : "Kowalski",
}

const {
    first_name : name = "brak",
    last_name : surname = "brak",
    favoritePet : pet  = "brak"
} = obj;

console.log(name); //Karol
console.log(surname); //Kowalski
console.log(pet); //"brak"

Destrukturyzacja w iteracji

Destrukturyzacja idealnie sprawdza się w przypadku iterowania po danych:

.fetch(.....)
.then(result => result.json())
.then(result => {
    //działamy na pobranych użytkownikach
    for (const el of result.users) {
        const {
            name = "",
            surname = "",
            email = "",
            plan = "basic"
            role = "user",
            www = ""
        } = el;

        console.log(surname, name, email, plan, role, www);
    }
});

Destrukturyzacja i parametry funkcji

Bardzo przydatnym manewrem jest zastosowanie destrukturyzacji w przypadku parametrów funkcji.

Wszędzie tam, gdzie ktoś (w tym silnik Javascript) przekaże ci jakiś obiekt czy tablicę, możesz używać desktruturyzacji do wyciągania danych z jego wnętrza.

Zamiast więc działać bezpośrednio na danej zmiennej:

const buttons = document.querySelectorAll("button");

//zamiast
buttons.forEach(el => {
    console.log(`Tekst elementu to ${el.innerText} a jego id to ${el.id}`);
})

Mogę wyciągnąć odpowiednie dane:

const buttons = document.querySelectorAll("button");

buttons.forEach(({innerText : text, id}) => {
    console.log(`Tekst elementu to ${text} a jego id to ${id}`);
});

Podobnie będzie miało to miejsce w przypadku przekazywania wartości do funkcji:

Zamiast:

function showUser(ob) {
    console.log(ob.name);
    console.log(ob.surname)
}

const user = {
    name : "Marcin",
    surname : "Nowak"
}

showUser(user)

mogę:

function showUser({name, surname}) {
    console.log(name);
    console.log(surname)
}

const user = {
    name : "Marcin",
    surname : "Nowak"
}
showUser(user);

Szczególnie ten ostatni przypadek ma bardzo duże znaczenie przy bardziej rozbudowanych aplikacjach.

W obiektach kolejność kluczy nie ma znaczenia, dzięki czemu mogę przekazywać do funkcji dane nie zważając na kolejność danych:

//klasyczna funkcja z kilkoma parametrami
function print(name, speed, color, food) {
    console.log(`
        Name : ${name}
        Speed : ${speed}
        Color : ${color}
        Food : ${food}
    `);
}

//mam kilka zmiennych, które chcę do niej przekazać
const name = "Szamson";
const speed = 10000;
const color = "brown";
const food = "mięso";
const type = "dog";

//w przypadku zwykłych parametrów muszę pamiętać ich kolejność
//nie jest to jakimś super problemem, bo dobry edytor mi je podpowie
print(name, speed, color, food);

Zamiast pamiętania kolejności, mogę skróconym zapisem stworzyć obiekt i przekazać go do funkcji:

//do poniższej funkcji ktoś mi przekaże obiekt, a ja go od razu rozbiję na odpowiednie zmienne
function print({name, speed, color, food}) {
    console.log(`
        Nazwa : ${name}
        Szybkość : ${speed}
        Kolor : ${color}
        Ulubione jedzenie : ${food}
    `);
}

print({
    name : "Szamson",
    speed : 10000,
    food : "Mięso",
    color : "brown",
})

//lub jeżeli mam już wcześniej zmienne
//mogę stworzyć obiekt z takimi kluczami:

const name = "Szamson";
const speed = 10000;
const color = "brown";
const food = "mięso";
const type = "dog";

//kolejność nie ma znaczenia
print({name, food, speed, type, color}); //dodatkowy klucz type nie ma znaczenia

//bo to jest to samo co:
print({
    name : name,
    food : food,
    speed : speed,
    type : type,
    color : color
});

Co więcej mogę to połączyć z domyślnymi wartościami dla wyciąganych kluczy z obiektu, dzięki czemu odpalając funkcję nie będę musiał przekazywać wszystkich wartości:

function print({name, speed = 100, color = "red", food = "mięso", height = 140}) {

}

print({
    name : "Karol",
    height : 200
})

Destrukturyzacja i rest

Stosując przypisanie destrukturyzacji możemy też użyć operatora rest, co pozwala nam wybierać resztę zmiennych:

const tab = [1, 2, 3, 4, 5];

const [first, ...other] = tab;

console.log(first, other); //1, [2, 3, 4, 5]

Podobny zabieg możemy też stosować dla obiektów, co przydaje się gdy chcemy pomijać jakieś właściwości:

const ob = {
    name : "Piotrek",
    age : 20,
    surname : "Nowak",
    pet : "pies"
}

const {pet, ...obWithoutPet} = ob;

console.log(pet); //"pies"
console.log(obWithoutPet); //obiekt bez właściwości pet

const carData = {
    brand : "BMW",
    color: "red",
    maxSpeed : 260,
    owner: "Jan Nowak",
    ownerAge : 30
}

const {owner, ownerAge, ...car} = carData;

console.log(car); //car bez właściwości owner i ownerAge

lub kopiować płaskie obiekty:

const pet = {
    name : "Szamson",
    speed : 1000,
}

const pet2 = {...pet}
pet2.height = 40;

console.log(pet); //{name : "Szamson", speed : 1000}
console.log(pet2); //{name : "Szamson", speed : 1000, height: 40}

Podejście to będziemy stosować w kilku projektach np. tutaj lub tutaj.

Bardziej skomplikowana struktura

Jeżeli za pomocą destrukturyzacji chcemy wyciągać zagnieżdżone dane, wtedy w naszym wzorze powinniśmy odwzorować wygląd struktury obiektu:

const myObj = {
    first_name : "Karol",
    last_name : "Nowak",
    role : "driver",

    pets: ["pies", "kot"],

    car : {
        name : "Honda",
        year: 2002,
        type : "hatchback"
    }
}

const {
    first_name: name,
    last_name : surname,
    role,

    pets : [
        pet1,
        pet2
    ],

    car : {
        name : carName,
        year : carYear,
        type : carType
    }
} = myObj || {}

Zauważ, że nasz wzorzec postawiłem pod myObj lub pusty obiekt. Dzięki temu zabezpieczam się na wypadek, gdyby nie było myObj w ogóle.