ES6 Destructuring Arrays and Objects

In top right corner you see whether your browser already supports ES6 or not. Should you see a green stripe there, the scripts in this Blog may work, should it be red, they won't. Click on the stripe to make it disappear.

Destructuring sounds destructive, but it is not related to OO destructors in any way. Rather it is about copying array elements or object fields to variables or constants. ES6 has a special syntax for this, and it takes some time to get used to it. It is not similar to anything that existed in traditional programming languages.

Below, you find a list of buttons that each execute an ES6 destructuring example. Clicking on the button copies the script to the text area, where you can modify it, and execute it again. The description finally describes what is done in the script.

ES6 Destructuring Tests

Postface

This is how execution of dynamically fetched script code is done in ES6 (like from textarea above):

try {
    let script = "alert('Hello World');";
    const anonymousFunction = new Function(script);
    anonymousFunction();
}
catch (error) {
    alert(error);
}

First this script builds an array of numbers as constant. Then it assigns the contained array-elements to named variables by "destructuring". The let statement defines the variable names inside the square brackets (square brackets are used for array-destructuring). Leaving out an array-position is done by leaving out the name before the comma, so there are two consecutive commas. This is NOT a mistake, this is called "hole". No error happens in case there are more variable names than array elements.

The let statement can also define default values for the variables inside the square brackets. In this case, the variable c can not be assigned from a list element, and thus gets the value 99.

A special case of "destructuring" is "restructuring", for example swapping variable values.

The let statement creates variables a, b, c, and assigns values from an array to them. Then a right-side variable-grouping is assigned to a different grouping on the left side. Thus the variable values are swapped. You could have any kind of grouping on each side, just make sure that the used variable names exist before "restructuring" them.

Mind that ES6 currently fails when you have a statement without trailing semicolon, and the next line starts with a square bracket.

First this script builds an object with two fields. Then it assign these fields to named constants by "destructuring". The const statement defines the names of the constants inside curly braces (curly braces which are used for object-destructuring). These names must exactly match the names of the fields in the object. At end we have two constants with name lastName and firstName, their values where retrieved from the assigned object.

This script builds an object with just one field lastName. The let statement destructures that object, whereby firstName gets a default value in case there is no field of that name in the assigned object.

This is how you can access also fields in objects nested in parent-objects, and how you can declare default values for them. The let statement uses curly braces for each object nesting level. Mind that here the name of the local variable is on the right side of the colon, on the left side is the name of the object field.

The optional default value follows after the "=" operator. "Route 66" is not assigned, because there is such a value in the assigned object, but "Outhouse" replaces the missing object-field house.

The function foobar "destructures" its parameters first and second from a given array, thus it uses square brackets. So when we pass an array with elements "one" and "two" to it, its first parameter will have the value "one", and its second parameter the value "two".

The function foobar "destructures" its parameters firstName and lastName from a given object, thus it uses curly braces. So when we pass an object with fields firstName and lastName to it, these parameter will hold the values of the object fields with same name.