JavaScript introduced destructuring in ECMAScript 2015 (ES6), revolutionizing the way developers extract values from arrays and objects

What is Destructuring?

Destructuring is a syntax that allows you to unpack values from arrays or properties from objects into distinct variables. It eliminates the need for traditional ways of accessing values, such as using the bracket [] or dot .

Destructuring with Arrays

const [anime, cartoon] = ["onePeice", "chotaBheem"];

console.log(anime); //onePeice
console.log(cartoon); //chotaBheem

Destructuring with Objects

const anime ={
  animeName :"OnePeice",
  originalName: "Monkey D. Luffy",
  Age :19,
  fruitPower : "Gomu Gomu no Mi"
}

const {animeName ,originalName:name,Age,fruitPower:power} = anime

console.log(animeName) //OnePeice
console.log(name) // Monkey D. Luffy
console.log(power) //Gomu Gomu no Mi

Destructuring with Functions

function animeWiki({name,power}){
  console.log(`anime is ${name} and power is ${power}` )
}

let anime ={name: "naruto", power: "9_tail"} 

console.log(animeWiki(anime)) //anime is naruto and power is 9_tail

In the next article, we will see how to use destructring with API response.

Thank you for reading 😊

---

Rakesh Kumar