Parallel Assignments - A Feature You Didn't Know Existed in JavaScript

Today for another quick article, I’m showing you a feature you probably didn’t know existed in JavaScript: parallel assignments.

Many languages have the concept of parallel assignments, but what is it exactly?

A parallel assignment, or “simultaneous assignment,” is a feature that lets you swap the values 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 once.

For example, imagine this fibonacci function, where each item in the sequence 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 that only stores the value of a+b, then variable a takes the value of b, and b becomes the sum of the two.

But what if I told you it’s possible to do this entire loop in a single 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 them respectively. This works even if the variables reference themselves, like in our case where b becomes a+b.

So we can rewrite our function like 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 commonly used when 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 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
}