Mais seis recursos minúsculos, porém incríveis, do ES6

O ES6 trouxe para os desenvolvedores de JavaScript um enorme conjunto de novos recursos e atualizações de sintaxe que os deixam empolgados. Algumas dessas atualizações da linguagem são bem grandes, mas outras são pequenas atualizações que o senhor não perceberia se não fosse cuidadoso – foi por isso que escrevi sobre Seis recursos minúsculos, mas incríveis, do ES6O artigo “Six Tiny But Awesome ES6 Features” (Seis recursos minúsculos, mas incríveis, do ES6), uma lista de pequenas coisas que podem fazer uma grande diferença quando o senhor codifica para os navegadores atuais. Gostaria de compartilhar com os senhores mais seis joias que podem começar a usar para reduzir o código e maximizar a eficiência.

1. Abreviação de objeto

Uma nova sintaxe abreviada de criação de objetos permite que os desenvolvedores criem objetos key => value sem definir a chave: o nome da var se torna a chave e o valor da var se torna o valor do novo objeto:

var x = 12;
var y = 'Yes!';
var z = { one: '1', two: '2' };

// The old way:
var obj = {
    x: x,
    y: y,
    z: z
};

var obj = { x, y, z };
/*
    {
        x: 12,
        y: "Yes!",
        z: { one: '1', two: '2' }
    }
*/

Não sei dizer quantas vezes codifiquei manualmente as propriedades key => value exatamente dessa mesma forma; agora simplesmente temos um método mais curto para concluir essa tarefa.

2. Propriedades do método

Quando se trata dessas dicas de ES6, parece que fico obcecado em apenas evitar adicionar o function e acho que essa dica não é diferente. De qualquer forma, podemos encurtar as declarações de função de objeto a la:

// Format: { myFn(param1) { ... } }
var davidwalsh = {
    makeItHappen(param) {
        /* do stuff */
    }
}

O senhor tem que admitir que deixar de fora todos os function torna o código mais limpo e requer menos manutenção.

3. Blocos vs. funções executadas imediatamente

O padrão para criar funções de execução imediata é um pouco feio:

(function() {

   /* do stuff */

})();

Com o ES6, podemos criar um bloco com apenas {}, e com let, podemos executar imediatamente um comportamento semelhante a uma função sem todos os parênteses:

{ 
    let j = 12; 
    let divs = document.querySelectorAll('div');

    /* do more stuff */
}

j;  // ReferenceError: j is not defined...

Se o senhor declarar uma função dentro do bloco, ela vazará, mas se mantiver a let, o senhor basicamente criou um IEF sem os parênteses.

4. for loops e let

Devido ao içamento de variáveis no JavaScript, muitas vezes declaramos variáveis de iterador “inúteis” no topo dos blocos, código for(var x =...ou, o que é pior, esquecíamos de fazer qualquer uma dessas coisas e, assim, vazávamos uma global… apenas para iterar por um maldito iterável. O ES6 corrige esse incômodo, permitindo que usemos let como cura:

for(let x = 0; x <= elements.length; x++) {
  console.log(x); // x increments
}

x; // ReferenceError: x is not defined

Em um futuro próximo, veremos let sendo usado tanto quanto, se não mais, do que o var.

5. get e set para aulas

Como membro da equipe do MooTools, eu era um grande fã de classes em JavaScript antes que as classes em JavaScript fossem realmente uma coisa. Agora elas são uma coisa:

class Cart {
  constructor(total) {
      this._total = total;
  }
  get total() { return this._total; }
  set total(v) { this._total = Number(v); }

  get totalWithTax() { return parseInt(this._total * 1.1, 10); } /* 10% tax */
}

var cart = new Cart(100);

cart.totalWithTax === 110;

A melhor parte é a nova capacidade de criar getters e setters para propriedades! Não há necessidade de criar configurações especiais por meio de funções – elas são executadas automaticamente quando são definidas por meio de funções básicas obj.prop = {value}.

6. startsWith, endsWith, e includes

Estamos codificando nossas próprias funções String básicas há muito tempo – lembro-me de fazer isso nos primeiros dias do MooTools. O startsWith, endsWith, e includes As funções de cadeia de caracteres são exemplos dessas funções:

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;

Ver as funções de senso comum chegarem a uma linguagem é incrivelmente satisfatório;

O ES6 foi um salto incrível para o JavaScript. As dicas que indiquei neste post e nos anteriores mostram que até mesmo as menores atualizações do ES6 podem fazer uma grande diferença na manutenção. Mal posso esperar para ver o que a próxima rodada de atualizações do JavaScript nos proporcionará!