Um Tutorial Nullish Coalescing (em JS) para pessoas normais

Ei! Você já se sentiu frustrado ao tentar lidar com valores nulos ou indefinidos em seu código JavaScript? A coalescência nula é um novo recurso que ajuda a tornar isso muito mais fácil. Neste post, explicaremos a coalescência nula.

Isso significa termos simples, exemplos divertidos e nenhum jargão complicado. No final, você estará escrevendo um código JS limpo e conciso em pouco tempo.

Então, o que exatamente é a coalescência nula? Basicamente, é uma maneira curta e simples de fornecer um valor padrão quando algo é nulo ou indefinido. Em vez de ter ternários aninhados confusos ou instruções OR lógicas, você pode usar o operador de ponto de interrogação duplo (??) para combinar com um padrão.

Parece confuso? Não se preocupe, mostraremos como funciona com alguns exemplos fáceis de seguir. Aperte o cinto, vai ser um passeio divertido!

O que exatamente é o operador de coalescência nula?

Você já ficou preso lidando com valores nulos em JavaScript? Eu sei que tenho. Bem, meu amigo, deixe-me apresentá-lo ao operador de coalescência nula (??). Esse carinha vai facilitar muito a sua vida.

Então, o que exatamente é o operador de coalescência nula? Basicamente, é um atalho para fornecer um valor padrão quando algo pode ser nulo ou indefinido. Em vez de escrever:

 let name = obj.name || 'default name';

Agora você pode simplesmente escrever:

 let name = obj.name ?? 'default name';

O ?? O operador retornará o lado esquerdo se não for nulo (significa nulo ou indefinido), caso contrário, retornará o lado direito. Portanto, no exemplo acima, se obj.name não for nulo ou indefinido, o nome será definido como obj.name . Mas se obj.name for nulo ou indefinido, o nome será 'nome padrão'.

Muito útil, certo? Alguns outros exemplos:

 let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array

Espero que isso ajude a simplificar parte de sua lógica condicional em JavaScript.

Um exemplo do mundo real com o qual todos podemos nos relacionar

Você já foi pagar por algo, apenas para perceber que está faltando alguns dólares? Todos nós já estivemos lá. A coalescência nula é como encontrar alguns dólares extras no bolso para que você possa realmente pagar o que deseja comprar.

Digamos que você vá ao seu café favorito para tomar sua bebida matinal habitual. Você vai até o balcão com $ 3 na mão, pronto para fazer o pedido. Mas quando o barista informa o total, ele chega a $ 3,50 após os impostos.

A coalescência nula é como lembrar de repente que você tem outro dólar no bolso, então ainda pode tomar seu café. Ufa!

Em JavaScript, a união nula é uma maneira de fornecer um valor padrão caso algo resolva como nulo ou indefinido. Por exemplo, digamos que você tenha uma função que pode ou não retornar um valor:

 function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50';

Aqui, se getCoffeePrice() retornar indefinido, price será '$3.50' por padrão, graças ao ?? Operador de coalescência nulo. Portanto, você tem a garantia de ter um preço para o seu café de qualquer maneira.

A união nula permite que seu código seja mais resiliente, fornecendo valores padrão de fallback quando as variáveis são nulas ou indefinidas. Assim como encontrar aquele dólar extra no bolso na cafeteria, isso garante que você tenha o que precisa para concluir a transação. Muito útil, certo?

Agora você pode ficar tranquilo sabendo que entende a coalescência nullish como um profissional. Boa codificação e aproveite seu café!

Usando coalescência nula em JavaScript

O operador de coalescência nulo (??) retorna seu operando esquerdo se não for nulo; caso contrário, retorna seu operando correto.

Confuso? Vamos quebrar isso. Um valor "nulo" é nulo ou indefinido. Então o ?? O operador verifica se o valor à esquerda é nulo e, se for, retorna o valor à direita.

Por exemplo:

 const name = bob ?? 'anonymous';

Isso atribuirá o valor de name a 'bob' se bob estiver definido. Se bob for indefinido ou nulo, ele atribuirá a string 'anonymous'.

Por que isso é útil?

Sem o ?? operador, você teria que fazer isso:

 const name = bob !== null && bob !== undefined ? bob : 'anonymous';

O ?? O operador nos dá uma sintaxe mais curta e limpa para fazer essencialmente a mesma coisa.

Ele pode ser usado em qualquer lugar em JavaScript - em variáveis , argumentos de funções , propriedades de objetos etc. Em qualquer lugar você normalmente usaria o || (ou) operador para valores padrão, agora você pode usar ?? para um valor padrão "nulo".

Alguns exemplos:

 const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5

Espero que isso ajude a explicar o operador de coalescência nula!

Por que a coalescência nula é melhor que OR (||)

O operador OR (||) retornará o primeiro valor verdadeiro.

O operador OR (||) funciona retornando o primeiro valor verdadeiro que encontra. Se ambos os valores forem falsos, retornará o último valor. Por exemplo:

 let name = null; let user = name || 'John'; // user is 'John'

Aqui, name é nulo (falsy), então user obtém o segundo valor, 'John'.

O Operador Coalescente Nullish (??) É Mais Inteligente.

O Nullish Coalescing Operator (??) foi introduzido no ES2020 e é um pouco mais inteligente que o OR (||). Ele retornará o primeiro valor definido (não nulo/indefinido). Portanto, se o primeiro valor for uma string vazia, 0 ou false, ele retornará esse valor. Por exemplo:

 let name = ''; let user = name ?? 'John'; // user is ''

Aqui, name é uma string vazia, então user obtém name (o primeiro valor definido).

O Nullish Coalescing Operator nos permite fornecer valores padrão de uma maneira mais limpa. Podemos definir valores padrão para valores nulos/indefinidos sem nos preocuparmos com valores falsos como 0, strings vazias, false, etc.

Por exemplo, digamos que temos uma função que retorna a idade de um usuário, mas às vezes a idade é nula:

 function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal

Aqui, se age for 0, '', ou false, userAge seria incorretamente 30.

Usar o Nullish Coalescing Operator corrige isso:

 let userAge = getAge() ?? 30; // Uses ??

Agora, userAge será apenas 30 se age for nula ou indefinida. Qualquer outro valor falso como 0 será usado.

Portanto, em resumo, use o Nullish Coalescing Operator (??) em vez de OR (||) quando desejar fornecer um valor padrão para nulo/indefinido, mas não para valores falsos como 0, strings vazias ou false.

Seu código ficará mais limpo e menos sujeito a bugs!

Perguntas comuns sobre coalescência nula

Então você já ouviu falar sobre esse novo operador Nullish Coalescing (??) em JavaScript e tem algumas perguntas. Não se preocupe, eu cuido de você!

Com quais tipos de dados o Nullish Coalescing funciona?

• A coalescência nula funciona com qualquer tipo de dados em JavaScript, incluindo:
• Números: 0 ?? 1 // Retorna 1
• Cordas: '' ?? 'Olá' // Retorna 'Olá'
• Booleanos: falso ?? verdadeiro // Retorna verdadeiro
• Objetos: {} ?? {nome: 'João'} // Retorna {nome: 'João'}
• Matrizes: [] ?? [1, 2, 3] // Retorna [1, 2, 3]
• E mais!

Qual é a diferença entre || (Ou e ?? (Coalescência nula) Operadores?

O || (OU) retornará o operando direito se o operando esquerdo for falso (falso, 0, string vazia, nulo, indefinido, NaN).

O ?? (Nullish Coalescing) só retornará o operando direito se o operando esquerdo for nulo ou indefinido.

Então a principal diferença é que ?? considera 0 e strings vazias como valores válidos, enquanto || não.

Quando devo usar?? Sobre ||?

Usar ?? quando você deseja fornecer um valor padrão para nulo ou indefinido, mas considera 0 e strings vazias como valores válidos.

Usar || quando você deseja fornecer um fallback para qualquer valor "falsy".

Espero que isso ajude a esclarecer algumas daquelas perguntas que você tinha sobre o operador Nullish Coalescing! Deixe-me saber se você tem alguma dúvida.

Conclusão

Agora você sabe tudo sobre coalescência nula e como ela funciona em JavaScript. Bem simples, certo? Esse pequeno operador pode economizar seu tempo e tornar seu código mais limpo, fornecendo valores padrão de maneira concisa.

Então vá em frente e una valores anulados para o conteúdo do seu coração! Você está no caminho certo para dominar os recursos modernos do JavaScript.

Codificação feliz!