11

Recentemente me deparei com um trecho de código como o exibido abaixo:

let alias = req.body.alias;
alias = (alias ||= alias = 'generic');

Nunca tinha visto esse operador ||=, mas, após uma breve pesquisa, descobri a existência de três do mesmo tipo:

  • ||=
  • &&=
  • ??=

Como nunca os tinha visto, fiquei com algumas perguntas:

  1. O que são esses operadores?
  2. Eles têm um nome? Qual?
  3. Para que servem?
  4. Embora eu consiga executar no console do browser, ao tentar executar o mesmo código acima com TypeScript na versão 3.9.5, um erro de sintaxe é lançado. A partir de qual versão eles constam no ECMAScript (JavaScript)? E no TypeScript?
4
  • 2
    Eu fiquei em dúvida por conta dessa expressão alias = (alias ||= alias = 'generic'); para mim seria o correto alias ||= 'generic'; que é o equivalente semântico a alias = alias || 'generic';. Aqui está a definição desse operador e de outros de natureza similar. Commented 9/12/2020 às 19:07
  • 1
    Obrigado @AugustoVasques, pelo seu link ja esclareceu tudo. Um recurso de uma versao mais nova do TS. Commented 9/12/2020 às 19:11
  • 2
    Sempre que tenho dúvidas sobre esses "agrupamentos" de operações eu sempre verifico a tabela de precedência de operadores e depois quebro a linha em várias operações separadas pra facilitar o entendimento. É uma boa dica pra qualquer linguagem. Commented 9/12/2020 às 19:15
  • PS: No seu caso essa linha tá muito cabulosa... provavelmente ela está muito errada.. Commented 9/12/2020 às 19:16

2 Respostas 2

15
+50

São os operadores lógicos de atribuição. No JavaScript, foram estandardizados a partir do ECMAScript 2021 com base na chamada logical assignments proposal.

São estes os três novos operadores de atribuição lógica:

Operador Nome Equivalência ("antiga") Atribui somente se
a &&= b Operador de atribuição lógica AND a && (a = b) a for truthy
a ||= b Operador de atribuição lógica OU a || (a = b) a for falsy
a ??= b Operador de atribuição lógica nullish a ?? (a = b) a for nullish

O funcionamento lógico desses operadores é o mesmo dos operadores de curto circuito &&, || e ??. A diferença é que, a depender do resultado dessa avaliação lógica, também realizam atribuição de variável. Por conta dessa dupla funcionalidade, também podem ser chamados de operadores compostos.

Como a avaliação ocorre da esquerda para a direita, a só receberá o valor de b se, no momento da avaliação, o comportamento lógico vier a ser favorável. Portanto, a operação [[Set]] (realizada pelo operador de atribuição =) só será executada se o curto-circuito permitir.

Vale observar também que qualquer um dos três operadores de atribuição lógica avaliará para o valor da variável referenciada à esquerda, ocorrendo atribuição ou não. Desse modo, você pode concatenar expressões que envolvam o uso desses operadores, sempre tendo a garantia de que o valor mais recente da variável à esquerda será retornado pela expressão.

Vejamos como o comportamento lógico funciona para cada um deles...


Atribuição lógica AND (&&=)

O operador de atribuição lógica AND (&&=) executará a atribuição se o operando da esquerda for truthy, seguindo a mesma lógica operacional do && em curto circuito.

Se o valor da variável referenciada à esquerda for falsy, nada ocorrerá. O valor será mantido o mesmo.

Desse modo:

// Exemplo de avaliação FAVORÁVEL.
// Neste caso, o operando à esquerda de `&&=` é truthy.
// A atribuição ocorrerá.
let x = 'Antigo X (que é truthy)';
x &&= 'Novo X';
console.log('x:', x); //=> "Novo X". Atribuiu porque `x` já era truthy.


// Exemplo de avaliação DESFAVORÁVEL.
// Neste caso, o operando à esquerda de `&&=` é falsy.
// A atribuição NÃO ocorrerá.
let y;
y &&= 'Novo Y';
console.log('y:', y); //=> undefined. NÃO ocorreu atribuição porque `y` já era falsy.


Atribuição lógica OU (||=)

O operador de atribuição lógica OU (||=) executará a atribuição se o operando da esquerda for falsy, seguindo a mesma lógica operacional do || em curto-circuito.

Se o valor da variável referenciada à esquerda for truthy, nada ocorrerá. O valor será mantido o mesmo.

Desse modo:

// Exemplo de avaliação FAVORÁVEL.
// Neste caso, o operando à esquerda de `||=` é falsy.
// A atribuição ocorrerá.
let x;
x ||= 'Novo X';
console.log('x:', x); //=> "Novo X". Atribuiu porque `x` já era falsy.


// Exemplo de avaliação DESFAVORÁVEL.
// Neste caso, o operando à esquerda de `||=` é truthy.
// A atribuição NÃO ocorrerá.
let y = 'Antigo Y (que é truthy)';
y ||= 'Novo Y';
console.log('y:', y); //=> "Antigo Y (que é truthy)". NÃO ocorreu atribuição porque `y` já era truthy.


Atribuição lógica nullish (??=)

O operador de atribuição lógica nullish (??=) executará a atribuição se o operando da esquerda for nullish, seguindo a mesma lógica operacional do ?? em curto-circuito.

Se o valor da variável referenciada à esquerda for diferente de null ou undefined (isto é, um valor não nullish), nada ocorrerá. O valor será mantido o mesmo.

Desse modo:

// Exemplo de avaliação FAVORÁVEL.
// Neste caso, o operando à esquerda de `??=` é nullish.
// A atribuição ocorrerá.
let x;
x ??= 'Novo X';
console.log('x:', x); //=> "Novo X". Atribuiu porque `x` já era nullish (nesse caso, `undefined`).


// Exemplo de avaliação DESFAVORÁVEL.
// Neste caso, o operando à esquerda de `??=` é não nullish (diferente de `null` ou diferente de `undefined`).
// A atribuição NÃO ocorrerá.
let y = 'Antigo Y (que é truthy)';
y ??= 'Novo Y';
console.log('y:', y); //=> "Antigo Y (que é truthy)". NÃO ocorreu atribuição porque `y` já era não nullish.


Observações finais

Usarei o ||= como exemplo, mas vale para os outros também.

Muitas pessoas podem achar que a ||= b é equivalente a isto:

a = a || b;

No entanto, essa definição não é 100% precisa, uma vez que, como vimos, os operadores de atribuição lógica não executam o [[Set]] caso a avaliação do operador lógico correspondente não seja favorável. No exemplo acima, a atribuição sempre ocorrerá, de modo que a sempre será reatribuída ao resultado da expressão a || b, que por sua vez avalia para b se a for falsy (seguindo o exemplo do ||= e semântica lógica do ||).

Portanto, uma "equivalência" mais adequada seria:

a || (a = b);

De modo que, somente se a for falsy, avaliar-se-á a expressão a = b, que por fim atribuirá à a o valor de b. A atribuição só ocorre caso a lógica do || seja favorável em relação ao curto-circuito.


E sobre o código da pergunta:

let alias = req.body.alias;
alias = (alias ||= alias = 'generic');

Não faz muito sentido, já que está atribuindo à alias duas vezes se alias for falsy. Ou uma, se req.body.alias já vier truthy. Nesse caso, algo como isto já bastaria:

req.body.alias ||= 'generic';

// Utilize `alias` sabendo que sempre terá algum valor truthy.
console.log(req.body.alias);

De modo que a propriedade alias receba o valor "generic" se for falsy. Talvez nesse caso valha mais a pena utilizar o ??= para atribuir somente se alias for nullish. Mas isso só a sua regra de negócio pode afirmar.

Vale lembrar, também, que só funcionará se body estiver presente req, mas aí já envolve outras semânticas da linguagem.


Embora seja um recurso do JavaScript, o TypeScript passou a suportá-lo a partir da versão 4.0.

2
  • Vou dizer que não esperava que isso funcionasse no snippet. Em qual edição do ECMAScript essa proposta entrou / irá entrar? Commented 9/12/2020 às 19:39
  • 4
    Se não me engano irá entrar no ES2021 (ainda não saiu oficialmente), mas o Chrome (V8, nesse sentido) é bem antecipado e já implementa as features antes de serem ratificadas pela especificação. Como a proposta já está em stage 4, é certo que entrará na linguagem. Commented 9/12/2020 às 19:41
8

Esse é o operador composto de OU. Ou seja, é o || que já conhece e funciona exatamente igual, mas ele faz uma operação extra, ele armazena o resultado na própria variável usada, então é um OU e uma atribuição.

x ||= y;

é o mesmo que

x = x || y;

Presumindo que x e y encaixem no contexto.

Ele passou existir na versão 4 do TypeScript, então deve estar usando uma versão antiga. Parece que precisa atualizar seu TS. Ele entrou no ECMAScript 2021.

Pode ser que eu não saiba de alguma coisa, mas o código é muito estranho, não sei se é por algum falha legada do JavaScript (ou alguma maluquice exigida pelo Node - não é para acontecer, mas essas tecnologias me surpreendem), eu entendo que esse código é o mesmo que:

let alias = null;
alias ||= 'generic';
console.log(alias);

Coloquei no GitHub para referência futura.

Coloquei o null só para simplificar, porque o objetivo do código original é justamente fazer o null virar um texto, ou não se um objeto válido existe.

Pensa bem, que maluquice é essa de guardar um texto em alias aí aplicar um OU e guardar o resultado nela mesma e depois pegar esse resultado e guardar na mesma variável de novo?

Se viu isso em algum projeto, fuja dele.

3
  • Muito bem explicado, agora funcionou depois que atualizei o TS. Basicamente a mesma ideia de operadores matematicos, += por exemplo, mas do jeito que voce escreveu esta muito mais facil de entender do que o codigo que eu vi. Nao entendo porque criar um recurso de x ||= y; so pra simplificar algo simples x = x || y;. O cara que propos essa ideia tava com preguica de digitar um caractere a mais? nao sei. Commented 9/12/2020 às 19:15
  • 2
    Em resumo, é tipo um += só que ao invés de + é com ||. E com string acredito que o TypeScript recomende usar apenas caso seja uma string vazia, caso seja nullable é capaz de recomendar o ??=. Aqui tem outros operadores similares introduzidos na versão 4.0 Commented 9/12/2020 às 19:17
  • 3
    No passado o operador composto era mais rápido. Mas isso mudou com o tempo e o compilador passou otimizar. Em linguagens de script nem importa isso. Mas o padrão de programar assim ficou. Eu gosto, e não é porque digita menos, mas sim porque mostra mais claramente, na minha opinião, existem pessoas que discordam, que está criando um efeito colateral na variável partindo dela mesma. Os que discordam porque entendem eu até aceito, os que discordam porque não entendem o motivo, eu mando catar coquinho na beira da estrada. Também acho melhor o ??.Em algumas linguagens o || nem funciona p/ isso
    – Maniero
    Commented 9/12/2020 às 19:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .