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.
