The Destructuring introduced new features of ES6.JavaScript provides a
mechanism to handle the array and properties of objects in a much more innovative
way. this mechanism is called destructuring. destructuring means implies a
complex structure into the simpler parts.
Destructuring allows us to extract multiple properties from an object or an Array. It is
a special syntax that allows us to unpack an Array or object into a bunch of variables.
Destructuring makes your code more readable, easily maintainable
, and manageable. It saves the most valuable thing – Time.

Before ES6: –

const Biodata= {
name:”Ajay”,
contact:8929939922,
location:”Agra”
}
let name= Biodata.name;
let contact = Biodata. contact;
let location = Biodata. location;
console.log(name); // => Ajay
console.log(contact); // => 8929939922
console.log(location); // => Agra

 

Now IN ES6: –

const biodata={
name:”ajay”,
contact:7839738292,

location:”Agra Up”,
}
const {name, contact, location} = biodata; // destructuring assignment
console.log(name); // => Ajay
console.log(contact); // => 7839738292
console.log(location); // => Agra Up

 

Array Destructuring: –

Array Destructuring means if you want to extract data from an array, it’s quite simple
using the destructuring assignment. Array destructuring extracts values from an array.

Example: –

const language = [“JavaScript”,”React Js”,”Node Js”,”Java”];
const [lang1, lang2, lang3, lang4] = language;
console.log(lang1); // => JavaScript
console.log(lang2); // => React Js
console.log(lang3); // => Node Js
console.log(lang4); // => Java

 

Spread operator with Array Destructuring: –

Spread means spreading or expending. Spread operator syntax is three (…) dots.
The spread operator has spread out all the elements of an array or object.

Example: –

const arr = [“A”, “B”, “C”,”D”, “E”];
const [one,two,...remain] =arr;
console.log(one); // A
console.log(two); //B
console.log(remain); // [“C”,”D”,”E”]

 

This is useful for getting a new array with only some elements removed. We can
also, use the spread operator to combine multiple arrays together and copy of the
array.

Object Destructuring: –

Object Destructuring is a useful JavaScript feature to extract properties from
objects. Object destructuring can extract multiple properties in one statement and
also can access properties from nested objects.

Example: –

const note = { // object we want to destructure
id:1,
name:’abc’
course:’xyz’,
location:’agra’,
}
const {id,name,course,location} = note; //destructure object into our variable
console.log(id) // 1
console.log(name) //abc
console.log(course) // xyz
console.log(location) // agra

 

Note: – const {id,name,course,location} = note is an object destructuring . This
statement defines the variable id, name, course and location.

Mixed Destructuring: –

There are cases when you are working with a pretty complex object and Array
structure.

Example: –

const person = {
name:”neeraj”,

age:25,
location: {
country:”india”,
city:”delhi”,
distance: [100,200]
}
}
const {name,location:{country,city,distance:[one,two]}} =person;
console.log(`I am ${name} from ${city},${country}. Distance(${one} to
${two})`)

 

Output: –

I am Neeraj from Delhi, India. Distance(100 to 200)

Summary: –

Now you have learned how to work destructing in an array and objects.
It helps create variables by extracting the Array and object’s properties in a
much simpler way. If you are working on a framework/library like ReactJs, Angular, or Vue, you will be using a lot of Array and object destructing.