JavaScript Object Destructuring

Destructuring Objects

Like destructuring arrays, destructuring objects helps you and makes your code cleaner and better, but it’s different from destructuring arrays, here is how to do it:

• First, for the whole explanation we will need this object, I used a sponge bob analogy for the object 🧽😁, so take a look at it and analyze it a little bit:

let heightInCm = 4;
const obj = {
  personName: 'spongeBob',
  personAge: 37,
  personAddress: '124 Conch Street, Bikini Bottom, Pacific Ocean',
  heightInCm: 10,
  personHobbies: [
    'Jellyfishing',
    'Cooking Krabby Patties',
    'Blowing Bubbles',
    'Karate',
  ],
  home: {
    type: 'pineapple',
    location: 'bikini bottom',
    details: {
      rooms: 3,
      uniqueFeature: "it's underwater and shaped like a pineapple!",
    },
  },
};

• now, let’s destruct two properties from the object:

const { personName, personAge } = obj;
console.log(personName, personAge); // spongeBob 37

• as you saw, to destruct an object you have to use {curly braces}, then inside it, write variable names that are exactly the same as the property names we want to retrieve in the object.

*You can also make variable names different from the property names, just right the new variable name after a colon:

const { personName: name, personAge: age } = obj;
console.log(name, age); // spongeBob 37

• as you can see, we changed personName to name & personAge to age.

*Default Values:

• we can also set default values, in case when we try to access a property that does not exist in the object, example:

const { DriversLicense = ['no'] } = obj;
console.log(DriversLicense);  // ['no']
// DriversLicense does not exist in obj, so the default value will be used.

* Mutating Variables while Destructuring Objects:

({ heightInCm } = obj);
console.log(heightInCm); // 10

• in this example, if you look back you will find out that heightInCm = 4 outside the object, and we wanted to assign the value inside the object to the heightInCm outside, so we did it like a normal destructuring, BUT JavaScript expects a code block when starting with { } outside a function, so we wrap the statement in parentheses to make it valid.

*Nested object destructuring:

// firstway:  Extracting the Entire Nested Object 

const { details } = obj.home;
console.log(details); // { rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// second way: Extracting Specific Properties
const {
  home: { details }} = obj;

console.log(details); // {rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// third way
const {details: { rooms, uniqueFeature }} = obj.home;

console.log(rooms, uniqueFeature); // 3 "it's underwater and shaped like a pineapple!"

• Best for clarity: The first way can be better when you're working with larger objects and prefer to keep things clear by extracting a whole object first.
• Best for efficiency: The third way is often the best if you're only interested in specific properties from a deeply nested object. It's concise and avoids creating unnecessary variables.

*Thanks for reading, hope you understand everything, if you have any questions feel free to ask 😊