TypeScript Academy · Aula

Coalescência de Nulos com ??

Forneça alternativas apenas para null e undefined, não para todos os valores falsy.

Coalescência de Nulos com ?? é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

O operador de coalescência de nulos

O operador ?? retorna o lado direito somente quando o lado esquerdo é null ou undefined. Caso contrário, retorna o valor do lado esquerdo. É a maneira precisa de fornecer valores padrão.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Somente valores nulos ou indefinidos ativam a alternativa

A palavra-chave é nulo ou indefinido: somente null e undefined fazem com que o lado direito seja usado. Qualquer outro valor — inclusive os valores falsos — passa sem alteração.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

O problema com ||

O OR lógico || usa a alternativa para qualquer valor falso: 0, '', false, NaN, além de valores nulos ou indefinidos. Isso costuma causar falhas quando 0 ou uma cadeia vazia são entradas válidas.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Valores padrão da maneira correta

Use ?? quando zero, uma cadeia vazia ou falso forem valores legítimos que você deseja manter. Reserve || para casos em que qualquer valor falso realmente deva usar a alternativa.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? com parâmetros de função

Um padrão comum é fornecer um valor padrão para um parâmetro opcional quando undefined é passado, preservando ao mesmo tempo entradas falsas que tenham significado.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

O tipo do resultado de ??

O tipo de a ?? b remove null | undefined do tipo de a e faz a união com o tipo de b. Se a for string | null e b for string, o resultado será string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Encadeando valores padrão

Você pode encadear ?? para tentar várias fontes em ordem, passando à próxima quando um valor for nulo ou indefinido. O primeiro valor não nulo nem indefinido vence.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? e precedência

Você não pode misturar ?? com || ou && sem parênteses — o TypeScript exige isso para evitar ambiguidades. Sempre agrupe as expressões explicitamente.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Distinguindo zero de ausência

Uma necessidade frequente no mundo real: uma temperatura, pontuação ou saldo de 0 é um dado válido, enquanto undefined significa “não fornecido”. ?? mantém esses casos distintos; || mistura os dois.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? com propriedades de objetos

Ler uma propriedade opcional e fornecer um valor padrão para ela é o uso cotidiano de ??. Ele combina naturalmente com o encadeamento opcional, que você combinará na próxima lição.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Quando escolher cada opção

Regra de decisão: se 0, '' ou false forem valores válidos que você precisa preservar, use ??. Se realmente quiser substituir qualquer valor falso, use ||. Falhas ao definir valores padrão quase sempre surgem de recorrer a || por hábito.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Verificação rápida

Teste sua compreensão da coalescência de nulos.

Recapitulação: coalescência de nulos

Você aprendeu que ??:

Retorna o valor alternativo somente quando o lado esquerdo é null ou undefined.
Preserva valores falsos válidos, como 0, '' e false — ao contrário de ||.
Remove null | undefined do tipo do resultado.
Exige parênteses quando combinado com || ou &&.

A seguir, combinamos ?. e ??.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Perguntas Frequentes

A aula “Coalescência de Nulos com ??” é grátis?

Sim — o texto completo de “Coalescência de Nulos com ??” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Coalescência de Nulos com ??”?

Forneça alternativas apenas para null e undefined, não para todos os valores falsy. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Coalescência de Nulos com ??”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para TypeScript Academy