ES6: Array Destructuring

Photo by Eugene Zhyvchik on Unsplash

In this time, when we want to access the array properties, destructuring is essential for us. Destructuring assignment is a cool feature that came along with ES6. The good news is that array destructuring is very much similar and straightforward than object destructuring. In array destructuring, it works as left to right index.

Basic Destructuring:

const numbers = [1,2,3];
const [one, two, three] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

Here from the example, we have an array of numbers and we have three local variables for destructuring numbers array. Each of the variable mapped with the corresponding index(left to right) of the main array.

We can also declare variables before assigned

let one, two, three
const numbers = [1,2,3];
[one, two, three] = numbers;
console.log(one); //1
console.log(two); //2

or we can declare them inline,

const [one, two, three] = [1,2,3]
console.log(one); //1
console.log(two); //2

Default Values:

When we have three local variables for destructuring but in the array, we have only two items, it will give us an undefined

const numbers = [1,2];
const [one, two, three] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(three); //undefined

for handling this situation sometimes we need to put default values for the local variables.

const numbers = [1,2];
const [one = 11, two = 22, three = 33] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(three); //33

Nested Array Destructuring:

When we work with nested array destructuring the corresponding item must be an array in order to use a nested destructuring array literal to assign items in it to local variables.

const numbers = [1,2,3,[11,22,33]];
const [one,two,three,[eleven, twelve, thirteen ]] = numbers
console.log(one) //1
console.log(eleven) //11

Skipping Items:

When we work with a large amount of data sometimes we have to skip some items. It is possible to skip some items we don’t want to assign to local variables and only assign the ones we are interested in. And we can skip items by using the comma. One comma skips one item.

const numbers = [1,2,3];
const [,,three] = numbers;
console.log(three); //3

Rest Items:

Sometimes we may want to assign some items to a single variable, and we can do it by using spread operator

const numbers = [1,2,3,4,5,6,7,8,9];
const [one,two,three,...others] = numbers;
console.log(one);  //1
console.log(others); //[4, 5, 6, 7, 8, 9]

But it is important to note that, always use spread operator for the last items, otherwise it occurs an error.

Destructuring with Function:

We can also use the destructuring expression for function returned value.

function getNumberArray() {
  return [1,2,3,4,5,6,7,8,9]
} 
const [one,two,three,...others] = getNumberArray()
console.log(one);  //1
console.log(others); //[4, 5, 6, 7, 8, 9]

The array of Objects:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

console.log(array0, array1, array2); // 1, 2, 3

What is happening is that we’re first extracting each object from someArray then destructuring each object by extracting the data property and renaming it.

We can also use mapping for the more readable code.

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [array0, array1, array2] = someArray.map(item => item.data)
console.log(array0, array1, array2); //1,2,3

Swapping variables:

Two variables values can be swapped in one destructuring expression.

let one = 1;
let two = 2;
[one,two] = [two,one];
console.log(one);//2
console.log(two);//1

References:

1. ES6 Destructuring: The Complete Guide
2. Destructuring and parameter handling in ECMAScript 6
3. MDN web Docs: Destructuring assignment
4. Destructuring Assignment in ES6- Arrays
5. Stackoveflow: Destructuring array of objects in es6