Diferença entre os Operadores `??` e `||` em TypeScript
Tags: javascript, typescript, tutorial, programming
Published: 2024-06-12 18:05:29

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:

```typescript
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:

```typescript
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 (`??`):

```typescript
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 (`||`):

```typescript
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](https://dev.to/vitorrios1001/como-escrever-testes-unitarios-para-servicos-backend-com-dependencias-de-banco-de-dados-usando-sqlite-in-memory-4526)