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.

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

//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 musimy użyć przecinka:

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ślą 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ślą wartość:

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

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

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

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.

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);

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

function print(name, speed, color, 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";
const profession = "fight with bad guys";

//w przypadku zwykłej funkcji muszę pamiętać kolejność parametrów
print(name, speed, color, food);

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

//ktoś mi przekaże tutaj obiekt, a ja go od razu rozbiję na odpowiednie zmienne
function print({name, speed, color, food}) {
}

const name = "Szamson";
const speed = 10000;
const color = "brown";
const food = "mięso";
const type = "dog";
const profession = "fight with bad guys";

//tworzę obiekt skróconym zapisem i przekazuję do funkcji
const ob = {name, speed, color, food}
print(ob);

//lub jeszcze krócej bez tworzenia dodatkowej zmiennej
print({name, food, speed, color, type, profession});

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 innych 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

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.