Seis recursos minúsculos, mas incríveis, do ES6

Todos na comunidade JavaScript adoram novas APIs, atualizações de sintaxe e recursos: eles oferecem maneiras melhores, mais inteligentes e mais eficientes de realizar tarefas importantes. O ES6 traz uma enorme onda de novos recursos e os fornecedores de navegadores trabalharam arduamente no ano passado para colocar essas atualizações de linguagem em seus navegadores. Embora existam grandes atualizações, algumas das atualizações menores da linguagem colocaram um enorme sorriso em meu rosto; a seguir, seis das minhas novas adições favoritas na linguagem JavaScript!

1. Objeto [key] sintaxe de configuração

Um incômodo que os desenvolvedores de JavaScript têm tido há muito tempo é não poder definir o valor de uma chave de variável em uma declaração literal de objeto – o senhor tinha que adicionar a chave/valor após a declaração original:

// *Very* reduced example
let myKey = 'key3';
let obj = {
    key1: 'One',
    key2: 'Two'
};
obj[myKey] = 'Three';

Na melhor das hipóteses, esse padrão é inconveniente e, na pior, é confuso e feio. O ES6 oferece aos desenvolvedores uma maneira de sair dessa bagunça:

let myKey = 'variableKey';
let obj = {
    key1: 'One',
    key2: 'Two',
    [myKey]: 'Three' /* yay! */
};

Envolvendo a chave variável em [] permite que os desenvolvedores façam tudo em uma única instrução!

2. Funções de seta

O senhor não precisa ter acompanhado todas as alterações do ES6 para saber sobre as funções de seta – elas têm sido fonte de muita conversa e alguma confusão (pelo menos inicialmente) para os desenvolvedores de JavaScript. Embora eu pudesse escrever várias postagens no blog para explicar cada faceta da função de seta, quero destacar como as funções de seta fornecem um método para condensar o código de funções simples:

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11

// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

Não function ou return e, às vezes, nem mesmo é necessário adicionar () — as funções de seta são um ótimo atalho de codificação para funções simples.

3. find/findIndex

O JavaScript oferece aos desenvolvedores Array.prototype.indexOf para obter o índice de um determinado item em uma matriz, mas o indexOf não fornece um método para calcular a condição do item desejado; o senhor também precisa procurar um valor conhecido exato. Digite find e findIndex — dois métodos para pesquisar uma matriz em busca da primeira correspondência de um valor calculado:

let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

find e findIndex, ao permitir uma pesquisa de valores calculados, também evita efeitos colaterais desnecessários e o looping através do possível valores!

4. O operador de spread: ...

O operador spread sinaliza que um array ou objeto iterável deve ter seu conteúdo dividido em argumentos separados em uma chamada. Alguns exemplos:

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];

// Convert Arguments to Array
let argsArray = [...arguments];

O incrível bônus adicional é poder converter objetos iteráveis (NodeList, arguments, etc.) para true arrays — algo que usamos Array.from ou outros hacks para fazer isso há muito tempo.

5. Literais de modelo

As strings de várias linhas no JavaScript foram originalmente criadas por concatenação ou terminando a linha com um \ caractere, e ambos podem ser difíceis de manter. Muitos desenvolvedores e até mesmo algumas estruturas começaram a abusar do <script> para encapsular modelos de várias linhas, outros realmente criaram os elementos com o DOM e usaram outerHTML para obter o HTML do elemento como uma string.

O ES6 nos fornece literais de modelopor meio do qual o senhor pode criar facilmente cadeias de caracteres de várias linhas usando caracteres backticks:

// Multiline String
let myString = `Hello

I'm a new line`; // No error!

// Basic interpolation
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

É claro que os literais de modelo permitem que o senhor crie mais do que strings de várias linhas, como interpolação simples a avançadamas apenas a capacidade de criar cadeias de caracteres de várias linhas com elegância me faz sorrir.

6. Valores de argumento padrão

Fornecer valores de argumentos padrão em assinaturas de funções é um recurso fornecido por muitas linguagens do lado do servidor, como python e PHP, e agora temos esse recurso no JavaScript:

// Basic usage
function greet(name="Anon") {
  console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!

// You can have a function too!
function greet(name="Anon", callback = function(){}) {
  console.log(`Hello ${name}!`);

  // No more "callback && callback()" (no conditional)
  callback();
}

// Only set a default for one parameter
function greet(name, callback = function(){}) {}

Outras linguagens podem lançar um aviso se os argumentos sem um valor padrão não forem fornecidos, mas o JavaScript continuará a definir esses valores de argumento como undefined.

Os seis recursos que listei aqui são apenas uma gota no balde do que o ES6 oferece aos desenvolvedores, mas são recursos que usaremos com frequência sem pensar em nada. São essas pequenas adições que, muitas vezes, não recebem atenção, mas se tornam essenciais para nossa codificação;

Deixei alguma coisa de fora? Diga-me quais pequenas adições ao JavaScript o senhor adora!