JavaScript

7Destructuring

WHAT'S IN THIS CHAPTER?

• Object destructuring
• Array/iterable destructuring
• Destructuring default values
• Parameter destructuring

CODE DOWNLOADS FOR THIS CHAPTER

You can download the code for this chapter at https://thenewtoys.dev/bookcode or https://www.wiley.com/go/javascript-newtoys.

In this chapter you'll learn about destructuring, which provides powerful syntax for extracting values from objects and arrays into variables. You'll learn how the new syntax helps you access object and array contents more concisely and/or expressively.

OVERVIEW

Destructuring is extracting things from the structure they're in, in this case with syntax. You've been doing a kind of manual destructuring as long as you've been programming (probably without calling it that!), for instance by taking the value of an object property and putting it in a variable:

var first = obj.first; // Manual destructuring

That code destructures first by copying it from obj (extracting it from the object structure).

Destructuring syntax, added in ES2015 and extended in ES2018, gives you a new way to do that, which can be more concise (though isn't necessarily) and quite powerful, providing default values, renaming, nesting, and rest syntax. It also provides clarity and expressiveness, particularly when applied to function parameters.

BASIC OBJECT DESTRUCTURING

The new syntax gives you a new way to destructure things, usually with less repetition and fewer unnecessary variables. (It ...