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.

[![](/images/terminal-600.jpg)](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

Multiple assignments[](#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[](#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?

What did I expect?[](#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](#destructuring)), 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?[](#whats-really-going-on-here)

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

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[](#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:

Published 8-Dec 2016 under #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/multiple-assignments.md)

Comments

Lock Thread

Login

Add Comment[M ↓   Markdown]()

[Upvotes]()[Newest]()[Oldest]()

![](/images/no-user.svg)

Craig Bilner

0 points

7 years ago

Might be worth mentioning that this will only work in "sloppy mode" too

[Commento](https://commento.io)