Recebi um ótimo feedback dos leitores de um dos meus artigos mais recentes, “10 conceitos para melhorar seu domínio do JavaScript” , sobre as dicas e truques fornecidos para aprimorar sua proficiência em JavaScript. Esta nova peça expande essas ideias, aprofundando-se ainda mais no mundo do JavaScript e examinando recursos avançados e modernos que podem fazer com que você escreva um código eficiente e limpo, mas com brevidade. Quer você seja um desenvolvedor experiente ou esteja apenas começando, poderá escrever um código mais limpo e gerenciável e obter uma compreensão mais profunda da linguagem usando esses recursos. Peço que você me acompanhe enquanto os exploramos juntos para que você possa escrever um código mais eficaz e expressivo.

1. Operador de Coalescência Nula (??)

Introduzido no ECMAScript 2020 e denotado como “??”, o operador nulo de coalescência é um operador lógico que aceita dois operandos e retorna seu operando do lado direito se o operando do lado esquerdo for nulo (nulo ou indefinido), caso contrário, retorna seu operando do lado esquerdo.

O operador de união nula (??) aceita dois valores e retorna o segundo valor se o primeiro for “ nulo ” ou “ indefinido ”.

Esse operador oferece uma maneira mais sucinta e eficaz de lidar com valores padrão em seu código. Antes de definir um valor padrão, o operador de união nullish permite determinar se um valor é nulo ou indefinido. Vamos dar uma olhada em como isso funciona a partir de sua sintaxe, que é declarada da seguinte forma:

Na sintaxe acima, o operador retorna o segundo operando ( operand2 ) se o primeiro operando ( operand1 ) for nulo ou indefinido . Tecnicamente, o operador de coalescência nula é equivalente ao seguinte bloco:

Em vez de escrever um código parecido com o acima ou com este:

com operador de coalescência nullish, você pode escrever um código conciso e limpo que se parece com este:

O operador de coalescência nullish, por exemplo, pode ser usado para definir o valor padrão de uma variável da seguinte forma:

No exemplo acima, se userAge não for nulo ou indefinido, o valor de user.age é atribuído a ele. Caso contrário, userAge será definido como 25.

O uso do operador de coalescência nullish dentro de uma função é outra situação em que isso seria útil:

É crucial ter em mente que o operador coalescente nulo difere do operador OR lógico (||), que produz o primeiro valor verdadeiro dos operandos. Mesmo que o primeiro operando seja 0 ou uma string vazia, o operador lógico OR ainda retornará o valor se for verdadeiro. O operador de coalescência nullish, só retorna o valor do segundo operando, se o primeiro operando for nullish.

2. Operador de atribuição de coalescência nula

O operador de coalescência nullish, conforme mencionado anteriormente, fornece uma forma abreviada de uma expressão JavaScript específica. No entanto, um recurso maravilhoso do JavaScript é que essa nova expressão, quando usada para atribuir um valor, pode ser aprimorada para produzir uma versão mais curta usando um operador conhecido como operador de atribuição de coalescência nula ou operador de atribuição nula lógica (??=) .

O operador de atribuição de união nula (??=) é uma versão abreviada do operador de união nula (??) que permite verificar se uma variável é nula antes de atribuir um valor a ela.

Antes de atribuir um valor a uma variável, você pode usar isso para ver se ela é nula ou indefinida. A variável será atribuída se for nula ou indefinida; caso contrário, seu valor atual será mantido.

Aqui está como sua sintaxe se parece:

Onde variável denota a variável que você deseja verificar e valor denota o valor que deseja atribuir. Como afirmado anteriormente, esse operador é uma forma abreviada de operador de coalescência nula. Assim, sua forma completa ficará assim:

Definir um valor padrão para uma variável como a abaixo é uma maneira eficaz de usar este operador:

No exemplo acima, o userAge nos deu 25 , pois seu valor inicial era indefinido. No entanto, o nome de usuário retornou um valor de string (“sodiq”), pois seu valor inicial não era nulo nem indefinido.

O operador de atribuição de coalescência nula é um dos três operadores de atribuição lógica que foram introduzidos no ECMAScript 2021. Isso, portanto, nos leva aos outros dois, que são o operador de atribuição lógico OR e o operador de atribuição lógico AND.

3. Operador Lógico de Atribuição OR

O operador de atribuição OR lógico é um operador lógico que aceita dois operandos e só atribui o operando da direita ao operando da esquerda se o operando da esquerda for falso, caso contrário, retém o valor do operando da esquerda.

Vamos dar uma olhada em sua sintaxe:

Na sintaxe (x ||= y), o operador lógico de atribuição OU apenas atribui y a x se x for falso.

Se você está confuso sobre o que é um valor falso, ele nada mais é do que um valor considerado falso quando encontrado em um contexto booleano. Um falsy (também escrito como falsey) pode ser um dos seguintes:

• false (a palavra-chave booleana false)
• 0 (o número positivo zero)
• -0 (o número negativo zero)
• 0n (o BigInt zero, também 0x0n)
• “”, '', `` (um valor de string vazio)
• null (um tipo de dados — a ausência de qualquer valor)
• indefinido (um tipo de dado)
• NaN (não é um número)
• document.all

Dito isso, vejamos um exemplo prático de como “ ||=" pode ser usado:

A saída no exemplo acima na linha 3 retornou “ untitled ” porque a variável title era undefined , um valor falso. Por outro lado, a variável title2 tinha a string “ I love JavaScript ” como seu valor inicial, então “||=” não forneceu a string “ untitled ”, mas reteve seu valor inicial.

O operador lógico de atribuição OU:

é uma abreviação da seguinte expressão usando o operador OR:

Na mesma linha, também serve como uma abreviação para a seguinte declaração condicional:

Considerando os exemplos acima, você observará que o operador lógico de atribuição OR garante um código mais conciso e eficiente. Este operador é útil quando você deseja atribuir um valor padrão a uma variável somente se for falso e manter o valor original se for verdadeiro.

É fundamental ter sempre em mente que, ao contrário do operador de união nula (??) e do operador de atribuição de união nula (??=), este operador só atribui um valor se o valor atual da variável for falso. Ele não verifica valores nulos ou indefinidos.

Mais ainda, como o operador lógico OR, a atribuição lógica OR também entra em curto-circuito. O que isso significa é que ele só executa uma atribuição quando seu primeiro operando é falso.

4. Operador Lógico de Atribuição AND

Operador que aceita dois operandos e só atribui o operando da direita ao esquerdo se o da esquerda for verdadeiro, caso contrário, retém o valor do operando da esquerda.

Considere o seguinte código:

Com o uso do operador AND lógico, podemos aplicar curtos-circuitos e obter o seguinte:

Curiosamente, o operador lógico de atribuição AND fornece uma forma abreviada do acima de forma concisa, mas atinge o mesmo objetivo. Aqui está a sintaxe:

Como o operador AND lógico, o operador de atribuição AND lógico também causa um curto-circuito e apenas atribui o operando à direita ao operando à esquerda se o operando à esquerda for verdadeiro. Ele não verifica valores nulos ou indefinidos. Se você precisar verificar valores nulos ou indefinidos, deverá usar o operador de união nula (??) ou o operador de atribuição de união nula (??=).

5. Nomes de propriedade abreviados

Nomes de propriedade abreviados são uma maneira de definir propriedades de objeto em JavaScript, onde o nome da propriedade é o mesmo que o nome da variável que você está atribuindo a ela. Você pode usar uma notação abreviada em vez de escrever o nome da propriedade e o nome da variável individualmente.

Tomemos por exemplo, considere o seguinte código onde pretende criar um objeto com duas propriedades “ x ” e “ y ”:

Você pode expressar a mesma coisa usando os nomes de propriedade abreviados da seguinte forma:

O segundo exemplo atribui o valor da variável y à propriedade y e o valor da variável x à propriedade x. Esta versão do código é mais curta e fácil de ler.

Essa notação abreviada torna-se útil para propriedades de objeto quando a variável e os nomes das propriedades são os mesmos. Ele fornece uma maneira sucinta e mais legível de escrever uma expressão JavaScript.

6. Nomes abreviados de métodos

JavaScript permite que você defina métodos de objeto usando nomes de métodos abreviados, onde o nome do método é o mesmo que o nome da função. Você pode usar uma notação abreviada em vez de escrever o nome do método e o nome da função individualmente.

Vamos dar uma olhada no seguinte código, como exemplo, onde queremos criar um objeto com um método “ sayName ”:

Isso pode ser escrito com o uso de nomes de métodos abreviados assim:

O segundo exemplo acima atribui a função ao método sayName , e o nome do método é o mesmo que o nome da função. Essa notação abreviada pode ajudar a tornar seu código mais legível e sucinto, permitindo que você crie um objeto com métodos que compartilham o mesmo nome da função que você está atribuindo a ele.

O fato de que nomes de métodos abreviados são vinculados ao objeto no qual eles são definidos implica que a palavra-chave “ this ” dentro de um método sempre se refere ao objeto no qual o método é definido. Este é outro benefício de utilizar nomes de métodos abreviados. Essa técnica é conhecida como “ ligação lexical ”. Ele permite o acesso direto a atributos e métodos adicionais no mesmo objeto de dentro do método.

7. Atribuição de Desestruturação

A atribuição de desestruturação é um recurso clássico do ES6 que você pode usar para extrair dados de uma matriz ou objeto e atribuí-los a variáveis ​​separadas.

Uma desestruturação de array, onde os valores são extraídos de um array e atribuídos a variáveis ​​separadas se parece com isto:

Da mesma forma, a desestruturação pode ser usada para extrair valores de um objeto e atribuí-los a variáveis ​​separadas assim:

Durante a desestruturação, você também pode atribuir diferentes nomes de variáveis. Um exemplo é mostrado abaixo:

Objetos aninhados e arrays também podem ser desestruturados:

Além disso, a desestruturação pode ser usada em argumentos de função:

Além disso, durante a desestruturação, os valores padrão podem ser definidos:

Em geral, a desestruturação é um poderoso recurso JavaScript que torna simples extrair dados de arrays e objetos e atribuí-los a variáveis. Isso pode melhorar a legibilidade, clareza e capacidade de manutenção do seu código.

8. Modelo Literais

Outro recurso poderoso introduzido no ECMAScript 2015 são os literais de modelo. Também chamados de strings de modelo e indicados com acentos graves (``), os literais de modelo permitem gerar strings que contêm expressões.

O fato de os literais de modelo tornarem simples e claro inserir expressões em strings é uma de suas principais vantagens. Para adicionar uma variável a uma string, por exemplo, use literais de modelo:

Outro caso de uso dos literais de modelo é inserir o resultado de uma expressão em uma string:

Isso elimina a necessidade de concatenação e simplifica a inclusão do resultado de uma expressão em uma string.

A simplicidade com que strings de várias linhas podem ser criadas usando literais de modelo é uma vantagem adicional. Sem literais de modelo, é necessário concatenar várias strings para criar strings de várias linhas. Conserte o seguinte:

Os literais de modelo tornam simples e mais legível a geração de strings de várias linhas:

Você pode gerar cadeias de caracteres mais intrincadas e dinâmicas usando os literais de modelo Tagged, que são possibilitados pelos literais de modelo. Uma função que recebe o literal de modelo e quaisquer expressões associadas como argumentos é conhecida como uma função de tag. Tome por exemplo:

9. Operador de spread

Em JavaScript, um iterável (como um array ou string) pode ser expandido em uma lista de elementos distintos usando o operador spread. Denotado por três pontos (…), o operador spread pode ser útil em várias circunstâncias, inclusive ao trabalhar com objetos e matrizes.

Por exemplo, o operador spread nos ajuda a concatenar facilmente dois arrays, como o abaixo:

Também pode ser usado para fazer uma cópia superficial de um array ou objeto:

Além disso, o operador spread pode ser usado para passar elementos de array como argumentos individuais para funções:

Ao eliminar a necessidade de loops explícitos e outras operações detalhadas ao trabalhar com arrays e objetos, o uso do operador spread pode ajudar o código JavaScript a se tornar mais conciso. Além disso, possibilita uma programação mais funcional, na qual podem ser criadas funções para trabalhar em peças específicas ao invés de coleções inteiras.

10. Parâmetro de repouso

Uma função em JavaScript pode aceitar qualquer número de parâmetros graças ao parâmetro rest, que é indicado por três pontos (…). Ele cria um array contendo todos os argumentos fornecidos para a função. Ao passar um número arbitrário de argumentos para uma função ou quando você não sabe quantos argumentos serão fornecidos para uma função, isso pode ser útil.

Por exemplo, você poderia escrever uma função que calcula a soma de qualquer quantidade de números usando o parâmetro rest:

O parâmetro resto junto com a desestruturação pode ser usado para atribuir os primeiros argumentos a variáveis ​​e os argumentos restantes a uma matriz. Por exemplo:

Semelhante ao operador spread, o parâmetro rest permite um paradigma de programação de estilo mais funcional e pode ajudar a obter brevidade no código JavaScript, reduzindo a necessidade de loops explícitos e outras operações detalhadas ao trabalhar com um número variável de argumentos.

É importante observar que o parâmetro rest deve ser o último parâmetro da função para evitar um erro de sintaxe.

Por fim, você pode escrever um código mais legível, fácil de manter e eficiente ao dominar a arte da brevidade em JavaScript. A sintaxe avançada abordada neste artigo, como operadores de atribuição lógica, desestruturação, literais de modelo, spread e operadores de descanso, são ferramentas eficazes que podem facilitar a escrita de código limpo e conciso com menos esforço. Você pode aprimorar seu conhecimento de JavaScript e se tornar um desenvolvedor mais eficaz e produtivo adotando essas estratégias em seu fluxo de trabalho de desenvolvimento. Lembre-se de que a simplicidade é sempre o melhor ao desenvolver código, pois evita que você fique atolado em código detalhado ou complexo e permite que você se concentre no problema em questão. Então vá em frente, dê uma olhada nessas técnicas e incorpore-as ao seu conjunto de ferramentas de desenvolvimento.