JavaScript Object Destructuring

Javascript object destructuring is a technique that allows you to extract specific values from an object and assign them to variables in a more concise way. It can make your code more readable and easier to understand.

Basic Syntax

The basic syntax for object destructuring looks like this:

const { property1, property2 } = object;

This code creates two variables ( property1 and property2 ) and assigns values to them from the object based on their respective property names.

//For example create a object 
const user = {
    FirstName : "Raj",
    LastName : "Sahu",
}
//We access the object properties using dot notation
console.log(user.FirstName)
// Output -> Raj
//now the object destructuring that provides an alternative way to extract specific values from an object and assign them to variables in a more concise way. 
const {FirstName, LastName } = user
//Do not change properties name and object name.
console.log(FirstName) //Output -> Raj
console.log(LastName) //Output -> Sahu

//If you modify a property's name, the result will be undefined.
const user = {
    FirstName : "Raj",
    LastName : "Sahu",
}
console.log(user.FirstName) // Output -> Raj
//Properties Name change
const {FName, LName } = user
console.log(FName) // Output-> undefined

Renaming Variables

We can also rename the variables during the destructuring process by using a colon (:) followed by the new variable name.

//Syntax :-
const { property1: newName1, property2: newName2 } = object;
// For Example
const user = {
    FirstName : "Raj",
    LastName : "Sahu",
}

const {FirstName: FName, LastName: LName } = user
console.log(FName) // Output -> Raj

This code creates two variables (newName1 and newName2) and assigns values to them from the object based on their respective property names, but they are renamed in the process.

Default Values

We can also provide default values for variables in case the property is undefined in the object.

//Syntax :-
const { property1 = 'default1', property2 = 'default2' } = object;

This code creates two variables (property1 and property2) and assigns values to them from the object based on their respective property names. If the property is undefined in the object, the variables will be assigned the default values instead.

 //For Example
let user = {
    firstName: 'Raj',
    lastName: 'Sahu',
};
let { firstName, lastName, middleName = '', currentAge: age = 21 } = user;
console.log(middleName); // ''
console.log(age); // 28

Nested Object

We can also use object destructures to extract values from the nested object.

//Syntax :-
const { 
    property1, 
    nestedObject: { 
        nestedProperty1, 
        nestedProperty2 
    } 
} = object;

This code creates four variables (property1, nestedProperty1, nestedProperty2) and assigns values to them from the object based on their respective property names. The nestedObject property is also destructured to extract the values of nestedProperty1 and nestedProperty2.

// For Example
const user = {
    id: 101,
    name: {
        firstName: 'Raj',
        lastName: 'Sahu'
    }
};

//The following statement destructures the properties of the nested name object into individual variables:
const { 
    name: {
        firstName,
        lastName
    }
} = user;

console.log(firstName); // Output -> Raj
console.log(lastName); // Output -> Sahu

Conclusion

Javascript object destructuring is a powerful technique that can help you write more concise and readable code. It's worth taking the time to learn and use in your code.