10 Powerful JavaScript Destructuring Techniques Every Developer Should Know

Destructuring from zero to hero

The JavaScript destructuring assignment has been around for a while. It provides the opportunity to directly unpack values from objects and arrays into variables, saving us developers tons of time and code.

Because destructuring is so powerful and convenient, I guess you’d be hard-pressed to find a JavaScript developer that hasn’t used it. But although you might get the gist of destructuring, chances are you haven’t touched its full potential yet. To help you proceed from apprentice to master, here are 10 ways to level up your destructuring.

1. Ignoring values

Arrays often carry large amounts of data. A lot of times, only part of this data is needed for further processing. Therefore, when destructuring an array, you can selectively unpack values, ignoring the ones you don’t need. Simply write a comma if you want a value to remain untouched.

2. Assigning remaining values

Most developers will know the rest parameter. A function’s parameter prefixed with 3 dots, takes an infinite number of arguments and parses them as an array.

But did you know the rest pattern can also be used in destructuring? By prefixing a variable with 3 dots, you unpack all remaining values into it.

This applies to both object and array destructuring. Although it’s good to know that for objects the proposal is currently in stage 4, meaning it will officially be included in the next iteration of ECMAScript.

3. combined array and object destructuring

Object and array destructuring are powerful on their own, but combining the two provides you with development superpowers. If you face an array with objects inside, you can directly unpack the nested objects by using this technique.

4. Swapping variables in an array

Did you ever need to swap two variables in an array? If so, you know this is a cumbersome task. To swap to the two variables, you need to induce a temporary third variable to store one of the values to be swapped.

var temp = array[index1];

array[index1] = array[index2];
array[index2] = temp;

But using destructuring, this temporary variable is no longer needed. You can swap the two variables directly!

5. Renaming variables

Every developer has seen object keys that are, to say the least, ambiguous. More than often keys contain typos or don’t relate to their values in a clear way. To overcome this, you can set a new variable name when destructuring an object. Simply write a colon followed by the new name when unpacking the values.

6. Default values

If there is one guarantee when writing code, it’s that you can’t trust the data. Values can change unexpectedly and edge cases can’t be avoided.

Because of this, it generally is a good idea to supply default or fallback values. Setting default values when destructuring is dead simple. Just write a = sign after your variable name, and supply the default value. When a value in an array or object is undefined — any another nullish value will be unpacked— the default is assigned to the variable.

7. Destructuring a regex

Regular expressions are used to locate patterns in strings. When a regular expression is executed (RegExp.exec() ) in javascript, the matches are returned as an array of strings.

Using array destructuring, you can directly unpack the RegExp matches to the desired variables. In the example below, we dissect a mail address into its separate parts and assign them to variables directly. Beautiful!

8. Nested destructuring

Objects and arrays aren’t always flat. Did you know you don’t need separate destructuring assignments to unpack the values? The assignments can be nested in one clause to reach the desired level directly.

9. Dynamic object keys

Suppose you want to unpack an object whose keys are dynamic. Is destructuring impossible, since you can’t be sure about the validity of key names?

Nope! Object keys can be assigned dynamically when destructuring, providing an extra layer of flexibility.

10. Destructuring function parameters

In all previous examples, we unpacked object values into variables. But if an object is provided as a function parameter, we can skip this step altogether. Function parameters can be destructured directly, making the values available for use in the function body.

It’s a wrap! In 10 steps I’ve tried to show you the full potential of the destructuring assignment. I hope you learned something new along the way. Interested in more techniques to improve your JavaScript? The article below might suit you well!

Resources:

• Destructuring assignment: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment?retiredLocale=ar
• Rest parameter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• Rest/spread proposal: https://github.com/tc39/proposal-object-rest-spread
• Regex exec: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.