As I slowly join the masses in using ES6 to a fuller extent (than my previous Promise only-ES6), I'm discovering new and interesting ways to play with the language. I'm even learning that some stuff just didn't work the way I thought.

READER DISCOUNTSave $80 on terminal.training

I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.

Multiple assignments

It's not uncommon to see multiple assignments in a single line in my code. Something like this:

// creating short variable name to exports
const app = module.exports = { /* exports */ };

Though, it's almost an anti-pattern because it could leak a global by accident. Take this code in the browser for instance:

function calc(v) {
  var value = max = 10;
  // …
}

Yup, I've leaked the max value as a global. Still, so long as I'm careful, it's useful.

Destructuring

This is where I got caught out. Take the following example (though mildly convoluted). The intention of the following code was to take a pre-existing object (the value on the right hand side), destruct it into a new object containing a subset of the properties from the RHS.

So in the example below, what's the value of one.c?

JS Bin on jsbin.com

What did I expect?

In the past, when I look at multiple assignments, I've always read it a bit like right-to-left presidence. Sort of like this:

// a = b = 10
b = 10, a = b;

What you're seeing on the left, is the result of the expression on the right.

This doesn't have any significance when you're assigning something simple like a = b = 10, because the result of the expression b = 10 is 10.

However, this is important when I was working with destructuring (in the example above), because the result of the expression is the right hand side, is the value of two.

Since the result of the of { a, b, d} = two is the value of two, then the value of one.c will be the same as two.c, not undefined as I had hoped.

What's really going on here?

This might be easier to you get your head around if you look at the following example:

JS Bin on jsbin.com

In the first expression, I'm assigning a = 2, but a has a set method, and doesn't do anything with the value. The result of the expression is logged out: 2. This is irrespective of the value of a.

When I log the value of a again, it's 1 and was never modified.

Further reading

When I saw the value wasn't what I expected, it was pretty straight forward to adjust my thinking and understand that the RHS is more important, but it was fun to wrap my head around why.

Here's a few extra resources I found handy to get my head around it:

Want more?

Posts, web development learnings & insights, exclusive workshop and training discounts and more, direct to your inbox.

I won't send you any spam, and you can unsubscribe at any time. Powered by ConvertKit