Introdução

JavaScript, sendo uma das linguagens de programação mais populares, fornece aos desenvolvedores uma variedade de operadores para lidar com várias operações lógicas. Entre eles, os operadores Logical OR (||) e Nullish Coalescing (??) são ferramentas fundamentais para gerenciar valores padrão e lidar com valores nulos. Este artigo se aprofundará nas diferenças entre esses dois operadores, seus casos de uso e exemplos práticos e complexos para ilustrar seu uso.

Compreendendo o operador lógico OR (||)

O operador lógico OR (||) em JavaScript é amplamente usado para retornar o primeiro valor verdadeiro entre seus operandos ou o último valor se nenhum for verdadeiro. É usado principalmente para definir valores padrão.

Sintaxe

result = operand1 || operand2;

Como funciona

O || o operador avalia da esquerda para a direita, retornando o primeiro operando se for verdadeiro; caso contrário, avalia e retorna o segundo operando.

Exemplo 1: Definindo Valores Padrão

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

Neste exemplo, userInput é uma string vazia (falsy), então defaultText é retornado.

Exemplo 2: Tratamento de múltiplos valores

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

Aqui, firstName é nulo (falso), então lastName é retornado como verdadeiro.

Limitações do operador lógico OR (||)

A principal limitação do || operador é que ele trata vários valores como falsos, como 0, NaN, '', falso, nulo e indefinido. Isso pode levar a resultados inesperados quando esses valores são considerados válidos.

Apresentando o Operador Nullish Coalescing (??)

O operador Nullish Coalescing (??) é uma adição mais recente ao JavaScript, introduzida no ES2020. Ele foi projetado para lidar com casos em que nulo ou indefinido são explicitamente considerados os únicos valores nulos considerados.

Sintaxe

result = operand1 ?? operand2;

Como funciona

O ?? O operador retorna o operando à direita quando o operando à esquerda é nulo ou indefinido. Caso contrário, ele retorna o operando esquerdo.

Exemplo 1: Definindo Valores Padrão

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

Neste exemplo, userInput é uma string vazia, que não é nula ou indefinida, portanto é retornada.

Exemplo 2: Tratamento de valores nulos

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

Aqui, firstName é nulo, então lastName é retornado porque não é nulo nem indefinido.

Comparando operadores lógicos OR (||) e coalescentes nulos (??)

Exemplo 1: Comparando valores falsos

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

Neste exemplo, 0 é considerado falso pelo || operador, mas é um valor válido para o ?? operador.

Exemplo 2: Usando os dois operadores juntos

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

Aqui, userInput é nulo, então fallbackText é usado pelo ?? operador. Em seguida, o resultado é verificado pelo || operador, mas como fallbackText é verdadeiro, ele é retornado.

Exemplos complexos de operadores lógicos OR (||) e de coalescência nula (??)

Exemplo 3: Operações aninhadas com objetos

Considere um cenário em que você precisa definir valores padrão para propriedades de objetos aninhados.

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

Neste exemplo, userSettings.theme.color é uma string vazia, então defaultSettings.theme.color é usado. userSettings.theme.font é nulo, então defaultSettings.theme.font é usado.

Exemplo 4: Parâmetros de Função com Padrões

Ao lidar com parâmetros de função, você pode querer fornecer valores padrão para argumentos ausentes.

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

Neste exemplo, o parâmetro name usa o ?? operador para definir um valor padrão de 'Convidado' se o nome for nulo ou indefinido. O parâmetro saudação usa o || operador para definir um valor padrão de 'Hello' se a saudação for qualquer valor falso diferente de nulo ou indefinido.

Exemplo 5: Combinando com Encadeamento Opcional

Encadeamento opcional (?.) pode ser combinado com || e ?? para lidar com propriedades de objetos profundamente aninhados com segurança.

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

Neste exemplo, o encadeamento opcional garante que se alguma parte do caminho da propriedade não existir, ele retornará indefinido, evitando erros. O || e ?? os operadores fornecem valores padrão apropriados.

Melhores práticas e casos de uso

1. Usar || para inadimplência ampla:

   • Quando você precisa fornecer valores padrão para uma série de condições falsas (por exemplo, strings vazias, 0, NaN).

2. Usar ?? para verificações nulas precisas:

   • Quando você deseja especificamente lidar com nulo ou indefinido sem afetar outros valores falsos.

3. Combinando ambos:

   • Use uma combinação de || e ?? para cenários complexos em que você precisa lidar com valores verdadeiros/falsos e valores nulos de forma distinta.

Perguntas frequentes

O que o operador lógico OR (||) faz?
O operador lógico OR (||) retorna o primeiro valor verdadeiro entre seus operandos ou o último operando se nenhum for verdadeiro.

Quando devo usar o operador Nullish Coalescing (??)?
Use o operador Nullish Coalescing (??) quando precisar lidar com nulo ou indefinido especificamente, sem tratar outros valores falsos como 0 ou strings vazias como nulos.

Posso usar os dois operadores juntos?
Sim, você pode usar ambos || e ?? juntos para lidar com diferentes tipos de valores e garantir que sua lógica de código cubra vários casos de maneira eficaz.

Como é que || lidar com strings vazias?
O || O operador trata strings vazias como falsas, portanto retornará o próximo operando se o primeiro for uma string vazia.

O operador Nullish Coalescing (??) é compatível com todos os navegadores?
O ?? operador é compatível com navegadores e ambientes modernos que suportam ES2020. Para ambientes mais antigos, pode ser necessário usar um transpilador como o Babel.

Quais são as diferenças entre || e ?? operadores?
A principal diferença é que || considera vários valores como falsos (por exemplo, 0, '', falso), enquanto ?? trata apenas nulo e indefinido como valores nulos.

Conclusão

Compreender as diferenças entre os operadores Logical OR (||) e Nullish Coalescing (??) em JavaScript é crucial para escrever código robusto e livre de erros. O || operador é ótimo para cenários amplos de inadimplência, enquanto ?? é perfeito para lidar com valores nulos com precisão. Ao usar esses operadores de maneira adequada, você pode garantir que seu código lide com vários estados de dados de maneira eficaz, proporcionando uma experiência de usuário perfeita.