ECMAScript 6

Transcript

1. ECMAScript 6 A bright new future is coming…
2. Luiz Augusto Developer +LuizAugustoDev
 @lulzaugusto
 luizaugusto.com
3. WTF?!
4. Some history… 1996 August Microsoft RELEASED IE 3.0 with JScript 1997 June ECMA International PUBLISHED ECMA-262 Netscape & Sun ANNOUNCED JavaScript 1995 December
5. …so ECMAScript is the name of the language…
6. …standardized in ECMA-262!
7. What about JavaScript?
8. JS is one of the ECMAScript implementations
9. ES6
10. Let & Const 1 function myFnc() { 2 if (true) { 3 let a = 'hi'; 4 console.log(a + ' gdg'); // hi gdg 5 } 6 7 console.log(a); // a is not defined 8 } 9 10 myFnc();
11. Let & Const 1 function myFnc() { 2 if (true) { 3 var a = 'hi'; 4 console.log(a + ' gdg'); // hi gdg 5 } 6 7 console.log(a); // hi 8 } 9 10 myFnc();
12. Let & Const 1 const num = 1; 2 num = 2; // "num" is read-only
13. Let & Const 1 const ary = []; 2 ary.push(1); 3 console.log(ary); // [1]
14. Class 1 class Human { 2 constructor(name) { 3 this.name = name; 4 } 5 6 describe() { 7 return 'Human name is ' + this.name; 8 } 9 } 10 11 let h = new Human('Luiz'); 12 console.log(h.describe()); // Human name is Luiz
15. Class 1 class Developer extends Human { 2 constructor(name, favoriteLanguage) { 3 super(name); 4 this.favoriteLanguage = favoriteLanguage; 5 } 6 7 describe() { 8 return `${super.describe()} and its favorite language is ${this.favoriteLanguage}`; 9 } 10 } 11 12 let d = new Developer('Luiz', 'JavaScript'); 13 console.log(d.describe()); // Human name is Luiz and its favorite language is JavaScript
16. Modules 1 /* lib.js */ 2 export function sayHi() { 3 return 'Hi!'; 4 } 5 6 export function sayHello() { 7 return 'Hello!'; 8 } 1 /* main.js */ 2 import {sayHi, sayHello} from 'lib'; 3 4 console.log(sayHi()); // Hi! 5 console.log(sayHello()); // Hello!
17. Modules 1 /* lib.js */ 2 export default function sayHi() { 3 return 'Hi'; 4 } 1 import sayHi from 'lib' 2 3 console.log(sayHi()); // Hi
18. Destructuring 1 let [a, , b] = [1, 2, 3]; 2 console.log(`${a}, ${b}`); // 1, 3 3 4 let { first, last } = { first: 'Jane', last: 'Doe' }; 5 console.log(`${first}, ${last}`); //Jane, Doe
19. Default params 1 function currency(value=0, currency='USD') { 2 // ... 3 }
20. Default params 1 function http({mehtod='GET', url='', data={}, headers={}}) { 2 3 } 4 5 function http(options) { 6 options = options || {}; 7 var method = options.get || 'GET' 8 //.. 9 }
21. Default params 1 function format(pattern, ...params) { 2 return params; 3 } 4 5 console.log(format('foo', 1, 2, 3, 4)); // [1,2,3,4]
22. For of 1 let array = ['foo', 'bar', 'baz']; 2 3 for (let element of array) { 4 console.log(element); 5 } 6 /* Output: 7 foo 8 bar 9 baz 10 */
23. Object literals 1 let first = 'Jane'; 2 let last = 'Doe'; 3 4 let obj = { first, last }; 5 // Same as: 6 let obj = { first: first, last: last }; 7 8 let obj = { 9 myMethod(arg0, arg1) { 10 //... 11 } 12 }; 13 14 let propKey = 'foo'; 15 let obj = { 16 [propKey]: true, 17 ['b'+'ar']: 123 18 };
24. Arrow functions 1 let sum = (x, y) => { 2 return x+y; 3 } 4 5 var sum = function (x, y) { 6 return x + y; 7 }; 8 9 let plusOne = x => x+1; 10 11 var plusOne = function (x) { 12 return x + 1; 13 };
25. Arrow functions 1 class Person { 2 constructor(name){ 3 this.name = name; 4 } 5 6 timers(){ 7 setTimeout(function(){ 8 console.log(this.name); // undefined 9 }, 100); 10 11 setTimeout(() => { 12 console.log(this.name); // person’s name 13 }, 100); 14 } 15 }
26. And more… Iterators, generators, symbols, proxies, promises, reflect…
27. How do I use it?
28. Babel is a JavaScript transpiler. http://babeljs.io
30. 1 // avoid 2 angular.module('app') 3 .controller('MyController', function($scope, ...) { 4 // controller definition 5 }); 6 7 // better 8 angular.module('app') 9 .controller('MyController', MyController); 10 11 function MyController($scope, ...) { 12 // controller definition 13 }
31. 1 class UserService { 2 constructor($http) { 3 this.$http = $http; 4 } 5 getFullName() { 6 return this.$http.get('api/user/details'); 7 } 8 } 9 10 class MyController { 11 constructor(userService) { 12 userService.getFullName() 13 .then(result => this.userName = result.fullName); 14 } 15 } 16 17 angular.module('app') 18 .service('userService', UserService) 19 .controller('MyController', MyController); https://github.com/michaelbromley/angular-es6
32. Thanks!