Array destructuring simplified

ES6 came with some awesome features that make complex coding techniques easier to implement. One of these features is Array Destructuring, which we will be covering in this article.
Practice along : )

What is array destructuring?

What is destructuring?

Destructuring is the act of ‘Destruction’.

Destruction is the process of destroying (or reducing) something to its smallest pieces.

Array destructuring is a javascript expression that reduces arrays to smaller atoms where the contents of the array can be easily accessed and referenced by variables.
The reduction may only be to 1 level or to the least level (depending on the depth of the array and how far you want to destructure it).

Let’s look at an example array:

let awesomeArray = ["educative", "dot", "io"];

If we were to access the contents of this area without destructuring, we would have to use this method:

console.log(awesomeArray[2]);
// Expected output: io
let edu = awesomeArray[0];
console.log(edu);
// Expected output: educative

With array destructuring implemented, we would have:

let [ edu, var1,var2 ] = awesomeArray;
console.log(edu, var1, var2);
// Expected output:
// educative
// dot
// io

Interesting right?

Note that the spaces after the opening bracket and before the closing bracket do not mean anything. It’s for readability purposes only.

When destructuring, javascript follows the same pattern in which you declared your variables. In our code above, according to the pattern, edu gets the first object of the array while var2 gets the second object.

What if we want to skip objects, say, in a very long array?

Let’s take a look at another example:

let bigAwesomeArray = ['wow','javascript',5,6,'6', true, {title: "educative"}, 100];

To access ‘javascript’ and {title…}, we can simply do this:

let [,awesomeLanguage,,,,,var7] = bigAwesomeArray;
console.log(awesomeLanguage, var7)
// Expected Output:
// javascript
// {title: "educative"}

Note that a comma has to end the ‘awesomeLanguage’ variable while the remaining commas represent skipped objects.

Another Example

let deepArr = [
  "welcome",
  "to",
  [
    "class",
    "school",
    "office"
  ]

]

let [ ,,locations ] = deepArr;
let [ first,,third ] = locations;
console.log(first, third);
// Expected output
// class
// office

By now, you should understand the process of destructuring with specified levels right?

Well there’s more…

Assigning the rest of an array

let bigArr = ["name", 4,5,6]

From this array, we might need just the name and we might want the numbers to have their own array. We would achieve this in combination with the rest operator:

let [ important, ...secondArr ] = bigArr;
console.log(imporant, secondArr)
// Expected Output:
// name
// [4,5,6]

Read more on rest paramaters here.

Swapping variables

With array destructuring, you can create your own arrays from your variables and also swap them. Here’s how:

let first = "educative";
let second = "io";
[first, second] = [second, first];
console.log(first, second);
// Expected output
// io
// educative

By now, you should see how easy it is to access data from small and big arrays by reducing them through Array Destructuring.

There’s another destructuring technique, Object destructuring, which implements this same concept.
There’ll be a future article on that, so stay tuned : )