Como funciona o operador de ponto de interrogação (?) em JavaScript

Artigo original: How the Question Mark (?) Operator Works in JavaScript

O operador de condicional ou de ponto de interrogação, representado por um ?, é um dos recursos mais poderosos do JavaScript. O operador ? é usado em instruções condicionais e, quando acompanhado de um :, pode funcionar como uma alternativa compacta para instruções do tipo if...else.

Há, no entanto, mais a se falar sobre ele. Existem três usos principais para o operador ?, dois dos quais você pode não ter usado ainda e nem ouvido falar a respeito. Vamos aprender sobre eles agora em detalhes.

Três usos principais para o ponto de interrogação (?) em JavaScript:

1. Operador ternário
2. Encadeamento opcional
3. Coalescência nula

Vamos examinar cada um deles em detalhes, começando com a maneira mais comum de se usar o operador ? – como um operador ternário.

1. Operador ternário

O termo ternário significa composto de três itens ou partes. O operador ? também é chamado de operador ternário pois, diferente dos outros operadores como o de igualdade estrita (===) ou o operador de resto (%), ele é o único que recebe três operandos.

Começando com ?, adicionamos uma condição do lado esquerdo e um valor do lado direito a ser retornado quando a condição for verdadeira. Em seguida, adicionamos dois pontos (:) seguidos de um valor a ser retornado quando a condição é falsa.

O operador ternário é, basicamente, um atalho para uma instrução if...else tradicional.

Vamos comparar o operador ternário com a instrução if...else, mais extensa:

Aqui, o operador ternário ocupa apenas uma linha de código, enquanto a instrução if...else tem sete linhas.

Usar um operador ternário é mais eficaz, certo?

2. Encadeamento opcional

Em 2020, um novo recurso incrível, conhecido como Encadeamento opcional, foi introduzido no JavaScript.

Para entender como ele funciona, imagine este cenário.

Vamos dizer que você tenha um código que chama uma propriedade de objeto que não existe, o que gera um erro em tempo de execução. Isso pode ocorrer devido a um valor ausente ou indefinido em seu banco de dados ou proveniente de uma API:

Graças ao Encadeamento opcional, você pode simplesmente inserir um ? entre o nome da propriedade e o ponto antes da próxima propriedade.

Com isso, o retorno será undefined em vez de lançar um erro.

O encadeamento opcional é um recurso que muda o jogo de verdade para os desenvolvedores de JavaScript.

3. Coalescência nula

Em alguns casos, é preciso definir um valor padrão para um nome de propriedade ou valor ausente.

Por exemplo, vamos dizer que estamos criando um app de previsão do tempo, no qual estamos buscando a temperatura, umidade do ar, velocidade do vento, pressão atmosférica, hora do nascer e do por do sol, além de uma imagem da cidade. Inserimos um lugar, por exemplo, Bangalore, mas, por algum motivo, a imagem da cidade não está no banco de dados.

Quando o app busca e exibe os dados, a imagem estará em branco, o que pode ficar feio na interface. O que podemos fazer, nesse caso, é definir uma imagem padrão para aquelas cidades que não têm uma imagem – em nosso exemplo, Bangalore.

Desse modo, quando o app exibir os dados, a imagem padrão estará lá para as cidades que não tiverem imagens.

Podemos fazer isso usando o operador ||, conhecido como o operador lógico OR:

Porém, se você usar || para fornecer um valor padrão, poderá encontrar comportamentos inesperados se você considerar alguns valores como utilizáveis (por exemplo, '' ou 0).

Considere um cenário onde uma variável tem o valor de 0 ou de uma string vazia. Se usarmos (||), ela será considerada como undefined ou NULL e retornará o valor padrão que estabelecemos.

Em vez do operador lógico OR (||), você pode usar dois pontos de interrogação (??), também conhecidos como Coalescência nula.

Vamos aprender com um exemplo.

const value1 = 0 || 'default string';
console.log(value1);


const value2 = '' || 1000;
console.log(value2);

Aqui, temos '0' e 'default string' na variável value1. Se retornarmos seu valor no console, teremos o valor 'default string', o que é estranho. Em vez de 'default string', deveríamos receber 0, já que zero não é undefined nem null. Assim, '||' não faz o que queremos que faça aqui.

É o mesmo que ocorre, nesse caso, com value2.

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Porém, se substituirmos '||' por '??', obteremos 0 e uma string vazia, o que torna o recurso bem interessante.

A coalescência nula funciona exatamente como o operador lógico OR, exceto pelo fato de que você obtém o valor do lado direito quando o valor do lado esquerdo é undefined ou null.

Em outras palavras, ?? somente permite valores undefined e null, não permitindo strings vazias ('') ou 0s.

Conclusão

Espero que agora você compreenda como funciona o operador ? em JavaScript. Parece simples, mas é um dos caracteres mais poderosos da linguagem. Ele fornece aquele "a mais" sintático de três maneiras diferentes, porém incríveis.

Experimente-as e conte-nos o resultado.

Feliz aprendizagem!