evoluindo seu código js com o es2015 e o es2016 (bruno gonçalves)
TRANSCRIPT
Evoluindo seu código JS com o ES2015 e o ES2016
Entendendo novas features do JS
Agenda – Fluxo de adição de novas features no JS– Es2016
• Var, let e const• De IIFEs para blocos• Arrow functions• Templates literais• Default params• Spread operator e rest params• Class• Classes derivadas• ES2016 modules
– Es2017• Array.prototype.includes• Exponential operator
O que é o TC-39
Comite responsável pela evolução e manutenção do Javascript. Formado por pessoas ligadas à área de web, browsers vendors e empresas sem fins lucrativos.
TC-39 wants
YOU
Processo aberto à comunidade
“Minha opinião: A melhor feature do ES2016 foi o fato dela ter sido desenvolvida inteiramente via GitHub. É realmente maravilhoso o esforço da comunidade!”
- Brian Terlson, editor dos padrões do ECMAScript
Fluxo de adição de novas features no JS
Proposta Esboço Candidata FinalizadaRascunho
Simplesmente o envio de propostas. Deve ser feito por algum membro ou contribuidor do TC-39, e em seguida as propostas são discutidas em reuniões.
Fluxo de adição de novas features no JS
Proposta Esboço Candidata FinalizadaRascunho
Um membro do TC-39 é escolhido como responsável por essa proposta (champion). O problema a ser resolvido pela proposta deve ser descrito uma API deve ser
mostrada.
Fluxo de adição de novas features no JS
Proposta Esboço Candidata FinalizadaRascunho
A especificação da proposta deve estar completa e um exemplo deve ser descrito usando Javascript. Duas implementações da proposta são necessárias, podendo
uma delas usar transpiladores (ex.: Babel)
Fluxo de adição de novas features no JS
Proposta Esboço Candidata FinalizadaRascunho
A especificação da proposta é revisada por dois membros do TC-39, e então assinada pelos revisores e pelo champion responsável. Ao menos dois navegadores devem conter alguma implementação (não ativada por padrão), compatível com a
especificação.
Fluxo de adição de novas features no JS
Proposta Esboço Candidata FinalizadaRascunho
A proposta está pronta para entrar formalmente como uma especificação do Javascript. É nesta etapa que os testes de aceitação devem ser mergeados com o
repositório de testes do JS - https://github.com/tc39/test262
Var, let e const
Var, let e const
var golsDoBrasil = 1;
var golsDaAlemanha = 7;
{
let golsDoBrasil = 2;
var golsDaAlemanha = 1;
golsDoBrasil; // 2
golsDaAlemanha; // 1
}
golsDoBrasil; // 1
golsDaAlemanha; // 1
const maioridadePenal = 18;
maioridadePenal = 16;
// Uncaught SyntaxError "maioridadePenal" is
read-only
const pessoa = {
corDeCabelo: “loiro”
};
pessoa.corDeCabelo = “castanho”;
pessoa.corDeCabelo; // castanho
De IIFEs para blocos
De IIFEs para blocos
(function () {
var tmp = ···;
}());
console.log(tmp); // ReferenceError
{
let tmp = ···;
}
console.log(tmp); // ReferenceError
Arrow functions
Arrow functions
var elementos = [
"Hidrogenio",
"Helio",
"Litio",
"Berilio"
];
var elementosMapeados = elementos.map(function(s){
return s.length;
});
var elementosMapeados2 = elementos.map( s => s.length );
Arrow functions e o this
function Pessoa() {
this.idade = 0;
var pessoa = this;
setInterval(function crescer() {
this.idade++;
//‘this’ referencia a função crescer()
pessoa.idade++;
// ’pessoa’ referencia o objeto Pessoa
}, 1000);
}
function Pessoa(){
this.idade = 0;
setInterval(() => {
this.idade++;
//‘this’ referencia o objeto Pessoa
}, 1000);
}
var p = new Pessoa();
Templates literals
Template literais e interpolação de strings
const HTML = `
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>`;
var a = 5;
var b = 10;
console.log(`Quinze é ${a + b} e não ${2 *
a + b}.`);
// "Quinze é 15 e não 20."
Default params
Default params
function foo(x, y) {
x = x || 0;
y = y || 0;
}
function foo(x = 0, y = 0) {
···
}
Spread operator e rest params
Spread operator e rest params
function func(...args) {
console.log(args.length);
}
func(); // 0
func(1, 2); // 2
func(1, 2, 3); //3
var numbers = [1, 2, 3];
var myOthersNumbers = [...numbers, 4, 5, 6];
console.log(myOthersNumbers); //1, 2, 3, 4, 5, 6
Spread operator e apply()
Math.max.apply(null, [-1, 5, 11, 3]);
//Es2015
Math.max(...[-1, 5, 11, 3]);
Class
O tão querido sintax sugar
Class
function Person(name) {
this.name = name;
}
Person.prototype.describe = function () {
return 'Person called ' + this.name;
};
var p = new Person('Foo');
class Person {
constructor(name) {
this.name = name;
}
describe() {
return `Person called ${this.name}`;
}
}
var p = new Person('Foo');
Classes derivadas
Além de Class, agora temos extends e super
Classes derivadas
function Employee(name, title) {
Person. call(this, name); // super(name)
this.title = title;
}
Employee.prototype = Object.create(Person. prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function describe() {
return Person.prototype.describe. call(this) // super.describe()
+ ' (' + this.title + ')';
};
class Employee extends Person {
constructor(name, title) {
super(name);
this.title = title;
}
describe() {
return super.describe() + ' (' + this.title + ')
';
}
}
ES2015 Modules
Es2015 modules - exportando múltiplas funções
//------ lib.js ------
var sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function diag(x, y) {
return sqrt(square(x) + square(y));
}
export {sqrt, square, diag};
//------ main1.js ------
import {sqrt, square, diag} from "lib"
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
ES2016
Exponential operator
var a = 2, b = 3;
a ** b // 8
var c = 2;
a ** (b ** c) // 512
Array.prototype.includes
var boolean = array.includes(searchElement[, fromIndex]);
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
www.concretesolutions.com.brblog.concretesolutions.com.br
Rio de Janeiro – Rua São José, 90 – cj. 2121Centro – (21) 2240-2030
São Paulo - Rua Sansão Alves dos Santos, 433 4º andar - Brooklin - (11) 4119-0449