Introduction
The term “destruction” means “extracting” data from a data structure (object or array) and creating new smaller structures that are assigned values based on the “extracted” data.
Before ES2015, it was necessary to write code that would perform destructuring, but luckily with the new JavaScript standard came a syntax that allows the JavaScript compiler to automatically perform this work for us. This syntax is called “destructuring assignment”, and it does exactly what the name says, it assigns values from a structure to new variables.
Example
“Manual” destructuring
|
1 2 3 4 5 |
var largeStructure = [1, 2, 3]; // Manuelno destruktuiranje var a = largeStructure[0]; var b = largeStructure[1]; var c = largeStructure[2]; |
New ES6 syntax
|
1 2 3 4 5 6 7 8 |
var largeStructure = [1, 2, 3]; // Automatsko destruktuiranje var a, b, c; [a,b,c] = largeStructure; console.log(a); // Returns1 console.log(b); // Returns2 console.log(c); // Returns3 |
NOTE: [a,b,c] from the previous example new syntax NOT AN ARRAY ! ! !
When square brackets (or curly braces) are to the left of the equals sign, it indicates a variable assignment pattern. They allow us to define to the JavaScript compiler how and under which variable name to store destructured values.
Array Destructuring
Template for accepting “excess” data
If we don’t know the number of destructed values, and they are important to us, e.g. only the first two we will use rest parameter:
|
1 2 3 4 5 6 7 |
var largeStructure = [1, 2, 3, 4, 5, 6]; var first, second, rest; [first, second, ...rest] = largeStructure; console.log(first); // Returns1 console.log(second); // Returns2 console.log(rest); // Returnsniz [3, 4, 5, 6] |
Make sure that the rest parameter must be the last in the template, otherwise the compiler will throw an error!
Value missing from template
If there are fewer destructible elements compared to the template, then the excess variables from the template are assigned the value “undefined”.
|
1 2 3 4 5 6 |
var largeStructure = [1, 2]; [a,b,c] = largeStructure; console.log(a); // Returns: 1 console.log(b); // Returns: 2 console.log(c); // Returns: undefined |
Total lack of value
A specific case is when the structure being destroyed has no value, ie. when we destroy a structure that has no value. The compiler reports an error because the structure is not iterable. This case occurs if the function from which the iterator is expected returns “null” for some reason:
|
1 2 3 4 5 |
function largeStructure () { return null; } var temp = largeStructure(); [a,b,c] = temp; // Returns: Uncaught TypeError: temp is not iterable |
Avoiding program crashes and unpleasant situations is solved as follows:
|
1 2 3 4 5 6 7 8 9 |
function largeStructure () { return null; } var temp = largeStructure(); [a,b,c] = temp || []; console.log(a); // Returns: undefined console.log(b); // Returns: undefined console.log(c); // Returns: undefined |
Default values
If we want to ensure that the variable from the template has a value even if it does not have a destructed value, then we define a default value in the template:
|
1 2 3 4 5 6 7 8 |
var largeStructure = [undefined, undefined, 100, 4]; var first, second, rest; [first=1, second, treci=3, cetvrti] = largeStructure; console.log(first); // Returns1 console.log(second); // Returnsundefined console.log(treci); // Returns100 console.log(cetvrti); // Returns4 |
Variable replacement
Destructing can also be useful if we want to replace the values of two variables:
|
1 2 3 4 5 6 |
var a = 1; var b = 3; [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1 |
Ignoring destructed values
By simply not defining a variable name within the template, we can ignore the destructed value:
|
1 2 3 4 5 6 |
var largeStructure = ["Pera", 1973, "Perić"]; var first, second, rest; [firstName,, lastName] = largeStructure; console.log(firstName); // ReturnsPera console.log(lastName); // ReturnsPeric |
Destructing nested arrays
|
1 2 3 4 5 6 7 8 9 10 |
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 |
Destructing an object
|
1 2 3 4 5 6 |
var objekat = {firstName: "Pera", lastName: "Peric"}; // Generating new variables: var {firstName, lastName} = objekat; console.log(firstName); // "Pera" console.log(lastName); // "Peric" |
Assigning new variable names
|
1 2 3 4 5 |
var objekat = {firstName: "Pera", lastName: "Peric"}; var {firstName: imeOsobe, lastName: prezimeOsobe} = objekat; console.log(imeOsobe); // "Pera" console.log(prezimeOsobe); // "Peric" |
Defining default values
|
1 2 3 4 |
var {a = 10, b = 5} = {a: 3}; console.log(a); // 3 console.log(b); // 5 |
Template for accepting excess variables
|
1 2 3 4 5 6 7 |
var objekat = {firstName: "Pera", lastName: "Peric", posao: "Programer", ozenjen: true}; // Generating new variables: var {firstName, lastName, ...ostatakPodataka} = objekat; console.log(firstName); // "Pera" console.log(lastName); // "Peric" console.log(ostatakPodataka); // {posao: "Programer", ozenjen: true} |
Destructing nested objects:
|
1 2 3 4 5 6 7 8 9 |
var radnik = { name: 'Pera', sektor: { pozicija: 'Programer' } } var {name, sektor: {pozicija}} = radnik console.log('Radnik: ' + name + ', posao: ' + pozicija); // "Radnik: Pera, posao: Programer" |
Destructing an object by for-of iteration
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var radnici = [ { name: 'Pera', sektor: { pozicija: 'Programer', } }, { name: 'Mika', sektor: { pozicija: 'Cleaner', } } ]; for (var {name: imeRadnika, sektor: {pozicija: nazivPozicije}} of radnici) { console.log('Radnik: ' + imeRadnika + ', pozicija: ' + nazivPozicije); } // "Radnik: Pera, pozicija: Programer" // "Worker: Mika, position: Cleaner" |