Object Destructuring

object-destructuring.js

const personObj = {
    name: Alfonso Great
    email: "alfonso@great.com",
    age: 30
}

const { name, email, age } = personObj

object-destructuring1.js

const personObj = {
    name: {
        firstname: "Alfonso",
        lastname: "Thegreat"
    },
    email: "alfonso@great.com",
    age: 30
};

test.js

//THE POWER OF OBJECT DESTRUCTURING
//WHAT IS OBJECT DESTRUCTURING
//Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables. see //https://javascript.info/destructuring-assignment
//Like the word itself to destruct an object into pieces.

//WHY OBJECT DESTRUCTURING
//Cleaner extraction of pieces.
//functions may accept not the whole entity but rather the only piece(s) needed.


// const personObj = {
//     name: {
//         firstname: "Alfonso",
//         lastname: "Thegreat"
//     },
//     email: "",
//     age: 28
// };

// //We have personObj with name as object with its children 'firstname' and 'lastname',
// //then 'email' and lastly 'age'.

// //btw, throughout this article we used const.

// //The destructuring assignment syntax
// //{ n } = object;
// //{ } brackets is where we put the object(s) we wanted to be unpack from an object.
// //we said that 'brackets is where we put the object(s)'
// //what I am talking about "object(s)" can be an array/objects/strings.
// //alright?

// //We have here our first example.
// const { name } = personObj;
// console.log(name);
// //You should see a result like this:
// //{ firstname: 'Alfonso', lastname: 'Thegreat' }

// //If you wanted to get another one
// const { name, email } = personObj;
// console.log(name, email);
// //{ firstname: 'Alfonso', lastname: 'Thegreat' } 'alfonso@great.com'

//REST OPERATOR '...'
// //If you wanted to get the rest of the things inside without knowing what are those
// //then three dots '...' comes to the rescue
// const { name, ...other_info } = personObj;
// console.log(name, other_info);
// //{ firstname: 'Alfonso', lastname: 'Thegreat' } { email: 'alfonso@great.com', age: 28 }
// //as you may notice, 'other_info' is inside the brackets
// //it is treated as objects like this { other_info }

//DESTRUCTURE THE DESTRUCTURED OBJECT
// //'name' inside personObj is also an object with children 'firstname' and 'lastname'
// //see below on how we destruct its children
// const { name: { firstname, lastname }, email, age } = personObj;
// //now we can print it
// console.log(firstname, lastname, email, age);

// //REASSIGNING NEW VARIABLE
// //we can reassign new variable for example 'name' to 'newNameVar'
// //this is best used when name is already assigned
// const name = "Lydia"; //on this line you have 'name'
// const { name, email, age } = personObj; //another 'name' from personObj
// //so lets do this
// const { name: newNameVar, email, age } = personObj;
// //for this 'name':'newNameVar' is safe during runtime error
// //then use 'newNameVar' print it on the console.
// console.log(newNameVar, email, age);

//SETTING NEW KEY:VALUE
// //inside brackets allow us to set new key:value for example 'gender' = 'male'
// //but can't update the structure of the personObj
// const { name, email, age, gender = "male" } = personObj;
//console.log(newNameVar, email, age);
//can assign expresson or function calls
// const { name, email, age, gender = yourFunctionHere() } = personObj;

//SETTING DEFAULT VALUE
// //take note that in our personObj 'email' is "alfonso@great.com"
// //if email is not included in the said object
// const personObj = {
//     name: {
//         firstname: "Alfonso",
//         lastname: "Thegreat"
//     },
//     //email: "", COMMENT OUT TO REMOVE
//     age: 28
// };
// //then the email below will do it
// const { name, email = "default@email.com", age = 30 } = personObj;

//COMBINING COLON AND EQUALITY
//see 'email': 'newEmailVar'
// const { name, email: newEmailVar = "default@email.com", age = 30 } = personObj;

//see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment