In this article, we are gonna learn about javascript destructuring that is introduced in ES6. You can learn all the features of javascript destructuring step by step with approx 17 types of examples.

The JavaScript destructuring assignment syntax is expressive, compact and more readable that makes it possible to “destructured” (upwarp) values from arrays or properties from objects, into different variables.

JavaScript Destructuring Expression (demo)

[a, b] = [50, 100];

console.log(a);
// expected output: 50

console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

We can use JavaScript Destructuring in so many different ways.

TLDR;

#1 Array destructuring

Array destructuring is very much similar and straight forward, you can use an array literal on the left-hand-side of an assignment expression. Each variable name on the array literal maps to the corresponding item at the same index on the destructured array.

#1.1 Basic variable assignment.

let foo = ['one', 'two', 'three'];

let [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

To read the full guide of 17 examples click here