Parallel Assignments - A feature you didn't know existed in JavaScript

Today for another short article here, I’ll show you a feature you probably didn’t know existed in JavaScript. Parallel assignments.

Many languages have the parallel assignments concept implemented, but what is that?

A parallel assignment, or “parallel association”, is a feature that allows you to swap the value of two variables at the same time, even if they reference each other. In JavaScript this is part of the destructuring syntax so we can assign more than two variables at the same time.

For example, let’s imagine this fibonacci function, which is a function where the next item in the list is the sum of the two previous items:

1
function fibonacci(terms: number) {
2
  let a = 0;
3
  let b = 1;
4
  for (let i = 0; i <= terms; i++) {
5
    const temp = a + b;
6
    a = b;
7
    b = temp;
8
  }
9
  return a;
10
}

If you look closely, inside our for loop we have a temporary variable, which only serves to store the value of a+b and, then, the variable a takes the value of b and b becomes the sum of the two.

But what if I tell you that it’s possible to do this entire for in just one line?

We can use the syntax [a, b] = [v1, v2] where a and b are the variables we want to swap, and v1 and v2 are the values we want to give to them respectively. This is possible even if the variables are references to themselves, as in our case where b will be a+b.

So we can rewrite our function to this:

1
function fibonacci (terms: number) {
2
  let a = 0;
3
  let b = 1;
4
  for (let i = 0; i <= terms; i++) {
5
      [a, b] = [b, a + b];
6
  }
7
  return a;
8
}

Destructuring is widely used when we’re creating variables from arrays or objects, like in:

1
const [a, b] = [0, 1]
2
const { nome, idade } = { nome: 'lucas', idade: 28, sexo: 'M' }

But this syntax can also be applied when we’re assigning variables to their values. We can even reduce it further by doing:

1
function fibonacci (terms: number) {
2
    let [a, b] = [0, 1];
3
  for (let i = 0; i <= terms; i++) {
4
      [a, b] = [b, a + b];
5
  }
6
  return a;
7
}

And even transform this function into a generator:

1
function* fibonacciGenerator () {
2
    let [a, b] = [0, 1]
3
  while (true) {
4
    yield a;
5
    [a, b] = [b, a + b]
6
  }
7
}
8

9
const fGen = fibonacciGenerator()
10
fGen.next() // 0
11

12
for (let i = 0; i < 10; i++) {
13
  console.log(fGen.next()) // 0 1 1 2 3 5 8 ...
14
}