🤞🤞Motto of Article 🤞🤞

🖐️in this article, you’ll learn about JavaScript object destructuring which assigns properties of an object to individual variables.

🖐️Object destructuring is a valid JavaScript feature to extract properties from objects and bind them to variables.🤟🤟

🖐️What's better is, object destructuring can extract multiple properties in one statement, access properties from nested objects, and set a default value if the property doesn't exist. what a great thing n feels like magic😍😍

🤘without further delay, let's understand object destructuring with examples.🚲🚲

🤔Why object destructuring??

If you want to extract some properties of an object. In a pre-ES2015 environment, you would need to write the following code:

let person = {
    firstName: 'prajwal',
    lastName: 'Doe'
};

var firstName = person.firstName;
var lastName = person.lastName;

console.log(firstName); //prajwal
console.log(lastName); //doe

The property person.firstName value is assigned to the variablefirstName. Same way person.lastName value is assigned to lastName

such a way of accessing object properties requires lots of code.🔡🔡

that's when object destructuring syntax comes into the picture.😎😎

you can read a property and assign its value to a variable without duplicating the property name. More than that, you can read multiple properties from the same object in just one statement!.

let's understand the above code with object destructuring.

let person = {
  firstName: "prajwal",
  lastName: "Doe",
};

var { firstName, lastName } = person;

console.log(firstName); //prajwal
console.log(lastName); //doe

var { firstName, lastName } = person; is a object destructuring syntax.

👀 let's compare 2 approaches in one frame 👀

var firstName = person.firstName;
var lastName = person.lastName;
// object destructuring syntax
var { firstName, lastName } = person;

it's visible that object destructuring is handier because neither the property names nor the object variable is duplicated.

🤖Default values

If the destructured object doesn't have the property** specified** in the destructuring assignment, then the variable is assigned undefined. Let's see how it happens:

let person = {
  firstName: "prajwal",
  lastName: "zingare",
};

var { profession } = person;

console.log(profession); //undefined

see it shows undefined but we can give default values in object destructuring syntax lets see how🤠🤠

let person = {
  firstName: "prajwal",
  lastName: "zingare",
};

var { profession = ["Javascript Developer"] } = person;

console.log(profession); //["Javascript Developer"]

see the above code we assign the default value and now it is getting a value not undefined.

👽Aliases

what is aliase ??

As like above definition, it will follow same🤓🤓

If you'd like to create variables of different names than the properties, then you can use the aliasing feature of object destructuring.

let person = {
  firstName: "prajwal",
  lastName: "zingare",
};

var { firstName: fname } = person;

console.log(fname); //prajwal

we can create whatever alias we want according to our understanding.🎉🎉

🪆Nested object destructuring

In the previous examples, the objects were plain: the properties have primitive data types (e.g. strings).

Often objects can be nested in other objects. In other words, some properties can contain objects. In such case, you still can use the object destructuring and access properties from deep,just add more nested curly braces. Here's the basic syntax:

const { propA: { propB: { propC: { .... } } } } = object;

let's understand with an example.🎥🎥

let person = {
  firstName: "prajwal",
  lastName: "zingare",
  address: {
    city: "Nagpur",
  },
};

var {address: { city }} = person;

console.log(city); //Nagpur

The object destructuring var {address: { city }} = person; lets you access the property ``` city

# 😪Rest object after destructuring

The rest syntax is useful to collect the remaining properties after the destructuring:

let person = { firstName: "prajwal", lastName: "zingare", };

var { firstName, ...last } = person;

console.log(last); //{lastName:"zingare"}

The destructuring ```
var { firstName, ...last } = person;
``` extracts the property```firstName```.

At the same time, the remaining properties (last in this case) are collected into the variable ```
last : {lastName:"zingare"}```

# 💫Conclusion
✊Object destructuring is a powerful feature that lets you extract properties from an object and bind these values to variables.
✊Object destructuring assigns the properties of an object to variables with the same names by default.

🙏Hopefully, my post has helped you see how useful object destructuring is!💖💖

like the post and share it with your coder💻💻 buddies


![e7d39fb70c949b40b1b819580d8ce08a.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669520722816/HzeNwdmrK.jpg align="center")