What is this Destructuring in JavaScript?

Take elements from Array or properties from Object and set them as local Variables. it possible to unpack values from arrays, or properties from objects, This is a very powerful way to assign the values as distinct Variables in ES6 (ES2015). We can mainly divide these destructuring into two parts.

1. Array Destructuring.
2. Object Destructuring.

In older javascript style we extract each element from an array and object with a line.

let array = [ 5, 6, 9, 1, 3, 4, 8];
const valOne = array[0];

console.log(valOne);
// output: 5
const planet = {  
name: 'Hosnian Prime',  
faction: 'New Republic',  
weather: 'Temperate'
};
const plantName = planet.name;
console.log(plantName); 
// Output: 'Hosnian Prime'

So, If there is 100 element of an object we to had to write 100 lines for extraction but using ES6 destructuring we can solve this in one line. With a single line, we may extract multiple elements from an object or an array.

const organizations = ['Pyke', 'Black Sun', 'Kanjiklub', 'Crimson'];
const [firstGang, secondGang, ...rest] = organizations;

console.log(firstGang); // output: "Pyke"

This technique can make your JS code more concise and more readable.

#es6 #javascript #ecmascript #object-destructuring