Nullish Coalescing em JavaScript: Um Guia Abrangente para Atribuição de Valor Padrão

Em JavaScript, atribuir valores padrão é uma tarefa comum. Tradicionalmente, os desenvolvedores usam o operador OR (||) para esse propósito. No entanto, o operador nullish coalescing (??), introduzido no ECMAScript 2020, fornece uma maneira mais precisa e confiável de lidar com atribuições de valor padrão, especificamente ao lidar com valores null ou undefined. Este guia fornece um mergulho profundo no operador nullish coalescing, explorando sua sintaxe, comportamento, diferenças em relação ao operador OR e casos de uso práticos.

O que é Nullish Coalescing?

O operador nullish coalescing (??) é um operador lógico que retorna seu operando do lado direito quando seu operando do lado esquerdo é null ou undefined. Caso contrário, ele retorna seu operando do lado esquerdo. Em termos mais simples, ele fornece um valor padrão somente quando uma variável é estritamente null ou undefined.

Sintaxe

A sintaxe para o operador nullish coalescing é direta:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Aqui, leftOperand é a variável ou expressão que você deseja verificar se é null ou undefined, e rightOperand é o valor padrão que você deseja atribuir se leftOperand for de fato null ou undefined.

Exemplo

Considere o seguinte exemplo:

            const username = null ?? "Guest";
console.log(username); // Output: Guest

const age = undefined ?? 25;
console.log(age); // Output: 25

const city = "London" ?? "Unknown";
console.log(city); // Output: London
            

              
                Copy
              
            
          

Neste exemplo, username recebe o valor padrão "Guest" porque é inicialmente null. Da mesma forma, age recebe 25 porque começa como undefined. No entanto, city retém seu valor original, "London", porque não é nem null nem undefined.

Valores Nullish vs. Falsy

É crucial entender a diferença entre valores nullish e falsy em JavaScript. Um valor nullish é null ou undefined. Um valor falsy é um valor que é considerado falso quando encontrado em um contexto booleano. Os valores falsy incluem:

• null
• undefined
• 0 (zero)
• NaN (Não é um Número)
• '' (string vazia)
• false

A principal distinção é que o operador nullish coalescing verifica apenas null ou undefined, enquanto o operador OR (||) verifica qualquer valor falsy.

A Diferença Entre ?? e ||

O operador OR (||) é um operador OR lógico que retorna o operando do lado direito se o operando do lado esquerdo for falsy. Embora possa ser usado para atribuir valores padrão, pode levar a um comportamento inesperado ao lidar com valores como 0 ou uma string vazia.

Exemplo: As Armadilhas de ||

            const quantity = 0 || 10; // Pretendemos um padrão de 10 se a quantidade estiver faltando
console.log(quantity); // Output: 10 (Inesperado!) porque 0 é falsy

const text = '' || 'Default Text'; // Pretendemos um texto padrão se o texto estiver faltando
console.log(text); // Output: Default Text (Inesperado!) porque '' é falsy
            

              
                Copy
              
            
          

No primeiro exemplo, pretendíamos atribuir uma quantidade padrão de 10 somente se quantity estivesse faltando (null ou undefined). No entanto, como 0 é um valor falsy, o operador OR atribuiu incorretamente o valor padrão. Da mesma forma, a string vazia faz com que o texto padrão seja exibido mesmo se a string existir (mas estiver vazia).

Usando ?? para Precisão

Vamos reescrever o exemplo anterior usando o operador nullish coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (Correto!)

const text = '' ?? 'Default Text';
console.log(text); // Output: '' (Correto!)
            

              
                Copy
              
            
          

Agora, a saída é como esperado. O operador nullish coalescing verifica apenas null ou undefined, então 0 e '' são tratados como valores válidos e seus valores originais são preservados.

Casos de Uso para Nullish Coalescing

O operador nullish coalescing é útil em vários cenários onde você precisa fornecer valores padrão somente quando uma variável é estritamente null ou undefined. Aqui estão alguns casos de uso comuns:

1. Lidando com Parâmetros de Função Opcionais

Ao definir uma função com parâmetros opcionais, você pode usar o operador nullish coalescing para fornecer valores padrão se os parâmetros não forem fornecidos.

            function greet(name, greeting) {
 const userName = name ?? "User";
 const userGreeting = greeting ?? "Hello";
 console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Output: Hello, User!
greet("Alice"); // Output: Hello, Alice!
greet("Bob", "Greetings"); // Output: Greetings, Bob!
            

              
                Copy
              
            
          

2. Definindo Opções de Configuração Padrão

Ao trabalhar com objetos de configuração, você pode usar o operador nullish coalescing para garantir que os valores padrão sejam usados se certas opções de configuração não forem especificadas.

            const config = {
 timeout: 5000,
 retries: 3
};

function fetchData(options) {
 const timeout = options.timeout ?? 10000; // Timeout padrão de 10 segundos
 const retries = options.retries ?? 5; // 5 tentativas padrão
 console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Output: Timeout: 5000, Retries: 3
fetchData({}); // Output: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Output: Timeout: 10000, Retries: 5
            

              
                Copy
              
            
          

3. Acessando Propriedades de Objetos Aninhados

Ao acessar propriedades de objetos aninhados, o operador nullish coalescing pode ser combinado com o encadeamento opcional (?.) para fornecer valores padrão se alguma das propriedades intermediárias for null ou undefined.

            const user = {
 profile: {
 address: {
 city: "New York"
 }
 }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Output: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Output: Unknown
            

              
                Copy
              
            
          

4. Trabalhando com APIs e Dados Externos

Ao buscar dados de APIs ou fontes externas, o operador nullish coalescing pode ser usado para fornecer valores padrão se certos campos de dados estiverem faltando ou tiverem valores null ou undefined. Considere recuperar dados do usuário de diferentes regiões. Suponha que algumas regiões podem não incluir o campo `country` em seus dados de usuário.

            async function getUserData(userId) {
 try {
 const response = await fetch(`https://api.example.com/users/${userId}`);
 const data = await response.json();
 const country = data.country ?? "Unknown Country";
 const timezone = data.timezone ?? "UTC";
 console.log(`User is from: ${country}, Timezone: ${timezone}`);
 } catch (error) {
 console.error("Error fetching user data:", error);
 }
}

// Simulating different API responses:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// To test this, you would need an actual API or mock fetch.
// For demonstration purposes, let's simulate the responses:
global.fetch = async (url) => {
 if (url.includes("123")) {
 return { json: async () => userWithCountry };
 } else if (url.includes("456")) {
 return { json: async () => userWithoutCountry };
 }
 throw new Error("Unexpected URL");
};

getUserData(123); // Output: User is from: USA, Timezone: EST
getUserData(456); // Output: User is from: Unknown Country, Timezone: GMT
            

              
                Copy
              
            
          

Precedência de Operadores

O operador nullish coalescing tem precedência de operador relativamente baixa. É inferior aos operadores OR (||) e AND (&&). Portanto, ao combinar o operador nullish coalescing com outros operadores lógicos, é essencial usar parênteses para definir explicitamente a ordem das operações. Deixar de fazer isso pode resultar em erros de sintaxe ou comportamento inesperado.

Exemplo: Usando Parênteses para Clareza

            // Sem parênteses (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Com parênteses (Correto)
const result = false || (null ?? "Default");
console.log(result); // Output: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Output: null
            

              
                Copy
              
            
          

No primeiro exemplo, a falta de parênteses resulta em um SyntaxError porque o mecanismo JavaScript não consegue determinar a ordem pretendida das operações. Ao adicionar parênteses, dizemos explicitamente ao mecanismo para avaliar primeiro o operador nullish coalescing. O segundo exemplo é válido; no entanto, a saída é diferente porque a expressão `||` é avaliada primeiro.

Compatibilidade do Navegador

O operador nullish coalescing (??) é um recurso relativamente novo, por isso é crucial considerar a compatibilidade do navegador, especialmente se você estiver segmentando navegadores mais antigos. A maioria dos navegadores modernos suporta o operador nullish coalescing, incluindo:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Se você precisar dar suporte a navegadores mais antigos, você pode usar um transpiler como o Babel para converter seu código para uma versão compatível do JavaScript. O Babel transformará o operador ?? em código JavaScript equivalente que funciona em ambientes mais antigos.

Melhores Práticas

Aqui estão algumas das melhores práticas para usar o operador nullish coalescing de forma eficaz:

• Use ?? para verificações nullish: Use o operador nullish coalescing (??) quando você quiser especificamente fornecer um valor padrão somente quando uma variável for null ou undefined.
• Use parênteses para expressões complexas: Ao combinar o operador nullish coalescing com outros operadores lógicos, use parênteses para definir claramente a ordem das operações.
• Considere a compatibilidade do navegador: Verifique a compatibilidade do navegador e use um transpiler se necessário para dar suporte a navegadores mais antigos.
• Use de forma consistente: Adote o ?? onde apropriado para um estilo de codificação mais previsível em todo o projeto.
• Combine com encadeamento opcional: Use ?? em conjunto com o encadeamento opcional ?. para acessar e atribuir com segurança valores padrão a propriedades aninhadas de objetos.

Considerações Globais

Ao desenvolver para um público global, considere os seguintes pontos relacionados às atribuições de valor padrão:

• Localização: Os valores padrão podem precisar ser localizados com base no idioma ou região do usuário. Por exemplo, um símbolo de moeda padrão ou formato de data.
• Normas Culturais: Certos valores padrão podem precisar ser ajustados com base nas normas culturais. Por exemplo, uma mensagem de saudação padrão pode precisar ser diferente em diferentes culturas.
• Acessibilidade: Garanta que os valores padrão sejam acessíveis e compreensíveis para usuários com deficiência. Forneça rótulos claros e descritivos para valores padrão em interfaces de usuário.
• Fusos horários e datas: Ao trabalhar com datas e horários, use fusos horários e formatos de data apropriados para garantir que os valores padrão sejam exibidos corretamente para usuários em diferentes regiões.

Exemplo: Localização com Nullish Coalescing

Digamos que você deseja exibir uma mensagem de boas-vindas padrão em diferentes idiomas com base na localidade do usuário. Você pode usar o operador nullish coalescing para fornecer uma mensagem padrão se uma mensagem localizada não estiver disponível.

            function getWelcomeMessage(locale) {
 const localizedMessages = {
 en: "Welcome!",
 fr: "Bienvenue !",
 de: "Willkommen!"
 };

 const message = localizedMessages[locale] ?? "Welcome!"; // Padrão para Inglês se a localidade não for encontrada
 return message;
}

console.log(getWelcomeMessage("fr")); // Output: Bienvenue !
console.log(getWelcomeMessage("es")); // Output: Welcome! (Padrão para Inglês)
            

              
                Copy
              
            
          

Conclusão

O operador nullish coalescing (??) é uma adição valiosa à linguagem JavaScript. Ele fornece uma maneira mais precisa e confiável de atribuir valores padrão em comparação com o operador OR (||), especialmente ao lidar com valores como 0 ou strings vazias. Ao entender sua sintaxe, comportamento e casos de uso, você pode escrever um código mais limpo e fácil de manter que lida com precisão com atribuições de valor padrão. Lembre-se de considerar a compatibilidade do navegador, a precedência do operador e as considerações globais ao usar o operador nullish coalescing em seus projetos.

Ao seguir as melhores práticas descritas neste guia, você pode aproveitar efetivamente o operador nullish coalescing para melhorar a qualidade e a confiabilidade do seu código JavaScript, tornando-o mais robusto e fácil de entender. Lembre-se de sempre priorizar a clareza e a manutenção em seu código, e o operador nullish coalescing pode ser uma ferramenta poderosa para atingir esses objetivos.