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 apenasnull
eundefined
como valores falsy. Ideal para cenários onde você deseja tratar especificamentenull
eundefined
e deixar outros valores falsy (como0
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:
Top comments (0)