How to perform Array Destructuring in JavaScript ES6

JavaScript ES6 have a few cool implementation and one of them is array destructuring. This feature in a nutshell provide developer with the capability to write shorter codes to access array internal values. There is also an illustration of object destructuring here.

What is Array Destructuring

Array destructuring is a syntax that gives the ability to extract the values from data types like array from their syntax.

Below shows how we access an array in the past. We will need to access one index at a time and assign it to another variable line by line.

var fruitBasket = [10, 20, 30];

var numOfApple = fruitBasket[0];
var numOfOrange = fruitBasket[1];
var numOfPear = fruitBasket[2];

// 10
// 20
// 30

With destructuring, we can assign the value at an index directly on the same line of code. This way, we reduce the number of lines of code and also improve code readability at the same time!

const fruitBasket = [10, 20, 30];
const [ numOfApple, numOfOrange, numOfPear ] = fruitBasket;

console.log(numOfApple);
console.log(numOfOrange);
console.log(numOfPear);

// 10
// 20
// 30

Other Usage of Array Destructuring

Now that we have shown the basics, let’s move on to some other more complicated examples. We will explain them one by one.

If there is any extra variables in the destructuring process, the extras will become undefined.

const fruitBasket = [10, 20, 30];
const [ numOfApple, numOfOrange, numOfPear, numOfUnknown ] = fruitBasket;

console.log(numOfApple);
console.log(numOfOrange);
console.log(numOfPear);
console.log(numOfUnknown);

// 10
// 20
// 30
// undefined

If we have more values than it can assign, it will ignore the rest of them. Other way is we can put them into another array by using a rest operator.

const fruitBasket = [10, 20, 30, 40, 50, 60];
const [ numOfApple, numOfOrange, numOfPear ] = fruitBasket;

console.log(numOfApple);
console.log(numOfOrange);
console.log(numOfPear);

// 10
// 20
// 30

const [ apple, orange, pear, ...unknown ] = fruitBasket;

console.log(apple);
console.log(orange);
console.log(pear);
console.log(unknown);

// 10
// 20
// 30
// [40, 50, 60]

In order to ensure that there are some default value assigned if nothing is destructured, we can add in a default value.

const fruitBasket = [10];
const [ numOfApple, numOfOrange = 0, numOfPear = 0 ] = fruitBasket;

console.log(numOfApple);
console.log(numOfOrange);
console.log(numOfPear);

// 10
// 0
// 0

Array destructuring also offers an easier method if you want to swap the variables at the same time. There is no need to define a third variable.

How it works here is that the values will be put into an array first. Then base on the destructuring, it will assign the value in the array to the corresponding variable name index.

let numOfApple = 10;
let numOfOrange = 20;

[ numOfOrange, numOfApple ] = [ numOfApple, numOfOrange ];

console.log(numOfApple);
console.log(numOfOrange);

// 20
// 10

Conclusion

Array destructuring is something that can be very handy. Especially when we are receiving an array with a set of values inside and want to manipulate them individually. Thus, use it well and you will do more with less code!

More reference here!