Texto de: Marlliton Souza
Introdução
O operador de coalescência nula, introduzido no ES2020, é um operador que recebe dois operandos e que, entre outras coisas, pode ser utilizado para definir valores padrão para variáveis. Nesse artigo, falaremos sobre o problema que levou a sua criação, como ele funciona e como podemos utilizá-lo.
O problema
Em alguns momentos durante seus estudos ou trabalho, você pode encontrar um código semelhante a este:
let nome = "Maria";
let nome2 = nome || "Nome Padrão";
console.log(nome2); O operador || é conhecido como OU lógico e funciona assim: se a variável nome tiver algum valor associado a ela, por exemplo, let nome = "Maria", e atribuirmos esse valor à variável nome2 usando let nome2 = nome || "Nome Padrão", o valor de nome2 será "Maria".
No entanto, se a variável nome não tiver nenhum valor, nome2 receberá o valor à direita do operador ||, ou seja, receberá o valor que está após ||. Nesse caso, "Nome Padrão" será o valor padrão atribuído a variável nome2.
Qual o problema disso?
Se você está familiarizado com JavaScript, você já deve saber que existem algumas “pegadinhas” quanto a questão de falsidade e veracidade de valores, por exemplo:
Valores que são considerados falsos:
- string vazia: “”
- número 0 (zero)
- false
- null
- undefined
- NaN
Valores que são considerados verdadeiros:
- tudo que não for falso.
- Strings que não estejam vazias: "", "0", “true”, "false", etc.
- Todos os números que forem diferentes de 0 (zero): 1, 2, −1, −200, 1/100, etc.
- true
Sabendo disso, vejamos o exemplo abaixo:
let num = 0;
let num2 = num || 32;
console.log(num2); Na teoria, esperaríamos que a variável num2 tivesse o valor zero (0), uma vez que zero é, de fato, um valor. No entanto, ao empregar o operador lógico ||, notamos que o valor padrão utilizado foi 32, e não o 0.
Isso se deve às regras do JavaScript, onde o valor à direita do operador || é escolhido quando o valor à esquerda é considerado falso. Neste contexto, o número 0 é interpretado como falso, levando à seleção do valor 32 como padrão para a variável num2.
O operador de coalescência nula (??)
Existe uma solução muito simples para resolver esse problema, que é fazer uso do operador ?? ao invés do ||.
let qualquerValor = 0;
let valor = qualquerValor ?? "Valor Padrão";
console.log(valor); // 0 O operador ?? é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é null ou undefined.
Em outras palavras, qualquer coisa que seja diferente de null ou undefined ao lado esquerdo do operador de coalescência nula será retornado. Caso esse valor seja null ou undefined ele retorna o valor a direita.
Conclusão
Os exemplos acima são bem simples, mas o operador de coalescência nula pode ser muito útil em diversos outros casos, por exemplo, você fez uma consulta no banco e não sabe quais dados serão retornados, pois muitos campos são opcionais, você pode usar esse operador para definir valores padrão para esses possíveis campos opcionais.
