magicweb.pl | Blog programistyczny
JavaScript destrukturyzacja
Frontend

Destrukturyzacja w JavaScript

By 5 min

Destrukturyzacja pojawiła się wraz z ES6 i mimo, że możemy z niej korzystać od kilku lat, postanowiłem napisać artykuł, pokazując kilka możliwości destrukturyzacji. W skrócie, destrukturyzacja pozwala nam na przypisanie wartości tablic lub obiektów do zmiennych w łatwy sposób. Standardowo w artykule posłużę się praktycznymi przykładami, dzięki czemu będzie można łatwiej przyswoić wiedzę i zobaczyć jak to działa.

Przypisanie wartości do zmiennej

Zacznijmy od bardzo prostego przykładu, czyli „wyodrębnienia” wartości dla właściwości obiektu i przypisanie wartości do zmiennych.

const www = {
    name: 'Magicweb.pl',
    address: 'https://www.magicweb.pl'
};

const { name, address } = www;
console.log(name); // Magicweb.pl
console.log(address); // https://www.magicweb.pl

Zapis ten jest równoznaczny z:

const name = www.name;
const address = www.address;

Destrukturyzację możemy również zastosować do tablic:

const www = ["Magicweb.pl", "https://www.magicweb.pl"];

let [name, address] = www;
console.log(name); // Magicweb.pl
console.log(address); // https://www.magicweb.pl

Co się stanie, jeżeli spróbujemy wykonać destrukturyzację, kiedy wartość nie występuje w obiekcie/tablicy?

const www = ["one"];

let [one, two] = www;
console.log(one); // one
console.log(two); // undefined
const www = { one: '1' };

let { one, two } = www;
console.log(one); // 1
console.log(two); // undefined

Zarówno w przypadku obiektów, jak i tablicy, dla nieistniejącej właściwości otrzymamy undefined.

Przypisanie wartości – zagnieżdżona struktura

W poprzednich przykładach mieliśmy do czynienia z płaską strukturą. Destrukturyzacji możemy użyć również dla zagnieżdżonych obiektów i tablic.

const person_list = { 
  admin: {
    name: 'Lukasz'
  }
};

let { admin: { name } } = person_list;
console.log(name); // Lukasz
console.log(admin); // ReferenceError: admin is not defined

W przypadku zagnieżdżonych tablic, wygląda to trochę bardziej skomplikowanie, szczególnie, jeżeli chcemy celowo pominąć dany element. W tym przypadku używamy przecinka ,, aby pominąć dany element.

const person_list = [ 
  ['Lukasz'],
  ["one", "two"],
  ["three"],
  ["value 4"]
];

let [[lukasz], [,two],,[four]] = person_list;

console.log(lukasz); // Lukasz
console.log(two); // two
console.log(four); //value 4

Przypisanie wartości – wartości domyślne

W pierwszym przykładzie pokazałem sytuację, kiedy nie ma dostępnej właściwości, wówczas otrzymujemy undefined. Dzięki destrukturyzacji możemy przypisać wartość domyślną.

const person = {
  name: 'Lukasz',
  age: 100
};

const { name, age, website = 'https://www.magicweb.pl' } = person;
console.log(name); // Lukasz
console.log(age); // 100
console.log(website); // https://www.magicweb.pl

Jak widać, w naszym przykładzie dla obiektu person, nie mamy właściwości website, natomiast na etapie destrukturyzacji przypisaliśmy wartość domyślną.

To samo możemy zastosować do tablic:

const person = ["Lukasz", "100"];

const [name, age, website = 'https://www.magicweb.pl'] = person;
console.log(name); // Lukasz
console.log(age); // 100
console.log(website); // https://www.magicweb.pl

Przypisanie wartości – zmiana nazwy

Przeglądając poprzednie przykłady, podczas destrukturyzacji odwołujemy się do nazwy właściwości obiektu i tworzymy zmienną o takiej samej nazwie, czyli dla obiektu z property "name", tworzymy zmienną (w naszych przypadkach stałą, ponieważ używamy const) "name".

Możemy zmienić nazwę na inną:

const person = {
  name: 'Lukasz',
  age: 100
};

const { name: imie, age: wiek, website : strona = 'https://www.magicweb.pl' } = person;
console.log(imie); // Lukasz
console.log(wiek); // 100
console.log(strona); // https://www.magicweb.pl

Przypisanie wartości – dynamiczna nazwa właściwości

Może zdarzyć się sytuacja, że będziemy potrzebować dokonać destrukturyzacji, ale nazwa właściwości obiektu może się zmieniać, a my chcemy się do niej odwołać.

const person = {
  name: 'Lukasz',
  age: 100
};

const dynamic = 'age';
const { name, [dynamic]: age } = person;

console.log(name); // Lukasz
console.log(age); // 100

React – destrukturyzacja props

Destrukturyzację można bardzo dobrze wykorzystać w przypadku pobieraniu wartości propsów.

function App() {
    return (<Person name={'Lukasz'} age={100}/>);
}

function Person(props) {
    return (<div>{props.name}, age: {props.age}</div>);
}

Zamiast props i odwoływaniu się do wartości przez props.name oraz props.age, możemy w parametrze funkcji dokonać destrukturyzacji.

function Person({name, age}) {
    return (<div>{name}, age: {age}</div>);
}

W tym przypadku też możemy przypisać wartość domyślną, korzystając z wiedzy z przykładów powyżej.

function App() {
    return (<Person name={'Lukasz'}/>);
}

function Person({name, age = 999}) {
    return (<div>{name}, age: {age}</div>);
}

Zamiana wartości w zmiennych

Ten akapit traktowałbym raczej jako bonus i pewnego rodzaju trick. Z mojego punktu widzenia takie zamiany wartości w kodzie to nic dobrego, jeżeli chodzi o logikę biznesową i może warto byłoby rozważyć zamianę kodu, aby takich sytuacji uniknąć. Ale może komuś się przyda… 🙂

let name = 100;
let age = 'Lukasz';
let temporary_value;

temporary_value = name;
name = age;
age = temporary_value;

console.log(name); // Lukasz
console.log(age); // 100

Bardziej „elegancko” możemy napisać ten fragment używając destrukturyzacji.

let name = 100;
let age = 'Lukasz';

[ name, age ] = [ age, name];
console.log(name); // Lukasz
console.log(age); // 100

Źródła:
Obraz: https://pixabay.com/pl/users/ramdlon-710044

Podobne posty