5 recursos JavaScript de ponta para melhorar seu código

Os recursos do JavaScript estão sempre crescendo e recebendo novos, como operadores, construções de sintaxe, expressões. Muitos que foram introduzidos nos últimos anos e alguns deles já são uma segunda natureza, como a expressão de seta gorda ou o operador de =>propagação de objeto ....

Os recursos do JavaScript começam como propostas

Todos esses recursos JavaScript começam como propostas submetidas ao TC 39. O Comitê Técnico 39 se encarrega de padronizar:

a linguagem de programação ECMAScript (JavaScript) de uso geral, plataforma cruzada e neutra em relação ao fornecedor. Isso inclui a sintaxe, a semântica e as bibliotecas da linguagem e as tecnologias complementares que suportam a linguagem.

Existem muitas propostas JavaScript que podemos começar a adicionar ao nosso fluxo hoje, graças ao Babel, o compilador JavaScript. Alguns deles oferecem mais clareza, como o separador numérico. Outros, como as doexpressões, introduzem a capacidade de ter condicionais complexas misturadas com tags React JSX.

Vejamos neste artigo 5 recursos JavaScript que ainda estão em estágios de proposta, mas que podemos usar com o Babel e melhorarão significativamente sua experiência de codificação.

Cada uma tem um link para sua página do Babel onde você pode ver como configurar o Babel para usá-lo, embora os recursos JavaScript propostos descritos aqui já estejam incluídos no Babel 7. Cada seção também tem um link para sua proposta na organização Ecma TC39 em GitHub.

Operador de coalescência nulo

Proposta: https://github.com/tc39/proposal-nullish-coalescing

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

Esta proposta JavaScript descreve um operador que permite fornecer um valor de fallback no lado direito do operador quando uma variável ou uma propriedade de objeto é indefinida. Se não for indefinido, usará o lado esquerdo do operador:

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

Isso é semelhante a escrevê-lo como um operador ternário:

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Observe que esse operador não verifica se o var não existe. Isso lançará um erro:

const val = maybeUndef ?? 2021;  

Mas cuidado, esse operador não é 100% como um operador ternário que retorna o primeiro lado se a condição avaliada for verdadeira. Ele não avaliará valores que geralmente são falsos em JavaScript para false. Por exemplo, uma string vazia não será considerada false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

Ao contrário desse operador de coalescência nulo, um operador ternário seria lançado fallbackcomo resultado dessa avaliação.

Operador de encadeamento opcional

Proposta: https://github.com/tc39/proposal-optional-chaining

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

Este operador também funciona em variáveis ​​e propriedades de objetos: ele verifica se as propriedades aninhadas que estamos percorrendo existem ou não. Sem este operador, temos que verificar cada propriedade aninhada:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Com o novo operador de encadeamento opcional, podemos fazer algo como:

const val = anObj.aProp?.aNestedProp

Isso parece muito mais claro e é mais curto para escrever. Esse operador também funciona com arrays numéricos, então é bom trabalhar com coleções:

const val = anObj.anArray[0]?.someProp

E podemos empilhar vários operadores:

const val = anObj.anArray[0]?.someProp?.aNestedProp

E se combinarmos isso com o anterior, coalescência nula? Obtemos uma sintaxe que verifica se cada propriedade atravessada existe e, se não existir, fornece um valor de fallback:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Se algum dos valores não existir, ele retornará someDefaultValue. Combinar esses dois operadores é uma ótima maneira de substituir a função get do lodash .

Operador de pipeline

Proposta: https://github.com/tc39/proposal-pipeline-operator

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Esse operador faz parte de vários recursos experimentais do JavaScript e fornece mais legibilidade ao encadear várias funções. Considere a seguinte função:

Se precisarmos reutilizar essas transformações parciais que estão encadeadas, podemos dividi-las em funções diferentes e compor o resultado usando-as:

O que é estranho nisso é que temos que começar a ler isso de baixo, a splitBySpacelinha, para cima, para entender as transformações aplicadas à string. Isso vai contra nosso fluxo natural de leitura, de cima para baixo. Também acabamos com todos aqueles parênteses pendurados feios. Isso poderia ser escrito em uma linha e não é muito mais bonito:

Aqui, temos que começar a ler da função central para as funções externas, ou da direita para a esquerda, o que é contra-intuitivo para a leitura ocidental da esquerda para a direita.

O operador de pipeline pode tornar essas construções muito mais legíveis e semelhantes ao encadeamento que tínhamos originalmente antes de mover as transformações para funções separadas:

Agora as transformações aplicadas são escritas de forma semelhante à nossa maneira de escrever, de cima para baixo, são mais claras para ler, e não temos nenhum parêntese pendurado. Sucesso!

Separador numérico

Proposta: https://github.com/tc39/proposal-numeric-separator

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Esse separador numérico é diferente dos outros recursos do JavaScript, pois não é um operador. É uma construção de sintaxe que torna os literais numéricos mais legíveis criando uma separação visual entre grupos de dígitos. Literais numéricos grandes são difíceis de analisar e entender rapidamente, principalmente quando um dígito é repetido várias vezes. Por exemplo:

const longNum = 1000000000000;

É difícil entender com uma olhada rápida. Este separador torna mais legível:

const longNum = 1_000_000_000_000;

Agora podemos entender rapidamente que isso é um trilhão.

Fazer expressões

Proposta: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

O último dos novos recursos JavaScript que veremos é uma expressão que pode ser avaliada. O resultado dessa expressão vem após a execução de um bloco que pode conter várias instruções. Podemos entender facilmente as expressões do se traduzirmos uma expressão de operador ternário como esta:

const res = isCold( color )? 'light-blue': 'orange';

Escreveríamos a do{}expressão equivalente assim:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Observe que não precisamos retornar o valor, pois isso não é uma função. Embora neste caso em particular, isso possa ser escrito de forma mais sucinta como um ternário, as expressões do são muito mais poderosas, permitindo várias instruções, por exemplo:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

Onde isso é realmente poderoso é no JSX, onde podemos misturá-lo com suas tags sem precisar calcular o resultado externamente primeiro. Por exemplo, poderíamos fazer o seguinte se estivéssemos usando React para renderizar esses componentes:

Mais propostas de JavaScript

Há mais propostas sendo discutidas a cada dia para adicionar recursos mais interessantes à linguagem JavaScript. Uma lista cada vez maior desses recursos JavaScript propostos pode ser lida em https://github.com/tc39/proposals#ecmascript-proposals. As propostas aqui estão quase concluídas e, portanto, próximas de serem adicionadas ao padrão ECMAScript, conforme explicado nesta tabela que descreve o processo de aceitação.

Alguns dos novos recursos de JavaScript que exploramos neste artigo, como as expressões do ou o operador de pipeline, são propostas de estágio 1, o que significa que eles ainda têm um caminho a percorrer antes de se tornarem parte do padrão ECMAScript.