Object Destructuring
Description
This allows for saving parts of arrays or objects into variables for easy usage. It helps in accessing items in arrays or objects and writing them in a short syntax.
Resource list:
I have gotten some knowledge from this article: More on object destructuring
Example 1: Extracting data from an object and assigning it to new variables
//Using ES5, it is done this way;
let person = {
name: "Peace",
country: "England",
job: "Developer"
};
let name = person.name;
let country = person.country;
let job = person.job
console.log(name); //result will be; Peace
console.log(country); //result will be; England
console.log(job); //result will be; Developer
//Using Object Destructuring in ES6
let person = {
name: "Peace",
country: "England",
job: "Developer"
};
let {name, country, job} = person;
console.log(name); //result will be; Peace
console.log(country); //result will be; England
console.log(job); //result will be; Developer
//Variables can be assigned to an object that hasn't been declared like this;
let {name, country, job} = {name: "Peace",country: "England", job: "Developer"};
Example 2: Declaring variables before being assigned
let person = {name: "Peace",country: "England", job: "Developer"};
let name, country, job;
{name, country, job} = person;
console.log(name); //result will be an error
//Without an initial declaration, () parenthesis is required around the assignment statement when using the object literal destructuring assignment.
//The reason for this is because the "{name, country, job}" is considered a block and not an object literal.
//To correct it, it is done this way;
let person = {name: "Peace",country: "England", job: "Developer"};
let name, country, job;
({name, country, job} = person);
console.log(name); //result will be; Peace
//Note that when using this syntax, the () should be preceded by a semi-colon or it might execute a function from the previous line.