Learning: Destructuring Assignment in JavaScript

November 23, 2019 Sam Jarman

Hi there!

As I continue my journey into the world of JavaScript (JS), one technique that was new to me that I’ve found using a lot is a technique called destructuring assignment.

Let’s walk through some examples.

Typically in JS, you might assign a value to a variable like this.

let myString = 'my string';

But what if the value is not literal, and coming from somewhere else? What if its an object and you want to pluck just a few things from it. You might write something like this.

let myObject = {myString: 'foo', myInt: 42, myBool: true};

// Get out just myString and myInt
let myString = myObject.myString; // or myObject['myString']
let myInt = myObject.myInt; // or myObject['myInt']

But with destructuring assignment, there is a shorter way; both destructuring and assigning in one step:

let {myString, myInt} = {myString: 'foo', myInt: 42, myBool: true};

Which I think is pretty neat. We use the key of the object on the left-hand side
This also works for arrays too…

let myArray = ['hello', 'there', 'sam']
let [wordOne, wordTwo] = myArray;
// wordOne = 'hello'
// wordTwo = 'there'

You can also skip values too by leaving an empty item in the comma-separated destructuring list…

let myArray = ['hello', 'there', 'sam']
let [greeting,,name] = myArray;
// greeting = 'hello'
// name = 'sam'

The next thing I’ve found useful is using the rest syntax - that is to say, the syntax which lets you express “Okay, I have my value from this thing now, put the rest in here”

// With arrays
let arr = [0, 1, 2, 3, 4];
let [first, second, ...others] = arr;
// first = 0
// second = 1
// others = [2, 3, 4]

// With objects

let obj = {foo: 'bar', flopsy: 'topsy', importantThing: '41233219'};
let {importantThing, ...junk} = obj;

// importantThing = '41233219'
//  junk =  {foo: 'bar', flopsy: 'topsy'};

Pretty cool, right? This is not to be confused with another cool operator, the spread operator, which tends to be used only on the right-hand side of assignments.

So that’s a really quick intro to the syntax, by why would you use it?

First, it can give more expression to your code. Above when I pulled out importantThing, and left the rest, it hints to the reader that they can stop reasoning about the whole object, and just this variable is now important.

Secondly, its self documenting, in the case of object destructuring, it can give some hints as to the possible properties on the object without having to find its definition, declaration or instantiation. This is helpful and saves time.

I think it’s tempting, especially for people like me who come from static, strong typed languages and are new to JS can get a bit fast and loose with code because it’s quite frictionless to write. However, you can quickly get into a mess if you don’t lean into what idiomatic JS looks like. In my short experience to date, destructuring assignment is an important idiom to learn, master and use in order to write clean and easy to follow JS code.

The full docs are here, do have a read.

Do you use this technique? Whats a cool use case you’ve found? And did I forget anything? Or would you like to add anything to this explanation? I’m still learning, and I’d love to hear it!

Thanks!
Sam