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 = {

name: "Parwiz",

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 = {

name: "Parwiz",

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}`);

Thank you for visiting my website! If you enjoyed the free courses, please consider supporting my works on Patreon.

Exercise Files

No Attachment Found