Como funcionam os operadores de atribuição lógica do ES2021 (JS)

Desde o lançamento da versão ECMAScript 6, em 2015, o TC19 têm trabalhado para trazer funcionalidades e melhorias para o JavaScript anualmente, afinal, foram muitos e muitos anos de espera até que o ES6 aparecesse.

É claro que as funcionalidades que são aprovadas são em pouca quantidade, afinal, o processo para que uma funcionalidade seja aprovada é longo e exige muita discussão e testes antes de ser oficializada.

Como já era de se esperar, a versão da ECMAScript está entre nós e traz algumas melhorias bem legais. Entre elas, estão:

• Operadores de atribuição lógica (Logical assignment operators);
• String.replaceAll();
• Promise.any();
• Entre outros.

Neste artigo quero falar sobre os operadores de atribuição lógica. Em outros artigos podemos tratar sobre os demais. Combinado?

Se você ainda não está familiarizado com o ECMAScript 6 (e suas versões posteriores), recomendo dar uma olhada no meu livro ECMAScript 6 — Entre de Cabeça no Futuro do JavaScript e meus cursos de ES6, ES7 e ES8! Tenho certeza que te ajudarão! :)

Versão em Vídeo

Além das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Curta e se inscreva!

Operadores de atribuição lógica

Estes novos operadores são muito parecidos com os operadores lógicos que já estamos acostumados, no entanto, trazem algumas novidades muito úteis, principalmente para atribuirmos valores padrões para variáveis.

São três operadores: OR, AND e Null.

Operador de atribuição lógica OR

Este operador é representado pelo símbolo:

x ||= y

Este operador funciona da mesma maneira que a operação x || (x = y) . Ou seja, a variável y somente terá o seu valor atribuído a x se ele possuir um valor considerado falso (falsy) no contexto booleano. Caso contrário, x permanece com o seu valor original.

Parece confuso? Tenho certeza que o exemplo abaixo te ajudará a mais sentido para este caso. Veja só:

const chave = () => {
  // faz alguma lógica que retorna uma chave
  return "chave";
}
// Exemplo 1
const usuario = {nome: "Diego", idade: 29, chave:""};
usuario.chave ||= chave(); 
console.log(usuario.chave); // chave
// Exemplo 2
usuario.chave = "outra chave";
usuario.chave ||= chave();
console.log(usuario.chave); // outra chave

Note que no exemplo 1, como no objeto usuário o valor do atributo chaveé vazio (representado por aspas vazias), o valor resultado é a string retornada na função. No exemplo 2 isso não acontece, pois o valor já não é mais falso no contexto booleano.

Operador de atribuição lógica AND

Este operador é representado pelo símbolo:

x &&= y

Este operador funciona totalmente contrário ao operador de atribuição lógica OR, ou seja, o valor da variável y será atribuída a x, se este já possui um valor verdadeiro (truthy). Caso contrário, ele permanece com o valor que ele já tinha.

Veja como isso acontece com base no exemplo anterior:

const chave = () => {
  // faz alguma lógica que retorna uma chave
  return "chave";
}
// Exemplo 1
const usuario = {nome: "Diego", idade: 29, chave:""};
usuario.chave &&= chave(); 
console.log(usuario.chave); // 
// Exemplo 2
usuario.chave = "outra chave";
usuario.chave &&= chave();
console.log(usuario.chave); // chave

Repare que os exemplos 1 e 2 são bem claros. No primeiro, como o valor do atributo chave é vazio, o operador não atribui nada. No segundo caso, ele atribui, pois o atributo chave agora possui um valor diferente de falso (no contexto booleano).

Operador de atribuição lógica Null

x ??= y

Este talvez seja o operador mais fácil de se entender. O valor de y será atribuído a x se, e somente se, este tem o valor null ou undefined. E se tratando do JavaScript, nada melhor do que uma maneira fácil de lidar com estes valores, não é?

Veja o exemplo:

const chave = () => {
  // faz alguma lógica que retorna uma chave
  return "chave";
}
// Exemplo 1
const usuario = {nome: "Diego", idade: 29, chave: null};
usuario.chave ??= chave(); 
console.log(usuario.chave); // chave
// Exemplo 2
usuario.chave = "outra chave";
usuario.chave ??= chave();
console.log(usuario.chave); // outra chave

No exemplo 1, atribuímos null como valor do atributo chave do objeto usuário. Quando o operador é chamado, ele nota este valor e então atribui o valor que determinado como retorno na função chave.

No exemplo 2 isso não acontece pois o valor já não é mais null ou undefined .

Conclusão

O JavaScript não é a linguagem mais querida do mundo atualmente a toa. As pequenas melhorias que são trazidas anualmente faz com que a linguagem nunca pare de evoluir, no entanto, isso também exige que nós, programadores e programadoras, continuemos nos atualizando para saber quais são e como usar esses novos recursos.

Você pode fazer os testes no repl do Babel.

Agradecimentos

Curtiu? Então dê uma passada no meu canal no Youtube ou me procure nas redes sociais para trocarmos uma ideia!

• Youtube
• Site