O desenvolvimento de novos recursos para a linguagem JavaScript realmente melhorou nos últimos anos, graças, em parte, a frameworks JavaScript que pressionam os limites e provam o quão importante uma funcionalidade pode ser. Entretanto, ao mesmo tempo, há uma enorme comunidade por trás dessa evolução, que fazem nosso desenvolvimento ficar mais fluido e agradável, confira abaixo alguns dos novos recursos disponíveis na versão do ES7 e ES8.

Dica rápida sobre como manter-se atualizado sobre essas novas funcionalidades

ES7

Array.prototype.includes

Array.prototype.includes é semelhante ao indexOf, que determina se um array contém um determinado elemento, mas, em vez disso, retorna true ou false.

['foo', 'bar', 'baz'].includes('foo'); // true, não 0 como retornaria o `indexOf`
['foo', 'bar', 'baz'].includes('foobar'); // false

Além de ser mais eloqüente e realmente dar aos desenvolvedores o valor booleano em vez da posição de um dado, includes também funciona com NaN (não é um número). Finalmente, includes tem um segundo parâmetro opcional fromIndex. Isso é bom para otimização, pois permite procurar um dado a partir de uma determinada posição.

["foo", "bar", "baz"].includes("foo");    // === true
["foo", "bar", "baz"].includes("foo", 1); // === false

[1, 2, 3].includes(2); // === true
[1, 2, 3].includes(4); // === false

[1, NaN].includes(NaN); // === true

[1, -0, 2].includes(+0); // === true
[1, +0, 2].includes(-0); // === true

Em resumo, includes traz simplicidade para qualquer desenvolvedor que tenha que verificar se um valor está ou não em um array…

Exponentiation Operator

Se você esqueceu o que é o expoente, é quando você multiplica o mesmo número (base) sobre si mesmo muitas vezes (expoente). Por exemplo, 7 potência de 3 é 7 * 7 * 7.

Atualmente, no ES6/ES2015, você pode usar o método Math.pow ou criar uma função recursiva para resolver esse problema:

// Math.pow - 2 potência de 8
console.log(Math.pow(2, 8)) // 256


function power(base, exponent) {
  if (exponent == 0) return 1;
  return base * power(base, exponent - 1);
}

// Usando função recursiva - 2 potência de 8
console.log(power(2, 8)) // 256

Agora com o Exponentiation Operator do ES7/ES2016, podemos usar uma sintaxe mais curta:

// Exponentiation Operator - 2 potência de 8
console.log(2 ** 8); // 256

let a = 2
a **= 3
console.log(a); // 8

Este operador é principalmente usado por desenvolvedores que fazem softwares envolvendo cálculos matemáticos e é útil no caso de 3D, Realidade Virtual, SVG ou visualização de dados.

ES8

Object.values / Object.entries

Extrair valores e pares de chave-valor de objetos se tornaram ainda mais fáceis! Com as novas funcionalidades Object.values e Object.entries que estão na especificação ECMAScript2017 e similarmente ao Object.keys, retornam arrays.

Cada item do array retornado por Object.keys, Object.values e Object.entries correspondentemente, contém uma chave, um valor ou a entrada para uma propriedade/atributo de um objeto.

Antes do ES8/ES2017, desenvolvedores JS que precisavam iterar sobre às próprias propriedades de um objeto tinham que usar Object.keys, iterar sobre o array retornado por ele e usar obj[key] para acessar cada valor:

let obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach((key, index) => {
  console.log(key, ": ", obj[key]);
});
/* == RESULTS
 *
 * a :  1
 * b :  2
 * c :  3
 *
 */

Object.values retorna um array de valores de propriedade enumeráveis do objetos. E podemos iterar sobre ele usando o bom e velho Array.prototype.forEach combinado com arrow functions do ES6 de retorno implícito:

// Object literal
let obj = { a: 1, b: 2, c: 3 };
Object.values(obj).forEach(val => console.log(val)); // 1, 2, 3

// String
Object.values("BrazilJS"); // [ 'B', 'r', 'a', 'z', 'i', 'l', 'J', 'S' ]

Object.entries, por outro lado, irá retornar um array de objetos de chaves-valores de propriedade enumeráveis do objeto (como um array). Cada item do array resultante também será um array.

// Object literal
let obj = { a: 1, b: 2, c: 3 };
JSON.stringify(Object.entries(obj)); // '[["a",1],["b",2],["c",3]]'

// String
Object.entries("JS"); // [ [ '0', 'J' ], [ '1', 'S' ] ]

String padding

String.prototype.padStart e String.prototype.padEnd além de tornar o trabalho com strings em JavaScript uma experiência mais agradável, ajudam a evitar depender de bibliotecas extras.

Ambos os métodos nos permitem trocar uma determinada string com qualquer texto de nossa escolha para garantir que uma string corresponda a um determinado comprimento.

O método padStart() retorna uma string de um determinado comprimento (targetLength), inserindo almofadas no início. As almofadas são uma string determinada, repetidas, se necessário, até atingir o comprimento desejado. O preenchimento é aplicado desde o início (esquerda) da string atual.

console.log("BrazilJS".padStart(14));           // "      BrazilJS"
console.log("BrazilJS".padStart(14, "wow - ")); // "wow - BrazilJS"
console.log("BrazilJS".padStart(14,"654321"));  // "654321BrazilJS"
console.log("BrazilJS".padStart(14, "0"));      // "000000BrazilJS"
console.log("BrazilJS".padStart(1));            // "BrazilJS"

// uso sem uma string inicial
console.log(''.padStart(78, 'Eu vou aprender ES7 + ES8!')); // 'Eu vou aprender ES7 + ES8!Eu vou aprender ES7 + ES8!Eu vou aprender ES7 + ES8!'

O método padEnd() retorna uma string de um determinado comprimento (targetLength), inserindo almofadas no final. As almofadas são uma string determinada, repetidas, se necessário, até atingir o comprimento desejado. O preenchimento é aplicado no final (direita) da string atual.

console.log("BrazilJS".padEnd(14));           // "BrazilJS      "
console.log("BrazilJS".padEnd(14, " - wow")); // "BrazilJS - wow"
console.log("BrazilJS".padEnd(14,"654321"));  // "BrazilJS654321"
console.log("BrazilJS".padEnd(14, "0"));      // "BrazilJS000000"
console.log("BrazilJS".padEnd(1));            // "BrazilJS"

E você já está utilizando essas novas funcionalidades?

Então, conte-nos sobre como tem sido o uso dessas funcionalidades e quais benefícios vocês já conseguiram perceber utilizando-as. Deixe sua opinião na seção de comentários e vamos conversar sobre isso!