ES6 Enhanced

1. Java Script para adultos

2. Diego Rafael Perin Honório
Front-end Developer

3. G4 SOLUTIONS

4. Ecma Script
• European Computer Manufacturers Association
• ECMA Script
• ECMA Internacional
• Base doJavascript

5. Aprimoramentos ES6
• Variable Declaration
• Block Scope
• DestructuringAssignment
• Enhanced parameters
• Template String
• Arrow Function
• Proxy

6. VARIABLE DECLARTION

7. var a = 0;
let b = 0;
if (true) {
console.log(a);
console.log(b);
var a = 1;
let b = 1;
console.log(a);
console.log(b);
}
console.log(a);
console.log(b);

8. var a = 0;
let b = 0;
if (true) {
console.log(a); // 0
console.log(b); // undefined
var a = 1;
let b = 1;
console.log(a);
console.log(b);
}
console.log(a);
console.log(b);

9. var a = 0;
let b = 0;
if (true) {
console.log(a); // 0
console.log(b); // undefined
var a = 1;
let b = 1;
console.log(a); // 1
console.log(b); // 1
}
console.log(a);
console.log(b);

10. var a = 0;
let b = 0;
if (true) {
console.log(a); // 0
console.log(b); // undefined
var a = 1;
let b = 1;
console.log(a); // 1
console.log(b); // 1
}
console.log(a); // 1
console.log(b); // 0

11. BLOCK SCOPE

12. for(var i = 0; i < 3; i++){
var x = i + i;
console.log(x);
}
console.log(x); // 4

13. for(var i = 0; i < 3; i++){
let x = i + i;
console.log(x);
}
console.log(x); // Error

14. DESTRUCTING
ASSIGNMENT

15. obj = { first:'a',second:'b',third:'c'};
var x = obj.first;
var y = obj.second;
var z = obj.third;

16. Destructuring Assignment
var {x,y,z} = { first:'a',second:'b',third:'c'};
// x = 'a', y = 'b', z = 'c‘
var {x,y,z} = ['a','b','c'];
// x = 'a', y = 'b', z = 'c‘

17. ENHANCED
PARAMETERS

18. Default Params

19. function say(name) {
name = name || 'Anonymous';
return ‘Olá, ' + name + '!';
}
console.log(say()); // Olá, Anonymous!
console.log(say(‘Diego')); // Olá, Diego!

20. function say(name = 'Anonymous') {
return ‘Olá, ' + name + '!';
}
console.log(say()); // Olá, Anonymous!
console.log(say('Diego')); // Olá, Diego!

21. Rest Parameter

22. function f(a, b){
console.log(args);
var args =
Array.prototype.slice.call(arguments, f.length);
console.log(args);
}
f(1,2,3,4,5);
//[1,2,3,4,5];
//[3,4,5];

23. function(a, b, ...args) {
console.log(args);
}
//[3,4,5];

24. function ordernarArgumentos() {
var ordenados = arguments.sort();
return ordenados;
}
console.log(ordernarArgumentos(5,3,7,1));
// Error arguments.sort is not a function
// Arguments não é um objeto array, embora pareça

25. Shorthand Assignment

26. var arr1 = [0, 1];
var arr2 = [2, 3];
for(var i=0; i < arr2.length; i++){
arr1.push(arr2[i]);
}
//arr1 = [0,1,2,3]

27. var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var union = [arr1, arr2]; //[0,1,2,3,4,5]
arr1.push(...arr2); //[0,1,2,3,4,5]

28. let x = 5;
let y = 20;
let coordinates = {
x,
y,
z: 10,
};
console.log(coordinates); // { x: 5, y: 20, z: 10 }

29. TEMPLATE STRING

30. let firstName = 'Diego';
let lastName = 'Honório';
let greeting = 'Hi, my name is ' + firstName + ' ' +
lastName + '.';

31. let firstName = ‘Diego';
let lastName = ‘Honório';
let greeting = `Hi, my name is ${firstName} ${lastName}.`;

32. ARROW FUNCTION

33. var namesList = ['Diego', 'Rafael', 'Perin', 'Honório'];
var names = namesList.filter(function (number) {
return name.length <= 5;
});
console.log(names); // ['Diego', 'Rafael', 'Perin']

34. let namesList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let names = namesList.filter(name => name.length <= 5);
console.log(names); // ['Diego', 'Rafael', 'Perin']

35. PROXY

36. var employee = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
set: function (receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
}
};
employee = Proxy(employee, interceptor);
employee.salary = 300;
//salary is changed to 300

37. CLASS

38. class Pessoa {
constructor(nome, email) {
this.nome = nome;
this.comidas = [];
// verifica se o e-mail foi preenchido
if (email) {
this.email = email;
}
}
fala() {
console.log("Olá, meu nome é "+this.nome+" e meu email é
"+this.email);
}
get primeiroNome() {
return this.nome.split(" ")[0];
}
set gostaDe(comida) {
this.comidas.push(comida);
}
}

39. HERANÇA

40. class PessoaFisica extends Pessoa{
constructor(nome, email, cpf){
super(nome, email);
this.cpf = cpf;
}
dizCpf(){
console.log(this.cpf);
}
}

41. Perguntas?
Diego.honorio91@gmail.com