Whats New In EcmaScript 2015 / ES6

Transcript

1. ECMAScript 6 Hans Kristian Flaatten 1 Bergen Linux User Group Torsdag 28. januar 2016 Bergen Offentlige Bibliotek
2. ES6 Hans Kristian Flaatten 2 Bergen Linux User Group Torsdag 28. januar 2016 Bergen Offentlige Bibliotek
3. ECMAScript 2015 Hans Kristian Flaatten 3 Bergen Linux User Group Torsdag 28. januar 2016 Bergen Offentlige Bibliotek
4. JavaScript ≠ ECMAScript 4
5. • arrows functions • classes • enhanced object literals • template strings • destructuring • default + rest + spread • let + const • iterators + for..of • generators • unicode • modules • module loaders • map + set + weakmap + weakset • proxies • symbols • subclassable built-ins • promises • math + number + string + array + object APIs • binary and octal literals • reflect api • tail calls 5
6. Block Scopes 6 (function () { var food = 'Meow Mix'; }()); console.log(food); // Reference Error
7. Block Scopes 7 { let food = 'Meow Mix'; } console.log(food); // Reference Error
8. Arrow Functions 8 function Person(name) { this.name = name; } Person.prototype.prefixName = function (arr) { return arr.map(function (character) { return this.name + character; // Cannot read property 'name' of undefined }); };
9. Arrow Functions 9 function Person(name) { this.name = name; } Person.prototype.prefixName = function (arr) { var that = this; // Store the context of this return arr.map(function (character) { return that.name + character; }); };
10. Arrow Functions 10 function Person(name) { this.name = name; } Person.prototype.prefixName = function (arr) { return arr.map(character => this.name + character); };
11. Arrow Functions 11 var arr = [1, 2, 3, 4, 5]; var squares = arr.map(function (x) { return x * x });
12. Arrow Functions 12 var arr = [1, 2, 3, 4, 5]; var squares = arr.map(x => x * x);
13. Template Strings 13 var name = 'Tiger'; var age = 10; console.log('My name is ' + name + ', I am ' + age + ' years');
14. Template Strings 14 let name = 'Tiger'; let age = 10; console.log(`My name is ${name} and I am ${age} years.`);
15. Multiline Template Strings 15 var text = ( 'cat\n' + 'dog\n' + 'nickelodeon' );
16. Multiline Template Strings 16 var text = [ 'cat', 'dog', 'nickelodeon' ].join('\n');
17. Multiline Template Strings 17 let text = `cat dog nickelodeon`;
18. Destructing Arrays 18 var arr = [1, 2, 3, 4]; var a = arr[0]; var b = arr[1]; var c = arr[2]; var d = arr[3];
19. Destructing Arrays 19 let [a, b, c, d] = [1, 2, 3, 4]; console.log(a); // 1 console.log(b); // 2
20. Destructing Arrays 20 var luke = { occupation: 'jedi', father: 'anakin' }; var occupation = luke.occupation; // 'jedi' var father = luke.father; // 'anakin'
21. Destructing Arrays 21 let luke = { occupation: 'jedi', father: 'anakin' }; let {occupation, father} = luke; console.log(occupation); // 'jedi' console.log(father); // 'anakin'
22. Default Function Parameters 22 function addTwoNumbers(x, y) { x = x || 0; y = y || 0; return x + y; }
23. Default Function Parameters 23 function addTwoNumbers(x=0, y=0) { return x + y; } addTwoNumbers(2, 4); // 6 addTwoNumbers(2); // 2 addTwoNumbers(); // 0
24. Named Function Parameters 24 function drawES5Chart(options) { options = options === undefined ? {} : options; var size = options.size === undefined ? 'big' : options.size; var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; var radius = options.radius === undefined ? 25 : options.radius; console.log(size, cords, radius); // now finally do some chart drawing } drawES5Chart({ cords: { x: 18, y: 30 }, radius: 30 });
25. Named Function Parameters 25 function drawES6Chart({ size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25 } = {}) { console.log(size, cords, radius); // do some chart drawing } drawES6Chart({ cords: { x: 18, y: 30 }, radius: 30 }); // 'big' {x: 18, y: 30} 30
26. Generators 26 function* fibonacci(){ let val1 = 0, val2 = 1, swap; yield val1; yield val2; while (true){ swap = val1 + val2; val1 = val2; val2 = swap; yield swap; } }
27. Generators 27 var sequence = fibonacci(); sequence.next().value // 0 sequence.next().value // 1 sequence.next().value // 1 sequence.next().value // 2 sequence.next().value // 3 sequence.next().value // 5 sequence.next().value // 8
28. Browser Support 28 Browser ECMAScript 6 Support Google Chrome 91 % Edge 83 % FireFox 85 % Safari 54 % Kilde: https://kangax.github.io/compat-table/es6/
29. Node.js ES6 Support 29 0 25 50 75 100 v0.10 (3.14) v0.12 (v8 3.28) v4 (v8 4.5) v5 (v8 4.6) v6 (v8 5.0)
31. ECMAScript 7 ?! 31
32. ECMAScript 7 32
33. ECMAScript 2016 33