Top 10 ES6 recursos cada Desenvolvedor Javascript deve saber

parâmetros padrão em ES6

em ES6, podemos colocar os valores padrão bem na assinatura das funções.

var calculateArea = function(height = 50, width = 80) { 
// write logic
...
}

In ES5, we were using logic OR operator.

var calculateArea = function(height, width) { 
height = height || 50;
width = width || 80;
// write logic
...
}

Template Literals in ES6

In ES6, we can use a new syntax ${PARAMETER} inside of the back-ticked string.

var name = `Your name is ${firstName} ${lastName}.`

em ES5, temos de quebrar a cadeia de caracteres como abaixo.

var name = 'Your name is ' + firstName + ' ' + lastName + '.'

multi-line Strings in ES6

In ES6, it is very simple., Usa só carraças.

let poemData = `Johny Johny Yes Papa, 
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`

In ES5, we had to use below approach.

var poemData = 'Johny Johny Yes Papa,\n' 
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'

Desestruturação de Atribuição em ES6

A desestruturação de atribuição de sintaxe é uma expressão JavaScript que torna possível descompactar valores a partir de matrizes, ou propriedades de objetos, em diferentes variáveis.

var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

In ES5, we had to use below approach.

var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true

literais de objectos melhorados em ES6

literais de objectos tornam mais fácil criar rapidamente objectos com propriedades dentro dos chavões encaracolados.,

function getLaptop(make, model, year) {
return {
make,
model,
year
}
}
getLaptop("Apple", "MacBook", "2015");

In ES5, we had to follow below syntax.

function getLaptop(make, model, year) {
return {
make: make,
model: model,
year: year
}
}
getLaptop("Apple", "MacBook", "2015");

Para mais informações: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Seta Funções em ES6

A gordura setas são impressionantes, pois eles fariam o this comportar-se corretamente, isto é, this vai ter o mesmo valor no contexto da função— ele não vai se transformar.

$('.btn').click((event) => { 
this.doSomething() 
});

In ES5, we had to use _this = this or .bind (this).,

var _this = this; 
$('.btn').click(function(event){ 
_this.doSomething();
});

Para mais informações: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Promessas em ES6

as Promessas são utilizados para a execução assíncrona. Na ES6, podemos usar a promessa com a função seta mostrada abaixo.

var asyncCall = new Promise((resolve, reject) => {
// do something async 
resolve();
}).then(()=> { 
console.log('Yay!');
})

Em ES5, precisamos usar setTimeout().

setTimeout(function(){ 
console.log('Yay!');
}, 1000);

Para mais informações: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Bloco de Escopo de Construções e Const

let é um novo var, que permite o escopo da variável para os blocos.,Assim, a principal diferença entre let e var é, var escopo é o mais próximo do bloco de funções e let escopo é o mais próximo delimitador de bloco, que pode ser menor do que um bloco de função.

In ES6,

In ES5,

When it comes to const, it’s just an immutable and it’s also block-scoped like let.

Classes em ES6

podemos criar classe em ES6 usando a palavra-chave “classe”. A criação e uso de Classes na ES5 foi uma dor na retaguarda, porque não havia uma classe de palavras-chave.,

Eu não vou mostrar-lhe exemplo de criação de classe ES5, porque há muitos sabores.

Módulos em ES6

Em ES6, existem módulos com import e export operandos.

export var userID = 10; 
export function getName(name) { 
... 
};

podemos importar variável userID e método getName usando declaração de importação .

import {userID, getName} from 'module';
console.log(userID); // 10