Diferença entre os Operadores `??` e `||` em TypeScript

Quando se trata de fornecer valores padrão em TypeScript (ou JavaScript), os operadores ?? (Nullish Coalescing) e || (Logical OR) são frequentemente utilizados. No entanto, eles se comportam de maneira diferente quando lidam com valores falsy. Neste artigo, exploraremos as diferenças entre esses operadores e como utilizá-los em TypeScript.

Operador Nullish Coalescing (??)

O operador ?? retorna o operando do lado direito quando o operando do lado esquerdo é null ou undefined. Caso contrário, ele retorna o operando do lado esquerdo.

Exemplo:

const foo: number | null = null;
const fooDefault = foo ?? 42;
console.log(fooDefault); // 42

const bar: string | undefined = undefined;
const barDefault = bar ?? 'default';
console.log(barDefault); // 'default'

const baz: number = 0;
const bazDefault = baz ?? 42;
console.log(bazDefault); // 0

const qux: string = '';
const quxDefault = qux ?? 'default';
console.log(quxDefault); // ''

Neste exemplo, o operador ?? retorna 'default' ou 42 apenas quando o valor do lado esquerdo é null ou undefined. Para valores como 0, '' (string vazia), false, etc., ele retorna o valor do lado esquerdo.

Operador Logical OR (||)

O operador || retorna o operando do lado direito quando o operando do lado esquerdo é um valor falsy. Os valores falsy em JavaScript e TypeScript incluem: false, 0, '' (string vazia), null, undefined, e NaN.

Exemplo:

const foo: number | null = null;
const fooDefault = foo || 42;
console.log(fooDefault); // 42

const bar: string | undefined = undefined;
const barDefault = bar || 'default';
console.log(barDefault); // 'default'

const baz: number = 0;
const bazDefault = baz || 42;
console.log(bazDefault); // 42

const qux: string = '';
const quxDefault = qux || 'default';
console.log(quxDefault); // 'default'

Neste exemplo, o operador || retorna 'default' ou 42 para qualquer valor falsy do lado esquerdo, incluindo 0 e ''.

Diferença Chave

A principal diferença entre ?? e || é como eles tratam valores falsy:

• ?? (Nullish Coalescing): Trata apenas null e undefined como valores falsy. Ideal para cenários onde você deseja tratar especificamente null e undefined e deixar outros valores falsy (como 0 ou '') passarem.

• || (Logical OR): Trata todos os valores falsy (false, 0, '', null, undefined, NaN) como valores falsy. Útil quando você quer fornecer um valor padrão para qualquer valor falsy.

Exemplo de Uso em TypeScript

Nullish Coalescing (??):

function getUserInput(input: string | null | undefined): string {
  const value = input ?? 'No input provided';
  return value;
}

console.log(getUserInput(null)); // 'No input provided'
console.log(getUserInput(undefined)); // 'No input provided'
console.log(getUserInput('')); // ''
console.log(getUserInput('Hello')); // 'Hello'

Logical OR (||):

function getUserInput(input: string | null | undefined): string {
  const value = input || 'No input provided';
  return value;
}

console.log(getUserInput(null)); // 'No input provided'
console.log(getUserInput(undefined)); // 'No input provided'
console.log(getUserInput('')); // 'No input provided'
console.log(getUserInput('Hello')); // 'Hello'

Conclusão

Os operadores ?? e || são úteis para fornecer valores padrão, mas têm comportamentos diferentes em relação a valores falsy. Use ?? quando quiser tratar especificamente null e undefined, e use || quando quiser tratar todos os valores falsy. Com essa compreensão, você pode escolher o operador adequado para suas necessidades de desenvolvimento em TypeScript.

Artigo Relacionado

Para mais detalhes sobre como configurar e escrever testes unitários para serviços backend com dependências de banco de dados usando SQLite in-memory, confira o artigo completo no Dev.to:

Como escrever testes unitários para serviços backend com dependências de banco de dados usando SQLite in-memory