JavaScript Destructuring Object

Modern JavaScript

About Lesson

In this JavaScript lesson we are going to learn about JavaScript Destructuring Object, so destructuring helps in unpacking values from an array or an object. you can use with object and arrays, we can use it with arrays and objects.

OK now let’s create an example, in here we have an object. if you want to access to any item of the object than you need to use object name with dot operator, as we have done in here.

const personalInfo = {

    name: "Parwiz",
    lname:"Forogh",
    email:'par@gmail.com',
    phone:345666

}


const firstname = personalInfo.name;
const lname = personalInfo.lname

console.log(firstname);
console.log(lname)

const personalInfo = {

lname:"Forogh",

email:'par@gmail.com',

phone:345666

}

const firstname = personalInfo.name;

const lname = personalInfo.lname

console.log(firstname);

console.log(lname)

Now using destructuring, it is so easy and simple.

const personalInfo = {

    name: "Parwiz",
    lname:"Forogh",
    email:'par@gmail.com',
    phone:345666

}


const {name, email} = personalInfo


console.log(name);
console.log(email);

const personalInfo = {

lname:"Forogh",

email:'par@gmail.com',

phone:345666

}

const {name, email} = personalInfo

console.log(name);

console.log(email);

Also you can do array destructuring.

const displayInfo = function() {

  return ['Parwiz', 'Forogh', 'par@gmail.com']
}



let [name, lname] = displayInfo();

console.log(`Name is ${name} and lname is ${lname}`);

const displayInfo = function() {

return ['Parwiz', 'Forogh', 'par@gmail.com']

}

let [name, lname] = displayInfo();

console.log(`Name is ${name} and lname is ${lname}`);

JavaScript Destructuring Object Features

Destructuring is a feature in JavaScript that allows you to extract values from objects and arrays and assign them to variables. these are some features of object destructuring in JavaScript:

Basic Object Destructuring: You can use object destructuring to extract values from an object and assign them to variables with the same name as the object’s properties.

const person = {
  name: "John",
  age: 30,
  gender: "male"
};

const { name, age, gender } = person;

console.log(name);    // "John"
console.log(age);     // 30
console.log(gender);  // "male"

const person = {

age: 30,

gender: "male"

};

const { name, age, gender } = person;

console.log(name); // "John"

console.log(age); // 30

console.log(gender); // "male"

In this example person object is destructured to extract the name, age and gender properties and assign them to variables with the same names.

Default Values: You can provide default values for variables in case the value in the object is undefined.

const person = {
  name: "John",
  age: 30
};

const { name, age, gender = "unknown" } = person;

console.log(name);    // "John"
console.log(age);     // 30
console.log(gender);  // "unknown"

const person = {

age: 30

};

const { name, age, gender = "unknown" } = person;

console.log(name); // "John"

console.log(age); // 30

console.log(gender); // "unknown"

In this example, the gender property is not present in the person object, so the default value of “unknown” is used.

Renaming Variables: You can rename variables using object destructuring by providing a new name after a colon.

const person = {
  name: "John",
  age: 30,
  gender: "male"
};

const { name: fullName, age, gender: sex } = person;

console.log(fullName);  // "John"
console.log(age);       // 30
console.log(sex);       // "male"

const person = {

age: 30,

gender: "male"

};

const { name: fullName, age, gender: sex } = person;

console.log(fullName); // "John"

console.log(age); // 30

console.log(sex); // "male"

In this example, the name property is renamed to fullName and the gender property is renamed to sex.

In result we can say that object destructuring in JavaScript is powerful feature that can simplify code and make it more readable. It allows you to extract values from objects and assign them to variables using a concise and flexible syntax.