Parallel Assignments - A feature que você não sabia que existia no JavaScript

Lucas Santos - Aug 7 - - Dev Community

Hoje pra mais um artigo curtinho aqui, vou te mostrar uma funcionalidade que você provavelmente não sabia que existia no JavaScript. Os parallel assignments.

Muitas linguagens tem o conceito de parallel assignments implementado, mas o que é isso?

Um parallel assignment, ou "associação em paralelo", é uma funcionalidade que permite que você troque o valor de duas variáveis ao mesmo tempo, mesmo se elas se referenciarem. No JavaScript isso é parte da sintaxe do destructuring então podemos associar mais de duas variáveis ao mesmo tempo.

Por exemplo, vamos imaginar essa função de fibonacci, que é uma função onde o próximo item da lista é a soma dos dois itens anteriores:

function fibonacci(terms: number) {  
  let a = 0;
  let b = 1;
  for (let i = 0; i <= terms; i++) {    
    const temp = a + b;   
    a = b;  
    b = temp; 
  }  
  return a;
}
Enter fullscreen mode Exit fullscreen mode

Se você observar bem, dentro do nosso laço for a gente tem uma variável temporária, que só serve para armazenar o valor de a+b e, depois, a variável a assume o valor de b e b se torna a soma das duas.

Mas e se eu te disser que é possível fazer esse for inteiro em uma linha só?

A gente pode usar a sintaxe [a, b] = [v1, v2] onde a e b são as variáveis que queremos trocar, e v1 e v2 são os valores que queremos dar para elas respectivamente. Isso é possível mesmo se as variáveis sejam referências a si mesmas , como é o nosso caso onde b vai ser a+b.

Então podemos reescrever a nossa função para isso aqui:

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

Enter fullscreen mode Exit fullscreen mode

O destructuring é muito utilizado quando estamos fazendo a criação de variáveis a partir de arrays ou objetos, como em:

const [a, b] = [0, 1]
const { nome, idade } = { nome: 'lucas', idade: 28, sexo: 'M' }
Enter fullscreen mode Exit fullscreen mode

Mas essa sintaxe também pode ser aplicada para quando estamos associando variáveis a seus valores. Inclusive podemos reduzir ainda mais fazendo:

function fibonacci (terms: number) {
    let [a, b] = [0, 1];
    for (let i = 0; i <= terms; i++) {
      [a, b] = [b, a + b];
    }
    return a;
}
Enter fullscreen mode Exit fullscreen mode

E até transformar essa função em um generator:

function* fibonacciGenerator () {
    let [a, b] = [0, 1]
    while (true) {
        yield a;
        [a, b] = [b, a + b]
    }
}

const fGen = fibonacciGenerator()
fGen.next() // 0

for (let i = 0; i < 10; i++) {
  console.log(fGen.next()) // 0 1 1 2 3 5 8 ...
}
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .