Operador de Coalescência Nulo em JavaScript

Este artigo explica o Operador de Coalescência Nulo em JavaScript.

YouTube Video

Operador de Coalescência Nulo em JavaScript

No JavaScript, o Operador de Coalescência Nulo (??) avalia se um valor é null ou undefined e retorna um valor padrão diferente, se for o caso. É semelhante ao operador lógico OU (||) comumente usado, mas difere ao se especializar em null e undefined.

O operador lógico OR retorna o valor à direita se o valor à esquerda for falsy, enquanto o operador de coalescência nula retorna o valor à direita apenas quando o valor à esquerda for null ou undefined. Essa funcionalidade permite o tratamento correto de valores como 0 e strings vazias ("").

Sintaxe Básica

1let result = value ?? defaultValue;

• value é o valor que está sendo verificado.
• defaultValue é o valor retornado quando value é null ou undefined.

Exemplos de Uso do Operador de Coalescência Nulo

O exemplo a seguir implementa um processo para retornar um valor padrão em caso de null ou undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

Neste código, como name é null, o valor de defaultName, "Anonymous", é retornado. Se name for um valor diferente de null ou undefined, esse valor é retornado.

Diferenças com o operador lógico OU

O operador de coalescência nula é semelhante ao operador lógico OR, mas tem uma diferença importante. O operador lógico OR verifica valores 'falsy' (false, 0, NaN, "", null, undefined, etc.), enquanto o operador de coalescência nula verifica apenas null e undefined.

Exemplo de Operador Lógico OU:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Exemplo de Operador de Coalescência Nulo:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

Dessa forma, o operador de coalescência nula mantém valores válidos como 0 e strings vazias ("") e retorna um valor padrão apenas quando necessário. Como o operador lógico OR trata esses valores como falsy e retorna o valor padrão, é importante escolher o operador apropriado dependendo do caso de uso.

Exemplo Quando Usado em Combinação:

O operador de coalescência nula também pode ser combinado com outros operadores lógicos, mas é necessário ter cuidado ao fazê-lo.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• Por exemplo, ao usá-lo junto com o operador lógico OR (||) ou o operador lógico AND (&&), parênteses devem ser usados para esclarecer a ordem das operações.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• Neste exemplo, a ?? b é avaliado primeiro e, como a é null, b é retornado. Então, b || c é avaliado, e como b é falsy, c é finalmente retornado.

Casos em que o operador de coalescência nula é útil

Os seguintes são casos em que o operador de coalescência nula é útil.

• Valores padrão para formulários Isso pode ser usado em cenários onde um valor padrão é definido para os campos de entrada de formulário quando o usuário não insere nada.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• Tratamento de respostas da API O processamento de fallback pode ser realizado quando o valor é null ou undefined nas respostas da API.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Resumo

O operador de coalescência nula (??) é muito útil para inicializar dados e lidar com respostas de API, pois retorna um valor padrão ao encontrar null ou undefined. Em particular, é uma escolha melhor do que o operador lógico OR tradicional (||) quando você deseja lidar adequadamente com valores falsy, como 0 ou strings vazias.

Sobre o operador de atribuição de coalescência nula (??=)

Visão geral

No JavaScript, o operador de atribuição de coalescência nula ??= foi introduzido para atribuir eficientemente um novo valor a variáveis que possuem null ou undefined. Este operador é um atalho conveniente para atribuir a uma variável apenas se um valor específico for null ou undefined.

Uso Básico

O operador de atribuição de coalescência nula funciona da seguinte forma:.

• Se uma variável é null ou undefined, ela atribui o valor do lado direito.
• Se a variável não for null nem undefined, ela não faz nada e mantém o valor atual.

Sintaxe

A sintaxe básica do operador de atribuição de coalescência nula é a seguinte:.

1x ??= y;

• y é atribuído a x se x for null ou undefined.
• Se x já possui um valor (não null ou undefined), o valor de x não será alterado.

Exemplo

Vamos ver um exemplo básico do operador de atribuição de coalescência nula.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• Neste código, como userName é null, o valor de defaultName está sendo atribuído.

Em seguida, aqui está um exemplo onde o valor não é null nem undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• Nesse caso, como "Alice" já está definido para userName, nenhuma atribuição é feita.

Comparação com outros operadores de atribuição

O JavaScript também possui vários outros operadores de atribuição. Em particular, a diferença com o operador de atribuição lógico OU (||=) é importante.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

O operador de atribuição lógica OR atribui um valor mesmo ao encontrar valores falsy, como false, 0 ou uma string vazia (""), enquanto o operador de atribuição de coalescência nula opera apenas quando o valor é null ou undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Como o operador de atribuição de coalescência nula opera apenas em null ou undefined, ele é muito útil quando você deseja manter valores como 0 ou false.

Casos de uso no mundo real

Um caso de uso do mundo real para o operador de atribuição de coalescência nula pode ser o seguinte:.

1. Definindo valores padrão

   É útil para definir valores padrão quando entradas do usuário ou respostas de APIs podem ser null ou undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. Tratando parâmetros opcionais

   Também pode ser utilizado para realizar ações padrão quando argumentos de função não são especificados.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Resumo

O operador de atribuição de coalescência nula (??=) só atribui um valor quando o valor à esquerda é null ou undefined, tornando o código mais conciso e ajudando a prevenir atribuições não intencionais. Especialmente ao lidar com valores "falsy" como 0 ou false, pode ser mais apropriado do que o operador lógico OR tradicional (||=).

Ao utilizar este operador, é possível criar um código mais robusto e legível.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video