Destruktuiranje u JavaScriptu

Uvod

destruktuiranje niza

Pojam “destruktuiranje” podrazumeva “izvlačenje” podataka iz strukture podataka (objekat ili niz) i pravljenje novih manjih struktura kojima se dodeljuju vrednosti na osnovu “izvučenih” podataka.
Pre ES2015 je bilo neophodno da se napiše kod koji bi vršio destruktuiranje ali srećom sa novim JavaScript standardom je došla i sintaksa koja omogućava da JavaScript kompajler ovaj posao automatski izvršava umesto nas. Ova sintaksa se naziva “destructuring assignment”, i upravo predstavlja to što joj sam naziv govori, dodeljuje vrednosti iz neke strukture novim promenjivima.

Primer

“Manuelno” destruktuiranje

var velikaStruktura = [1, 2, 3];
// Manuelno destruktuiranje
var a = velikaStruktura[0];
var b = velikaStruktura[1];
var c = velikaStruktura[2];

var velikaStruktura = [1, 2, 3];

// Manuelno destruktuiranje

var a = velikaStruktura[0];

var b = velikaStruktura[1];

var c = velikaStruktura[2];

Nova ES6 sintaksa

var velikaStruktura = [1, 2, 3];
// Automatsko destruktuiranje
var a, b, c;
[a,b,c] = velikaStruktura;

console.log(a);      // Vraća 1
console.log(b);      // Vraća 2
console.log(c);      // Vraća 3

var velikaStruktura = [1, 2, 3];

// Automatsko destruktuiranje

var a, b, c;

[a,b,c] = velikaStruktura;

console.log(a); // Vraća 1

console.log(b); // Vraća 2

console.log(c); // Vraća 3

NAPOMENA: [a,b,c] iz prethodnog primera nove sintakse NIJE NIZ ! ! !
Kada se uglaste zagrade (ili vitičaste) nalaze sa leve strane znaka jednakosti, to ukazuje na patern (šablon) za dodeljivanje promenjivih. One nam omogućavaju da definišemo JavaScript kompajleru kako i pod kojim nazivom varijabli da sačuva destrukturisane vrednosti.

Destrukturiranje niza

Šablon za prihvatanje “viška” podataka

Ukoliko ne znamo broj destruktuiranih vrednosti, a bitna su nam npr. samo prva dva koristićemo rest parametar:

var velikaStruktura = [1, 2, 3, 4, 5, 6];
var prvi, drugi, ostali;
[prvi, drugi, ...ostali] = velikaStruktura;

console.log(prvi);      // Vraća 1
console.log(drugi);     // Vraća 2
console.log(ostali);    // Vraća niz [3, 4, 5, 6]

var velikaStruktura = [1, 2, 3, 4, 5, 6];

var prvi, drugi, ostali;

[prvi, drugi, ...ostali] = velikaStruktura;

console.log(prvi); // Vraća 1

console.log(drugi); // Vraća 2

console.log(ostali); // Vraća niz [3, 4, 5, 6]

Obratire pažnu da rest parametar mora da bude poslednji u šablonu, inače će kompajler izbaciti grešku!

Manjak vrednosti u odnosu na šablon

Ukoliko ima manje destruktuiranih elemenata u odnosu na šablon, onda se višku promenjivih iz šablona dodeljuje vrednost “undefined”.

var velikaStruktura = [1, 2];
[a,b,c] = velikaStruktura;

console.log(a);  // Vraća: 1
console.log(b);  // Vraća: 2
console.log(c);  // Vraća: undefined

var velikaStruktura = [1, 2];

[a,b,c] = velikaStruktura;

console.log(a); // Vraća: 1

console.log(b); // Vraća: 2

console.log(c); // Vraća: undefined

Totalni nedostatak vrednosti

Specifičan slučaj je kada struktura koja se destruktuira nema vrednosti tj. kada destruktuiramo strukturu koja nema ni jednu vrednost. Kompajler prijavljuje grešku jer struktura nije iterabilna. Ovakav slučaj se javlja ako funkcija od koje se očekuje iterator vrati iz nekog razlog “null”:

function velikaStruktura () {
  return null;
}
var temp = velikaStruktura();
[a,b,c] = temp;               // Vraća: Uncaught TypeError: temp is not iterable

function velikaStruktura () {

return null;

}

var temp = velikaStruktura();

[a,b,c] = temp; // Vraća: Uncaught TypeError: temp is not iterable

Izbegavanje pucanja programa i neprijatne situacija se rešava na sledeći način:

function velikaStruktura () {
  return null;
}
var temp = velikaStruktura();
[a,b,c] = temp || [];

console.log(a);  // Vraća: undefined
console.log(b);  // Vraća: undefined
console.log(c);  // Vraća: undefined

function velikaStruktura () {

return null;

}

var temp = velikaStruktura();

[a,b,c] = temp || [];

console.log(a); // Vraća: undefined

console.log(b); // Vraća: undefined

console.log(c); // Vraća: undefined

Defaultne vrednosti

Ukoliko želimo da obezbedimo da promenjiva iz šablona ima vrednost čak ako joj se i ne postoji destruktuirana vrednost, tada u šablonu definišemo defaultnu vrednost:

var velikaStruktura = [undefined, undefined, 100, 4];
var prvi, drugi, ostali;
[prvi=1, drugi, treci=3, cetvrti] = velikaStruktura;

console.log(prvi);      // Vraća 1
console.log(drugi);     // Vraća undefined
console.log(treci);     // Vraća 100
console.log(cetvrti);   // Vraća 4

var velikaStruktura = [undefined, undefined, 100, 4];

var prvi, drugi, ostali;

[prvi=1, drugi, treci=3, cetvrti] = velikaStruktura;

console.log(prvi); // Vraća 1

console.log(drugi); // Vraća undefined

console.log(treci); // Vraća 100

console.log(cetvrti); // Vraća 4

Zamena promenjivih

Destruktuiranje može da bude korisno i ukoliko želimo da zamenimo vrednosti dve promenjive:

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

var a = 1;

var b = 3;

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

console.log(a); // 3

console.log(b); // 1

Ignorisanje destruktuiranih vrednosti

Jednostavnim ne definisanjem naziva promenjive u okviru šablona, možemo da ignorišemo destruktuiranu vrednost:

var velikaStruktura = ["Pera", 1973, "Perić"];
var prvi, drugi, ostali;
[ime,, prezime] = velikaStruktura;

console.log(ime);         // Vraća Pera
console.log(prezime);     // Vraća Peric

var velikaStruktura = ["Pera", 1973, "Perić"];

var prvi, drugi, ostali;

[ime,, prezime] = velikaStruktura;

console.log(ime); // Vraća Pera

console.log(prezime); // Vraća Peric

Destruktuiranje ugnježdenih nizova

var velikaStruktura = [1, 2, [3,4,5],6];
var prvi, drugi, treci, cetvrti;
[prvi, drugi, [treci, cetvrti, peti], sesti] = velikaStruktura;

console.log(prvi);      // Vraća 1
console.log(drugi);     // Vraća 2
console.log(treci);     // Vraća 3
console.log(cetvrti);   // Vraća 4
console.log(peti);      // Vraća 5
console.log(sesti);     // Vraća 6

var velikaStruktura = [1, 2, [3,4,5],6];

var prvi, drugi, treci, cetvrti;

[prvi, drugi, [treci, cetvrti, peti], sesti] = velikaStruktura;

console.log(prvi); // Vraća 1

console.log(drugi); // Vraća 2

console.log(treci); // Vraća 3

console.log(cetvrti); // Vraća 4

console.log(peti); // Vraća 5

console.log(sesti); // Vraća 6

Destrukturiranje objekta

var objekat = {ime: "Pera", prezime: "Peric"};
// Grenerisanje novih promenjivih:
var {ime, prezime} = objekat;

console.log(ime); // "Pera"
console.log(prezime); // "Peric"

var objekat = {ime: "Pera", prezime: "Peric"};

// Grenerisanje novih promenjivih:

var {ime, prezime} = objekat;

console.log(ime); // "Pera"

console.log(prezime); // "Peric"

Dodeljivanje novih imena promenjivih

var objekat = {ime: "Pera", prezime: "Peric"};
var {ime: imeOsobe, prezime: prezimeOsobe} = objekat;

console.log(imeOsobe); // "Pera"
console.log(prezimeOsobe); // "Peric"

var objekat = {ime: "Pera", prezime: "Peric"};

var {ime: imeOsobe, prezime: prezimeOsobe} = objekat;

console.log(imeOsobe); // "Pera"

console.log(prezimeOsobe); // "Peric"

Definisanje defaultnih vrednosti

var {a = 10, b = 5} = {a: 3};

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

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3

console.log(b); // 5

Šablon za prihvatanje viška promenjivih

var objekat = {ime: "Pera", prezime: "Peric", posao: "Programer", ozenjen: true};
// Grenerisanje novih promenjivih:
var {ime, prezime, ...ostatakPodataka} = objekat;

console.log(ime);             // "Pera"
console.log(prezime);         // "Peric"
console.log(ostatakPodataka); // {posao: "Programer", ozenjen: true}

var objekat = {ime: "Pera", prezime: "Peric", posao: "Programer", ozenjen: true};

// Grenerisanje novih promenjivih:

var {ime, prezime, ...ostatakPodataka} = objekat;

console.log(ime); // "Pera"

console.log(prezime); // "Peric"

console.log(ostatakPodataka); // {posao: "Programer", ozenjen: true}

Destruktuiranje ugnježdjenih objekata:

var radnik = {
    name: 'Pera',
    sektor: {
      pozicija: 'Programer'
    }
}

var {name, sektor: {pozicija}} = radnik
console.log('Radnik: ' + name + ', posao: ' + pozicija); // "Radnik: Pera, posao: Programer"

var radnik = {

sektor: {

pozicija: 'Programer'

}

var {name, sektor: {pozicija}} = radnik

console.log('Radnik: ' + name + ', posao: ' + pozicija); // "Radnik: Pera, posao: Programer"

Destruktuiranje objekta for-of iteracijom

var radnici = [
  {
    name: 'Pera',
    sektor: {
      pozicija: 'Programer',
    }
  },
  {
    name: 'Mika',
    sektor: {
      pozicija: 'Čistač',
    }
  }
];

for (var {name: imeRadnika, sektor: {pozicija: nazivPozicije}} of radnici) {
  console.log('Radnik: ' + imeRadnika + ', pozicija: ' + nazivPozicije);
}
// "Radnik: Pera, pozicija: Programer"
// "Radnik: Mika, pozicija: Čistač"

var radnici = [

{

sektor: {

pozicija: 'Programer',

}

{

sektor: {

pozicija: 'Čistač',

}

];

for (var {name: imeRadnika, sektor: {pozicija: nazivPozicije}} of radnici) {

console.log('Radnik: ' + imeRadnika + ', pozicija: ' + nazivPozicije);

}

// "Radnik: Pera, pozicija: Programer"

// "Radnik: Mika, pozicija: Čistač"

Podelite:

Web Programiranje

Skripte

Uvod

Primer

“Manuelno” destruktuiranje

Nova ES6 sintaksa

Destrukturiranje niza

Šablon za prihvatanje “viška” podataka

Manjak vrednosti u odnosu na šablon

Totalni nedostatak vrednosti

Defaultne vrednosti

Zamena promenjivih

Ignorisanje destruktuiranih vrednosti

Destruktuiranje ugnježdenih nizova

Destrukturiranje objekta

Dodeljivanje novih imena promenjivih

Definisanje defaultnih vrednosti

Šablon za prihvatanje viška promenjivih

Destruktuiranje ugnježdjenih objekata:

Destruktuiranje objekta for-of iteracijom

Ostavite komentar