20 Destructuring

The destructuring assignment is a JavaScript expression that unpacks values from arrays or objects, into distinct variables.

• This is a ES6 feature and isn't available in prior versions.

1. Example

// Object destructuring
const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

const { firstName, lastName, age } = person;

console.log(firstName); // Output: John
console.log(lastName); // Output: Doe
console.log(age); // Output: 30

// Array destructuring
const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

2. Array Destructuring

Without Destructuring

Lets say we have an array and we need to assign values to variables.

const names = ["Kareena","Deepika","Alia","Priyanka"];
const kareena = names[0];
const deepika = names[1];
console.log(`${kareena} & ${deepika}`);

Array Destructuring

Please note here, in the second line the kareena & deepika are simply variable names and we can give any name.

const names = ["Kareena","Deepika","Alia","Priyanka"];
const [kareena,deepika] = names;
console.log(`${kareena} & ${deepika}`);

3. Object Destructuring

Without Destructuring

const actress = {
    fname: "Aishwarya",
    surname: "Rai",
    gender: "female",
    address:{
       state : "Maharashtra", 
       country: "India",
         location:{
            building:"jalsa",
            street:"Andheri west"
         }  
    }
}

const fname = actress.fname;
const gender = actress.gender;
const state = actress.address.state;
const building = actress.address.location.building;

console.log(fname);
console.log(gender);
console.log(state);
console.log(building);

Object Destructuring

const {fname, gender} = actress;
console.log(fname);
console.log(gender);

4. Fetch selected values

Let's say we have four elements in an array and we want to fetch only first and fourth elements.

const names = ["Kareena","Deepika","Alia","Priyanka"];
const[kar, , ,pri] = names;
console.log(`${kar} & ${pri}`);

5. Along with spread operator

Let's say we need to assign couple of names to variables and rest of the names to an array

const names = ["Kareena","Deepika","Alia","Priyanka"];
const [kar,deep,...restOfNames] = names;
console.log(`${kar} & ${deep}`); 
console.log(restOfNames);

6. Extracting Nested Object Values

const {fname, gender, address: {country : thecountry} } = actress; 
const {address: {location: { building: thebuilding}} } = actress;
console.log(fname);
console.log(gender);
console.log(thecountry);
console.log(thebuilding);

Naming Convention

• If we notice above examples, the object property names (like fname, gender) are used as variable names while destructuring and it works.
• However if we want to read the property but assign it to a variable with different name, then we need to follow the below.

const {fname: thename, gender: thegender} = actress; 
console.log(thename);
console.log(thegender);

Reference

• This can be used with loops, function parameters etc.
• For more information refer - MDN Docs