Before getting into destructuring, lets have a quick recap on arrays and objects.
- Objects allows us to create a single entity that gather data items by key.
const emp = {
name: “Anna”,
id: “101”,
};
- Array allows us to gather data items into an ordered list.
const emp = [“Anna”,”Tina”,”Tim”];
Destructuring introduced in ES6 allows us to unpack elements in an array or elements. It extracts multiple properties, items and values from an array or object into a separate variable.
Object Destructuring:
Syntax:
let { var1,var2} ={var1:val1, var2:val2}To destruct object we use curly braces { }
Consider you have a student object with properties firstname and lastname.
let student = {
firstname: "Anna",
lastname: "Hills"
};Prior to ES6:
For assigning properties and values to variables we have,
let student = {
firstname: “Anna”,
lastname: “Hills”
};
let firstName = student.firstname;
let lastName = student.lastname;
console.log(firstName);
console.log(lastName);
From ES6:
// assigning object attributes to variables
let student = {
firstname: "Anna",
lastname: "Hills"
};
// destructuring assignment
let { firstname, lastname} = student;
console.log(firstname); // Anna
console.log(lastname); // Hills
In the above example we have used the same variable names.
How to assign new variable name?
// assigning object attributes to variables
let student = {
firstname: "Anna",
lastname: "Hills"
};
// destructuring assignment to new variable
let { firstname:fname, lastname:lname} = student;
console.log(fname); // Anna
console.log(lname); // Hills
The order of the name in the object is not important we can also write as,
let {lastname, firstname} = student;How to assign default values?
We can pass default values as follows,
let student = {
firstname: "Anna",
lastname: "Hills"
};
let { firstname, lastname, age = 22} = student;
console.log(age); //22
Output:
22
How to assign multiple object properties to single variable?
const student = {
firstname: 'Anna',
lastname: 'Hills',
age: 25,
gender: 'female'
}
// destructuring assignment
// assigning remaining properties to rest
let { firstname, ...details } = student;
console.log(firstname); // Anna
console.log(details); // {lastname: 'Hills', age: 25, gender: 'female'}
Output:
Anna
{ lastname: ‘Hills’, age: 25, gender: ‘female’ }
Nested destructuring in objects:
In order to execute the nested destructuring assignment for objects, you have to enclose the variables in an object structure (by enclosing inside {}).
const student = {
name: 'Anna',
age: 26,
details: {
course: 'Javascript',
fee: 2500
}
}
// nested destructuring
const {name, details: {course, fee}} = student;
console.log(name); // Anna
console.log(course); // Javascript
console.log(fee); // 2500
Output:
Anna
Javascript
2500
Array destructuring:
To destruct arrays we use square brackets [ ].
Syntax:
const [var1,var2,…] = arrayName;Example:
const arrValue = ['Anna', 'Tina', 'Lena'];
// destructuring assignment in arrays
const [x, y, z] = arrValue;
console.log(x);
console.log(y);
console.log(z); Output:
Anna
Tina
Lena
How to assign default values?
let arr1 = [20];
// assigning default value 5 and 7
let [x = 10, y = 9] = arr1;
console.log(x); // 20
console.log(y); // 9
In the above array we have one element so when we assign default values only y=9 is assigned and x=20 remains the same.
Output:
20
9
How to swap variables using destructuring assignment?
// program to swap variables
let x = 10;
let y = 20;
// swapping variables
[x, y] = [y, x];
console.log(x); // 20
console.log(y); // 10
Output:
20
10
How to skip assigning unwanted items in an array?
We can skip assigning unwanted items in an array to a local variable using comma ( , )
const arr1 = ['one', 'two', 'three'];
// destructuring assignment in arrays
const [x, , z] = arr1;
console.log(x); // one
console.log(z); // three
Output:
one
three
How to assign multiple elements to a single variable?
We can assign multiple elements to a single variable using spread syntax …
const arr1 = ['one', 'two', 'three', 'four'];
// destructuring assignment in arrays
// assigning remaining elements to y
const [x, ...y] = arr1;
console.log(x); // one
console.log(y); // ["two", "three", "four"]
Output:
one
[ ‘two’, ‘three’, ‘four’ ]
one is assigned to x variable. Rest of the elements are assigned to y variable.
Nested Destructuring Assignment in arrays:
In order to execute the nested destructuring assignment, you have to enclose the variables in an array structure (by enclosing inside []).
Nested destructuring in arrays is
// nested array elements
const arr1 = ['one', ['two', 'three', 'four']];
// nested destructuring assignment in arrays
const [a, [b, c, d]] = arr1;
console.log(a); // one
console.log(b); // two
console.log(c); // three
console.log(d); // four
Output:
one
two
three
four
Destructuring allows for instantly mapping an object or array to many variables.