Definition
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Let's examine some common use-cases for destructuring.
Object Destructuring
First, let's examine a simple example where we destructure the destructo1
object.
const destructo1 = {
name: 'Bob',
wife: 'Jen',
son: 'Patrick',
daughter: 'Anne',
email: 'bob.fornal@leadingedje.com'
};
let { name, wife, son, daughter } = destructo1;
name = 'Robert';
console.log(name, wife, son, daughter);
console.log(destructo1);
// Robert Jen Patrick Anne
// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne', email: 'bob.fornal@leadingedje.com'}
Array Destructuring
Now, let's examine array destructuring by taking apart destructo2
.
const destructo2 = [1, 2, 3, 4, 5];
let [_, a, b, c] = destructo2;
console.log(a, b, c);
console.log(destructo2);
// 2 3 4
// (5) [1, 2, 3, 4, 5]
Default Values
Default values can be managed with destructuring, as well. Here lets use them with destructo3
.
const destructo3 = {
name: 'Dave Hawk',
age: 54
};
const { name = 'Bob Fornal', age, height = 60 } = destructo3;
console.log(name, age, height);
console.log(destructo3);
// Dave Hawk 54 60
// {name: 'Dave Hawk', age: 54}
Notice the name
and age
are retrieved from the object. The default for the name
is not used in this example, although the height
is used.
Use Cases
Now, let's examine some real ways that destructuring can be used.
Regular Expression Groups
Here, we needed to capture the number and string as separate parts for processing. A Regular Expression is used that provides a very specific array output that can then be leveraged using array destructuring.
const maxSize = '10222mb';
const regex = /(\d+)(kb|mb|gb|tb)/i;
const destructo4 = regex.exec(maxSize);
console.log(destructo4);
// ['10222mb', '10222', 'mb', index: 0, input: '10222mb', groups: undefined]
const [_, sizeString, type] = destructo4;
console.log({ sizeString, type });
// {sizeString: '10222', type: 'mb'}
Note how we now have the variables sizeString
and type
for processing.
Swapping Variables
Traditionally, we would do something like the following for swapping two variable. In this case, we are swapping title1
and title2
.
let title1 = 'ABC';
let title2 = 'DEF';
let temp = title1;
title1 = title2;
title2 = temp;
console.log({ title1, title2 });
// {title1: 'DEF', title2: 'ABC'}
Note the values of title1
and title2
when console log was called.
With destructuring, the code becomes a lot cleaner.
Essentially, we are making an array on the right side of the equal sign with title2
in the zero-index position and title1
in the one-index position. We then destructure the array, assigning title1
and title2
.
let title1 = 'ABC';
let title2 = 'DEF';
[title1, title2] = [title2, title1];
console.log({ title1, title2 });
// {title1: 'DEF', title2: 'ABC'}
The output is the same as the previous example with a different approach.
Removing Keys from an Object
Removing keys from an object can take different forms. A traditional method is to do the following.
const destructo5 = {
name: 'Bob',
wife: 'Jen',
son: 'Patrick',
daughter: 'Anne',
email: 'bob.fornal@leadingedje.com'
};
delete destructo5.email;
console.log(destructo5);
// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne'}
Using the Spread Operator (...
) we can remove a key/value pair without impacting the original object.
const destructo1 = {
name: 'Bob',
wife: 'Jen',
son: 'Patrick',
daughter: 'Anne',
email: 'bob.fornal@leadingedje.com'
};
const destructo6 = Object.assign({}, destructo1);
const { email, ...destructo7 } = destructo6;
console.log(email);
console.log(destructo7);
// bob.fornal@leadingedje.com
// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne'}
Note the new variables, email
and destructo7
. The email
key and value are not included in destructo7
.
Summary
In this article we've covered some basic examples and real-life use-cases for destructuring of objects and arrays.
Top comments (0)