O que são as "do expressions" do JavaScript?

Em mais uma série de artigos sobre as mais recentes e mais animadoras propostas que temos no TC39 eu trago mais uma dessas ideias que eu acho super legais e realmente espero (e dou meu suporte quando possível) que entrem na linguagem no futuro.

Hoje a gente vai falar de uma proposta super interessante, não é algo novo, principalmente para quem já ouviu falar em programação funcional. A proposta toca no que é chamada de do expressions, ou expressões de bloco.

Essa é ainda uma proposta no estágio 1, ou seja, existe uma chance grande de ela ser rejeitada, porém, por ela estar há uns 5 anos aberta, eu acredito que ainda pode ter uma esperança!

Do expressions#

A proposta dá a ideia de uma “nova” keyword para o JavaScript, o do. Eu digo “nova” porque essa keyword já existe em expressões como do while, então a parte sintática da linguagem fica (um pouco) mais simples.

Um bloco do é o que a gente chama de programação orientada a expressões, onde o resultado de uma atribuição, como const x = 1, pode ser o resultado de uma expressão mais complexa. Isso simplifica muito a escrita do código para não ficar usando ternários o tempo todo, que são bons, porém difíceis de ler.

Alguns exemplos que podemos dar desse tipo de uso são para podermos ter as variáveis com o menor escopo possível, evitando que elas vazem para outro lugar, por exemplo, se quisermos fazer uma operação com uma variável X, ao invés de fazermos isso:

1
function main(x, y, options) {
2
  const finalX = par(x) && !options?.useY ? x + y : !par(x) ? x * 2 : 10
3
  return options?.useY && options?.fromZero ? finalX-- : finalX
4
}

Que é um código bastante complexo de ler, ou então podemos simplificar um pouco com:

1
function main(x, y, options) {
2
  let finalX = 10
3
  if (par(x) && !options?.useY) finalX = x + y
4
  else if (!par(x)) finalX = x * 2
5
  if (options?.useY && options?.fromZero) finalX--
6
  return finalX
7
}

Mas ai teríamos uma variável acumuladora finalX dentro do escopo da função, se essa função fosse longa, poderíamos ter um memory leak. E se pudéssemos deixar essa expressão toda dentro do mesmo escopo? É isso que é proposto aqui:

1
function main (x, y, options) {
2
  return do {
3
    let finalX = 10
4
    if (par(x) && !options?.useY) finalX = x + y
5
    else if (!par(x)) finalX = x * 2
6
    if (options?.useY && options?.fromZero) finalX--
7
    finalX
8
  }
9
}

Ou, se você só precisar atribuir a uma variável:

1
function main (x, y, options) {
2
  const x = do {
3
    let finalX = 10
4
    if (par(x) && !options?.useY) finalX = x + y
5
    else if (!par(x)) finalX = x * 2
6
    if (options?.useY && options?.fromZero) finalX--
7
    finalX
8
  }
9
  // Resto do código
10
}

Esse pode não ser o melhor exemplo, mas com este estilo de desenvolvimento você consegue reduzir o escopo para a menor unidade possível, a de expressão. Dessa forma o coletor de lixo do seu runtime vai saber o quando recursos podem ser liberados de uma forma mais eficiente, já que as expressões podem ser completamente descartadas quando terminam.

Usos#

Alguns usos interessantes:

Escopo mínimo de variáveis:

1
let x = do {
2
  let tmp = f();
3
  tmp * tmp + 1
4
};

2. Uso de condicionais para um código mais legível:

1
let x = do {
2
  if (foo()) { f() }
3
  else if (bar()) { g() }
4
  else { h() }
5
};

3. do expressions tem um uso excelente para linguagens de templating, como o JSX:

1
return (
2
  <nav>
3
    <Home />
4
    {
5
      do {
6
        if (loggedIn) {
7
          <LogoutButton />
8
        } else {
9
          <LoginButton />
10
        }
11
      }
12
    }
13
  </nav>
14
)

O que é permitido#

Além de casos mais simples, alguns casos mais complexos, os chamados edge cases são também permitidos, por exemplo:

Atribuição usando `var`#

Por padrão, qualquer tipo de atribuição de variável retorna um resultado vazio, por isso (como vou mostrar logo mais) não é possível atribuir nenhum tipo de variável como uma expressão, exceto quando estamos usando var, pois o escopo da variável seria global e o valor poderia sofrer um hoist para o topo da função local.

Vazio#

Você pode usar um do {}, o que seria equivalente a ter uma função com void 0

1
function v () {
2
    return void 0
3
}

Assincronismo com `await` ou `yield`#

Você pode usar await ou yield dependendo do escopo da função que contém o do, por exemplo, se a sua função for uma função async, você poderá usar um do { await ... }, caso seja um generator o mesmo vale para yield x.

Erros com `throw`#

O throw funciona da forma como a gente espera, ou seja, podemos dar um throw em um erro dentro de uma do expression:

1
const p = do {
2
    if (!p?.prop) throw new Error('Ops')
3
    else p.prop * 2
4
}

Quebras de controle com `break`, `continue` ou `return`#

Da mesma forma, você pode usar keywords de quebra de controle quando você está em um escopo apropriado, por exemplo, usar um return se o do está dentro de uma função, da mesma forma que é possível usar continueou break dentro de loops.

Lembrando que return vai retornar da função como um todo, e não somente do do, então:

1
function getUserId(blob) {
2
  let obj = do {
3
    try {
4
      JSON.parse(blob)
5
    } catch {
6
      return null; // sai da função com retorno null
7
    }
8
  };
9
  return obj?.userId;
10
}

Um caso especial é que o JS pode se confundir quando as expressões continue e break não tem o que chamamos de label. Uma label é uma forma de dizer para o runtime que aquela expressão tem um nome, então podemos dizer para o JS exatamente qual é a estrutura de controle que estamos nos referindo, isso é especialmente útil quando temos loops aninhados:

1
outer:
2
for (let i = 0; i < 5; i++) {
3
    inner:
4
    for (let j = 0; j < 10; j++) {
5
        if (i % 2 === 0) break outer
6
    }
7
}

Dessa forma, não é possível ter continue ou break sem uma label em do.

Parâmetros de funções#

Você também pode usar do dentro de parâmetros de funções, e eles aceitam o return:

1
function foo (p = do {
2
               if (!x) throw new Error('X is required')
3
         else return null
4
}) {}

Conflito com o `do while`#

Para remediar o conflito da keyword do no do while, você pode usar as expressões do dentro de parenteses:

1
do while (true) {
2
    let x = (do { ... })
3
}

Limitações#

Por conta da quebra de sintaxe, especialmente em alguns casos, essa funcionalidade é bastante limitada no que pode ou não pode ser feito.

Se alguma expressão como as abaixo são detectadas, o código automaticamente retorna um erro instantaneamente.

Atribuições diretas#

Você não pode retorna apenas atribuições de variáveis:

1
(do {
2
  let x = 1;
3
});

Isso acontece porque declarações tem um valor vazio como sendo o valor de “completude”, ou seja, se nada acontecer, elas não retornam nada. Então se você fizer algo como do { 'antes'; let x = 'depois'; } isso tudo vai retornar 'antes' e a segunda expressão não vai retornar nada.

Criação de funções#

Da mesma forma você não pode criar funções dentro de expressões:

1
(do {
2
  function f() {}
3
});

Loops#

Loops não são permitidos dentro de expressões, em nenhum caso, nem mesmo aninhados em outras estruturas de controle como if:

1
(do {
2
  while (cond) {
3
    // código
4
  }
5
});

1
(do {
2
  if (condition) {
3
    while (inner) {
4
      // código
5
    }
6
  } else {
7
    42;
8
  }
9
});

Labels fora de loops#

Você também não pode definir labels arbitrárias, somente labels que estão fora da expressão são válidas:

1
(do {
2
  label: {
3
    let x = 1;
4
    break label;
5
  }
6
});

`if` sem `else`#

Todos os ifs dentro de uma expressão devem conter um else acompanhado:

1
(do {
2
  if (foo) {
3
    bar
4
  }
5
});

Conclusão#

Essa é uma proposta ainda muito no início, o que significa que provavelmente muito do que está escrito aqui vai mudar no futuro, porém ela promete trazer uma nova forma de fazer com que o seu código fique mais organizado e, quem sabe, mais eficiente em termos de uso de recursos.

O que são as "do expressions" no JavaScript?