5 Interesting Uses of JavaScript Destructuring

5 Interesting Uses of JavaScript Destructuring

In this post, I will describe 5 interesting uses of destructuring in JavaScript, beyond the basic usage.

Originally published at https://dmitripavlutin.com

Looking at my regular JavaScript code, I see that destructuring assignments are everywhere.

Reading object properties and accessing array items are frequent operations. The destructuring assignments make these operations so much easier and concise.

1. Swap variables

The usual way to swap 2 variables requires an additional temporary variable. Let’s see a simple scenario:

let a = 1;
let b = 2;
let temp;

temp = a; a = b; b = temp;

a; // => 2 b; // => 1

temp is a temporary variable that holds the value of a. Then a is assigned with the value of b, and consequently b is assigned with temp.

The destructuring assignment makes the variables swapping simple, without any need of a temporary variable:

let a = 1;
let b = 2;

[a, b] = [b, a]; a; // => 2 b; // => 1

[a, b] = [b, a] is a destructuring assignment. On the right side, an array is created [b, a], that is [2, 1]. The first item of this array 2 is assigned to a, and the second item 1 is assigned to b

Although you still create a temporary array, swapping variables using destructuring assignment is more concise.

This is not the limit. You can swap more than 2 variables at the same time. Let’s try that:

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero]; zero; // => 0 one; // => 1 two; // => 2

You can swap as many variables as you want! Although, swapping 2 variables is the most common scenario.

2. Access array item

You have an array of items that potentially can be empty. You want to access the first, second, or nth item of the array, but if the item does not exist, get a default value.

Normally you would use the length property of the array:

const colors = [];

let firstColor = 'white'; if (colors.length > 0) {  firstColor = colors[0]; }

firstColor; // => 'white'

Fortunately, array destructuring helps you achieve the same way shorter:

const colors = [];

const [firstColor = 'white'] = colors; firstColor; // => 'white'

const [firstColor = 'white'] = colors destructuring assigns to firstColor variable the first element of the colors array. If the array doesn’t have any element at the index 0, the 'white' default value is assigned. 

But there’s a lot more flexibility. If you want to access the second element only, that’s possible too:

const colors = [];

const [, secondColor = 'black'] = colors; secondColor; // => 'black'

Note the comma on the left side of the destructuring: it means that the first element is ignored. secondColor is assigned with the element at index 1 from the colors array.

3. Immutable operations

When I started using React, and later Redux, I was forced to write code that respects immutability. While having some difficulties at the start, later I saw its benefits: it’s easier to deal with unidirectional data flow.

Immutability forbids mutating objects. Fortunately, destructuring helps you achieve some operations in an immutable manner easily.

The destructuring in combination with ... rest operator removes elements from the beginning of an array:

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers; fooNumbers; // => [2, 3] numbers; // => [1, 2, 3]

The destructuring [, ...fooNumbers] = numbers creates a new array fooNumbers that contains the items from numbers but the first one. 

numbers array is not mutated, keeping the operation immutable. 

In the same immutable manner you can delete properties from objects. Let’s try to delete foo property from the object big:

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big; small; // => { bar: 'value Bar' } big; // => { foo: 'value Foo', bar: 'value Bar' }

The destructuring assignment in combination with object rest operator creates a new object small with all properties from big, only without foo.

4. Destructuring iterables

In the previous sections, the destructuring was applied to arrays. But you can destructure any object that implements the iterable protocol.

Many native primitive types and objects are iterable: arrays, strings, typed arrays, sets, and maps.

For example, you can destructure a string to characters:

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

You’re not limited to native types. Destructuring logic can be customize by implementing the iterable protocol.

movies holds a list of movie objects. When destructuring movies, it would be great to get the movie title as a string. Let’s implement a custom iterator: 

const movies = {
 list: [
   { title: 'Heat' }, 
   { title: 'Interstellar' }
 ],
 Symbol.iterator {
   let index = 0;
   return {
     next: () => {
       if (index < this.list.length) {
         const value = this.list[index++].title;
         return { value, done: false };
       }
       return { done: true };
     }
   };
 }
};

const [firstMovieTitle] = movies; console.log(firstMovieTitle); // => 'Heat'

movies object implements the iterable protocol by defining the Symbol.iterator method. The iterator iterates over the titles of movies. 

Conforming to an iterable protocol allows the destructuring of movies object into titles, specifically by reading the title of the first movie: const [firstMovieTitle] = movies

The sky is the limit when using destructuring with iterators.

5. Destructuring dynamic properties

In my experience, the destructuring of an object by properties happens more often than arrays destructuring.

The destructuring of an object looks pretty simple:

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

const { title } = movie creates a variable title and assigns to it the value of property movie.title.

When first reading about objects destructuring, I was a bit surprised that you don’t have to know the property name statically. You can destructure an object with a dynamic property name!

To see how dynamic destructuring works, let’s write a greeting function:

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj; return Hello, ${name}!;
}

greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!' greet({ }, 'name'); // => 'Hello, Unknown!'

greet() function is called with 2 arguments: the object and the property name.

Inside greet(), the destructuring assignment const { [nameProp]: name = 'Unknown' } = obj reads the dynamic property name using square brakets [nameProp]. The name variable receives the dynamic property value.

Even better you can specify a default value 'Unknown' in case if the property does not exist. 

6. Conclusion

Destructuring works great if you want to access object properties and array items.

On top of the basic usage, array destructuring is convinient to swap variables, access array items, perform some immutable operations.

JavaScript offers even greater possibilities because you can define custom destructuring logic using iterators.

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

JavaScript Programming Tutorial - Full JavaScript Course for Beginners

New ES2019 Features Every JavaScript Developer Should Know

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

React vs Angular vs Vue.js by Example

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Creating Web Animations with Anime.js

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

Do we still need JavaScript frameworks?

javascript reactjs web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.