Operador ?? no JavaScript: Como funciona o Nullish Coalescing e quando usar



Objetivo

Apresentar, de forma detalhada e prática, o funcionamento do operador de coalescência nula (??) no JavaScript, destacando sua sintaxe, comportamento interno e principais casos de uso no desenvolvimento moderno. Este artigo demonstra como esse operador simplifica verificações de valores nulos ou indefinidos, reduz código redundante e melhora a legibilidade das aplicações, por meio de exemplos reais, comparações com abordagens tradicionais e boas práticas recomendadas.

Operador de Coalescência Nula (??)

O JavaScript moderno (a partir do ECMAScript 2020) introduziu o operador ??, conhecido como Nullish Coalescing Operator.

Esse operador resolve um problema clássico: distinguir entre valores realmente ausentes (null ou undefined) e valores “válidos”, como o número 0, o booleano false ou a "" (string vazia).

Ele é usado principalmente para fornecer um valor padrão apenas quando uma variável é null ou undefined.

Fallback em JavaScript

Fallback em JavaScript é um mecanismo de segurança (contingência) que executa um código alternativo quando o comportamento original falha, não está disponível ou retorna null/undefined. Ele garante a resiliência da aplicação, permitindo que a funcionalidade continue operando em vez de quebrar.

Exemplo, o uso operador de coalescência nula (??) ou OR (||) para definir um valor caso uma variável não esteja definida.

Referências

Trabalhando com o operador ternário em JavaScript

O que é o operador (??) no JavaScript

O operador ?? retorna o primeiro valor que não seja null nem undefined.

Sintaxe básica:

const resultado = valor1 ?? valor2;

Comportamento:

  • Se valor1 não for null nem undefined, retorna valor1

  • Caso contrário, retorna valor2

⚠️ Diferença importante em relação ao operador ||

Muitos desenvolvedores utilizavam o operador lógico OR (||) para definir valores padrão. Porém, ele pode gerar comportamentos incorretos.

Exemplo com ||:

const valor = 0 || 10;
console.log(valor); // 10 ❌ (errado para muitos cenários)

Exemplo com ??:

const valor = 0 ?? 10;
console.log(valor); // 0 ✅ (correto)

👉 O || considera valores “falsy” (falso no contexto booleano → como 0, "", NaN e false)
👉 O ?? considera apenas null e undefined

Por que esse operador existe?

Antes do ??, era comum escrever:

const nome = (usuario !== null && usuario !== undefined) ? usuario : "Visitante";

ou usando || (com risco):

const nome = usuario || "Visitante";

Agora, com ??

const nome = usuario ?? "Visitante";
 ✔ Mais limpo
✔ Mais seguro
✔ Mais semântico

✅ Quando usar o operador ??

Use ?? quando:

  • Trabalhar com valores que podem ser null ou undefined (nullish)
  • Consumir APIs externas
  • Manipular dados opcionais
  • Definir valores padrão com precisão
  • Evitar sobrescrever valores válidos como 0, false ou ""

❌ Quando NÃO usar o operador ??

Não utilize ?? quando quiser verificar (falsy):

  • string vazia ""
  • número 0
  • boolean false
  • array vazio []

Para esses casos, use:

  • validações específicas
  • if
  • Boolean()
  • || (quando apropriado)

Exemplos práticos

🔹 Exemplo 1 – Variável indefinida

let nome;
const usuario = nome ?? "Anônimo";

console.log(usuario); // Anônimo

🔹 Exemplo 2 – Trabalhando com objetos

const user = {
  nome: "Carlos",
  idade: null
};

const idade = user.idade ?? 18;

console.log(idade); // 18

🔹 Exemplo 3 – Entrada de formulário

const input = {
  email: undefined
};

const email = input.email ?? "email@desconhecido.com";

console.log(email); // email@desconhecido.com

🔹 Exemplo 4 – Encadeamento (fallback múltiplo)

const valor = dados.post 
            ?? dados.get 
            ?? dados.default 
            ?? "Não informado";

console.log(valor);

📌 Fluxo:

  1. Tenta post
  2. Se null/undefined → tenta get
  3. Depois default
  4. Senão → valor padrão ("Não informado")

🔹 Exemplo 5 – Consumo de API

const resposta = {
  status: null,
  mensagem: undefined
};

const status = resposta.status ?? "erro";
const mensagem = resposta.mensagem ?? "Sem detalhes";

console.log(status, mensagem);

🔹 Exemplo 6 – Com optional chaining (uso avançado)

const usuario = {};

const cidade = usuario.endereco?.cidade ?? "Cidade não informada";

console.log(cidade);

👉 Combinação poderosa:

  • ?. evita erro de acesso
  • ?? define fallback seguro

O Optional Chaining (?.) permite acessar propriedades de objetos em camadas com segurança, interrompendo a execução e retornando undefined caso algum nível do caminho seja nulo ou indefinido. Ele evita que sua aplicação trave com erros de leitura ao tentar acessar dados que ainda não foram carregados ou não existem.

Nullish Coalescing (??)  - Comparação com PHP

No JavaScript, o operador ?? considera apenas valores null e undefined, exigindo que a variável esteja declarada; já no PHP, além de null, ele também trata variáveis inexistentes de forma implícita - faz uma verificação implícita semelhante ao isset().

Em outras palavras, o JavaScript é mais rigoroso, enquanto o PHP é mais permissivo nesse tipo de verificação.

  • No PHP: O ?? é o uso sintático para a função isset(). Ele verifica se a variável existe e se não é null.
    • Vantagem: Se você tentar usar uma variável que nunca foi declarada, o PHP não gera um erro (Notice/Warning), ele apenas usa o fallback.
  • No JavaScript: O ?? verifica se o valor é estritamente null ou undefined.
    • Atenção: Se você tentar usar uma variável que não foi declarada (e não for uma propriedade de objeto), o JavaScript vai quebrar e lançar um ReferenceError.

Comportamento do operador Nullish Coalescing (??

Leia o artigo: Operador ?? no PHP: Como funciona o Null Coalescing Operator e quando usar

Conclusão

O operador ?? é uma das adições mais importantes ao JavaScript moderno. Ele permite escrever código mais previsível, evitando bugs comuns relacionados a valores “falsy”.

Seu uso correto:

  • melhora a legibilidade
  • reduz condicionais desnecessárias
  • torna aplicações mais robustas

Quando combinado com optional chaining (?.), ele se torna ainda mais poderoso, sendo essencial em aplicações modernas que lidam com dados dinâmicos, APIs e estruturas complexas.

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO