Hello, friends👋🏼

I am Aryan Sharma and I hope you all are doing great and awesome!

This blog is about Destructuring. I hope you will learn from this.

Let's Get Started 🏫 💫

---

Destructuring assignment

You must have used Array and Object a lot in Javascript.

• Objects allow us to create a single entity that stores data items by key.

• Arrays allow us to gather data items into an ordered list.

Array destructuring

Here's an example of how array is destructured into variables.

let name = ["Aryan", "Agrim"]

let [firstName, surname] = name;

alert(firstName); // Aryan
alert(surname);  // Sharma

It does not modify the array, it destructures and not destructure array.

Let's experiment with more examples.

Ignore elements using commas...

let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

Looping with .entries()

We can use it with destructuring to loop over the keys-and-values of an object:

let user = {
  name: "John",
  age: 30
};

// loop over the keys-and-values
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

swap the value of variables

swapping the values of variables is easy using destructuring assignment:

let name = "Aryan";
let surname = "Sharma";

// Let's swap the values: make guest=Pete, admin=Jane
[name, surname] = [surname, name];

// now, name = surname // name = Sharma
// similarly surname = name, // surname = Aryan

rest operator ‘…’

Imagine while destructuring our array, we get many number of parameters

Example:

const [name1, name2, name3, name4] = ["Aryan", "Agrim, "Happy", "Hanny]

On the place of writing name3, name4 as elements in array, we could use ...rest there and still all values are accessible.

const [name1, name2, ...rest] = ["Aryan", "Agrim, "Happy", "Hanny];

console.log(rest[0]) // Happy
// rest is like a new array having values other than we already defined

Destructuring in Objects

let {var1, var2} = {var1:…, var2:…}

On the right side, there should be an object that already exists and that we wish to divide into variables. An object-like "pattern" for matching properties can be found on the left. That is, in the most basic scenario, a list of variable names in {...}.

let options = {
  title: "Globalization",
  width: 400,
  height: 600
};

let {title, width, height} = options;

alert(title);  // Globalization
alert(width);  // 400
alert(height); // 600

The related variables are given the options.title, options.width, and options.height properties.

Nested destructuring

Deeper sections of an object or array can be extracted using more intricate left-side patterns if it contains further nested objects and arrays.

The code below includes an array in the property items and another object in the property size.

To extract values from them, the assignment's pattern on the left side follows the same structure:

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

let {
  size: { 
    width,
    height
  },
  items: [item1, item2], 
  title = "Menu" 
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

All properties of options object except extra which is absent in the left part, are assigned to corresponding variables:

For the time being, it is the End of Blog ...

I hope you love this blog! 💖

See u in the next blog...Stay tuned🎶

Don't forget to follow me on:TwitterLinkedIn