JavaScript & ES6 - Destructuring Assignment

Zadatak za destrukturisanje (Destructuring Assignment)

Zadatak destrukturisanja izraz je koji olakšava izdvajanje vrijednosti iz nizova ili svojstava objekata u različite varijable davanjem kraće sintakse. Postoje dvije vrste izraza zadataka za destrukturisanje - dodjela za destrukturisanje niza i objekata. Pa, da vidimo kako svaki od njih tačno radi:


Zadatak za destrukturisanje niza

Prije ES6, da bismo dobili pojedinačnu vrijednost niza, morali smo napisati nešto ovako: 

// ES5 sintaksa
var fruits = ["Jabuka", "Banana"];

var a = fruits[0];
var b = fruits[1];
alert(a); // Jabuka
alert(b); // Banana
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pristup pojedinačnim elementima niza u starijim verzijama JavaScript-a</title>
</head>
<body>
    <script>
    // ES5 sintaksa
    var fruits = ["Jabuka", "Banana"];
    
    var a = fruits[0];
    var b = fruits[1];
    document.write(a); // Jabuka
    document.write("<br>");
    document.write(b); // Banana
    </script>
</body>
</html>

U ES6, možemo učiniti istu stvar u samo jednom redu pomoću zadatka za destrukturisanje niza: 

// ES6 sintaksa
let fruits = ["Jabuka", "Banana"];

let [a, b] = fruits; // Zadatak za destrukturisanje niza

alert(a); // Jabuka
alert(b); // Banana
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Zadatak za destrukturisanje niza</title>
</head>
<body>
    <script>
    // ES6 sintaksa
    let fruits = ["Jabuka", "Banana"];
    
    let [a, b] = fruits; // Zadatak za destrukturisanje niza
    
    document.write(a); // Jabuka
    document.write("<br>");
    document.write(b); // Banana
    </script>
</body>
</html>

Operator rest možete koristiti i u zadatku za destrukturisanje niza, kao što je prikazano u sljedećem primjeru: 

// ES6 syntax
let fruits = ["Jabuka", "Banana", "Mango"];

let [a, ...r] = fruits;

alert(a); // Jabuka
alert(r); // Banana,Mango
alert(Array.isArray(r)); // true
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Korištenje Rest Operatora za destrukturisanje niza</title>
</head>
<body>
    <script>
    // ES6 sintaksa
    let fruits = ["Jabuka", "Banana", "Mango"];
    
    let [a, ...r] = fruits;
    
    document.write(a); // Jabuka
    document.write("<br>");
    document.write(r); // Banana,Mango
    document.write("<br>");
    document.write(Array.isArray(r)); // true
    </script>
</body>
</html>

Zadatak destrukturisanja objekta

U ES5 za izdvajanje vrijednosti svojstava objekta moramo napisati nešto poput ovoga: 

// ES5 sintaksa
var person = {name: "Milos", age: 29};

var name = person.name;
var age = person.age;

alert(name); // Milos
alert(age); // 29
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pristup vrijednostima svojstava objekta u starijim verzijama JavaScript-a</title>
</head>
<body>
    <script>
    // ES5 sintaksa
    var person = {name: "Milos", age: 29};
    
    var name = person.name;
    var age = person.age;
    
    document.write(name); // Milos
    document.write("<br>");
    document.write(age); // 29
    </script>
</body>
</html>

Ali u ES6 možete izvući vrijednosti svojstva objekta i dodijeliti ih varijablama kao što je prikazao u sljedećem primjeru: 

// ES6 sintaksa
let person = {name: "Milos", age: 29};

let {name, age} = person; // Zadatak za destrukturisanje objekata

alert(name); // Milos
alert(age); // 29
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Zadatak za destrukturisanje objekata</title>
</head>
<body>
    <script>
    // ES6 sintaksa
    let person = {name: "Milos", age: 29};
    
    let {name, age} = person; // Zadatak za destrukturisanje objekata
    
    document.write(name); // Milos
    document.write("<br>");
    document.write(age); // 29
    </script>
</body>
</html>

Većina funkcija o kojima smo gore govorili podržane su u najnovijoj verziji glavnih web pretraživača kao što su: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari itd.