JavaScript: Destructuring Assignment

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.

MDN Documentation HERE

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: '[e-mail]'
};

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: '[e-mail]'}

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: '[e-mail]'
};

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: '[e-mail]'
};

const destructo6 = Object.assign({}, destructo1);
const { email, ...destructo7 } = destructo6;
console.log(email);
console.log(destructo7);

// [e-mail]
// {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.