ES6 - Consertando as partes ruins do JavaScript

Palestra feita no JSDay 2016 em Campina Grande.

Transcript

1. ES6 Consertando as partes ruins do JavaScript / / Software Engineer at Diógenes Fernandes @diofeher Robots + Rockets
2. Implementação da linguagem Brendan Eich - Netscape em Abril de 1995
4. 10 dias para criar um protótipo de linguagem leve Java vs Javascript: primos?
5. If I had done classes in JavaScript back in May 1995, I would have been told that it was too much like Java or that JavaScript was competing with Java … I was under marketing orders to make it look like Java but not make it too big for its britches … [it] needed to be a silly little brother language. Brendan Eich
6. ECMA European Computer Manufacturers Association
7. ECMAScript 1997: Primeira versão ECMA-262
8. ES6 ou ECMAScript 2015 Especificação finalizada em Junho/2015
9. Implementação em andamento https://kangax.github.io/compat-table/es6/
11. 1. Block Scoping
12. Hoisting x = 5; // Assign 5 to x elem = document.getElementById("demo"); // Find an element elem.innerHTML = x; // Display x in the element var x; // Declare x
13. Problemas com Hoisting // var i; var anchors = document.getElementsByTagName(“a”); for(var i=0, len=anchors.length; i < len; i++) { anchors[i].onclick = function(){ alert(i); // alert 10 ten times }; }
14. Usando IIFE para resolver o problema Código ruim de ler e estranho para pessoas novas na linguagem var anchors = document.getElementsByTagName(“a”); for(var i=0, len=anchors.length; i < len; i++) { anchors[i].onclick = (function(i){ return function() { alert(i); // 1, 2, 3... } })(i); }
15. Block scoping usando let var anchors = document.getElementsByTagName(“a”); for(let i=0,len=anchors.length; i < len; i++){ anchors[i].onclick = function(){ alert(i); } }
16. const para variáveis read-only const API_KEY = '123lkdsfj43ojisKOD21a'; const CONFIG = { TEMPLATES_URL: '/templates', TIMEZONE: 'America/Recife' } CONFIG['TEMPLATES_URL'] = 'http://s3.amazon.com/templates-folder';
17. Global binding // in a browser let RegExp = "Hello!"; console.log(RegExp); // "Hello!" console.log(window.RegExp === RegExp); // false const ncz = "Hi!"; console.log(ncz); // "Hi!" console.log("ncz" in window); // false
18. 2. Strings
19. Multi-linha var test = "Aqui temos uma\n" + "string que \n" + "tem várias linhas."
20. Template Strings `String`
21. Novas Multi-linha let test = `Aqui podemos escrever utilizando uma nova linha e o JS irá reconhecer.` let message = `WhiteSpace string`;
22. Interpolação de strings (ES5) // Usando o operador + var name = 'Tyler Durden'; var phrase = 'As coisas que você possui acabam possuindo você.'; var say = '"'+ phrase +'" por ' + name; console.log(say); // "As coisas que você possui acabam // possuindo você." por Tyler Durden
23. Interpolação de strings (ES6) // Usando o operador + var name = 'Tyler Durden'; var phrase = 'As coisas que você possui acabam possuindo você.'; var say = `"${phrase}" por ${name}`; console.log(say); // "As coisas que você possui acabam // possuindo você." por Tyler Durden
24. Interpolação usando expressões let count = 10, price = 0.25, message = `${count} items cost $${(count * price).toFixed(2)}.`;
25. 3. Desestruturação
26. Desestruturação (ES5) var data = { "url": "http://twitter.com/api/", "username": "diofeher", "password": "javascript" }; function apiRequest(data) { var url = data.url, username = data.username, password = data.password; if(!url) { url = "http://instagram.com/api/"; } $.post(url, username, password); }; apiRequest(data);
27. Desestruturação (ES6) var data = { "url": "http://twitter.com/api/", "username": "diofeher", "password": "javascript" }; function apiRequest(data) { var { url, username, password } = data; if(!url) { url = "http://instagram.com/api/"; } $.post(url, username, password); }; apiRequest(data);
28. 4. Funções
29. Definição de funções (ES5) var reflect = function(value) { return value; };
30. () =>
31. Arrow functions sem parâmetros (ES6) var getName = () => "Javascript"; // effectively equivalent to: var getName = function() { return "Javascript"; };
32. Arrow functions (ES6) var reflect = value => value;
33. Arrow functions com parâmetros (ES6) var sum = (num1, num2) => num1 + num2; // effectively equivalent to: var sum = function(num1, num2) { return num1 + num2; };
34. Arrow functions - this (ES5/6) var test = function() { that = this; var doSomething = function() {}; document.addEventListener("click", function(event) { this.doSomething(event.type); // certo é that }); } document.addEventListener("click", function() { event => this.doSomething(event.type));
35. Argumentos default (ES5) Problema: Se o argumento for 0 ou string vazia var myFunction = function(a, b, c){ a = a || 10; b = b || 5; c = c || 8; return a * b * c; };
36. Argumentos default melhorados (ES5) var myFunction = function(a, b, c){ a = (typeof a !== "undefined") ? a : 10; b = (typeof b !== "undefined") ? b : 5; c = (typeof c !== "undefined") ? c : 8; return a * b * c; };
37. Argumentos default (ES6) var myFunction = function(a=10, b=5, c=8){ return a * b * c; };
38. Parâmetros sem nome (ES5) function pick(object) { let result = Object.create(null); for (let i = 1, len = arguments.length; i < len; i++) { result[arguments[i]] = object[arguments[i]]; } return result; } let book = { title: "Understanding ECMAScript 6", author: "Nicholas C. Zakas", year: 2015 }; let bookData = pick(book, "author", "year"); console.log(bookData.author); // "Nicholas C. Zakas" console.log(bookData.year); // 2015
39. Parâmetros Rest (ES6) function pick(object, ...keys) { let result = Object.create(null); for (let i = 0, len = keys.length; i < len; i++) { result[keys[i]] = object[keys[i]]; } return result; }
40. Passando array como argumento (ES5) let values = [25, 50, 75, 100] console.log(Math.max.apply(Math, values)); // 100
41. Passando array como argumento (ES6) let values = [25, 50, 75, 100] console.log(Math.max(...values)); // 100
42. 5. Objetos
43. Inicialização de objetos (ES5) function createPerson(name, age) { return { name: name, age: age }; }
44. Inicialização de objetos (ES6) function createPerson(name, age) { return { name, age }; }
45. Definição de métodos (ES5) var language = { name: "Javascript", sayName: function() { console.log(this.name); } };
46. Definição de métodos (ES6) var language = { name: "Javascript", sayName() { console.log(this.name); } };
47. Comparação de Objetos (ES5) “7” == 7 // true “7” === 7 // false
48. Comparação de Objetos (ES5) NaN == NaN // false NaN === NaN // false var result = isNan(NaN) // true
50. Object.is to the rescue! Object.is(7, ”7”) // false Object.is(7, 7) // true Object.is(NaN, NaN) // true
51. 6. Classes
52. Classes (ES5) function PersonType(name) { this.name = name; } PersonType.prototype.sayName = function() { console.log(this.name); }; let person = new PersonType("Diogenes"); person.sayName(); // outputs "Diogenes"
53. Classes (ES6) class PersonClass { // equivalent of the PersonType constructor constructor(name) { this.name = name; } // equivalent of PersonType.prototype.sayName sayName() { console.log(this.name); } } let person = new PersonType("Diogenes"); person.sayName(); // outputs "Diogenes"
54. Se são parecidos, porque usar? Não são hoisted Não podem ser criadas sem o new
55. First-class Citizens function createObject(classDef) { return new classDef(); } let obj = createObject(class { sayHi() { console.log("Hi!"); } }); obj.sayHi(); // "Hi!"
56. Gets e Sets class Element { constructor(element) { this.element = element; } get val() { return this.element; } set val(value) { this.element = value; } } test = new Element("test") console.log(a.val) // "test" a.element = 3; console.log(a.val) // 3
57. Super keyword (ES5) var myBaseObj = { sayName: function(){ // .. do something }; }; var mySubObj = Framework.extend(myBaseObj, { sayName: function(){ this._super.apply(this, arguments); // .. do something else } })
58. Super keyword (ES6) var myBaseObj = { sayName: function(){ // .. do something }; }; var mySubObj = { __proto__: myBaseObj, sayName: function(){ super.sayName(); // .. do something else } })
59. ES6: Muito mais! Promises Iterators Generators Symbols Sets e Maps Modules ...