Some ES6 Features you can test today

Transcript

1. Some ES6 Features you can test today Dienstag, 16. April 13
2. Robert Kowalski Jimdo GmbH @robinson_k http://github.com/robertkowalski http://kowalski.gd Dienstag, 16. April 13
3. JavaScript Usergroup Hamburg - 2013-04-15 Dienstag, 16. April 13
4. JavaScript Usergroup Hamburg - 2013-04-15 ECMAScript • Standardized by TC39 committee • JavaScript is an implementation of the ECMAScript Specification • These implementations are called „Dialects“ Dienstag, 16. April 13
5. JavaScript Usergroup Hamburg - 2013-04-15 node: $ node --harmony Chrome / Chrome Canary: chrome://flags -> Enable Experimental JavaScript Firefox: Just use it (I used Firefox 19 and Nightly) Try it out Dienstag, 16. April 13
6. JavaScript Usergroup Hamburg - 2013-04-15 String.contains A good alternative to indexOf() Dienstag, 16. April 13
7. JavaScript Usergroup Hamburg - 2013-04-15 String.contains 'My String'.contains('S'); // true 'My String'.contains('My'); // true 'My String'.contains('s'); // false 'My String'.contains('w'); // false Dienstag, 16. April 13
8. JavaScript Usergroup Hamburg - 2013-04-15 Convenience methods for Numbers Because NaN != NaN Dienstag, 16. April 13
9. JavaScript Usergroup Hamburg - 2013-04-15 Number.isFinite(Infinity); // false Number.isFinite(42); // true Number.isNaN(NaN); // true Number.isNaN(42); // false Convenience methods for Numbers Dienstag, 16. April 13
10. JavaScript Usergroup Hamburg - 2013-04-15 And the global (ES1) isNaN? Convenience methods for Numbers Dienstag, 16. April 13
11. JavaScript Usergroup Hamburg - 2013-04-15 window.isNaN(undefined); // true window.isNaN({}); // true window.isNaN('Duck'); // true Number.isNaN(undefined); // false Number.isNaN({}); // false Number.isNaN('Duck'); // false Convenience methods for Numbers Dienstag, 16. April 13
12. JavaScript Usergroup Hamburg - 2013-04-15 And the global isFinite? Convenience methods for Numbers Dienstag, 16. April 13
13. JavaScript Usergroup Hamburg - 2013-04-15 window.isFinite(true); // true Number.isFinite(true); // false Convenience methods for Numbers Dienstag, 16. April 13
14. JavaScript Usergroup Hamburg - 2013-04-15 Default parameter values Well known from many languages Dienstag, 16. April 13
15. JavaScript Usergroup Hamburg - 2013-04-15 Default parameter values Example in Ruby def myFunction(value = 'example') puts value end myFunction() # example Dienstag, 16. April 13
16. JavaScript Usergroup Hamburg - 2013-04-15 Default parameter values Example in JavaScript function myFunction(value = 'example') { console.log(value); } myFunction(); // example Dienstag, 16. April 13
17. JavaScript Usergroup Hamburg - 2013-04-15 function logWithRest(a, ...r) { var b = a.concat(r); console.log(b); } logWithRest([1], 2, 3, 4, 5); // [1, 2, 3, 4, 5] ... (Rest) Dienstag, 16. April 13
18. JavaScript Usergroup Hamburg - 2013-04-15 Did you notice? ... (Rest) Dienstag, 16. April 13
19. JavaScript Usergroup Hamburg - 2013-04-15 r is a real Array - Say Goodbye to this „friend“: var args = Array.prototype.slice.call(arguments); ... (Rest) Dienstag, 16. April 13
20. JavaScript Usergroup Hamburg - 2013-04-15 var clothes = ['hat', 'jeans']; var thingsToBuy = ['beer', ...clothes, 'food']; console.log(thingsToBuy); // ["beer", "hat", "jeans", "food"] ... (Spread) Dienstag, 16. April 13
21. JavaScript Usergroup Hamburg - 2013-04-15 let Function-Scope: var Scope inside a Block: let Dienstag, 16. April 13
22. JavaScript Usergroup Hamburg - 2013-04-15 let Example Block Scope in Ruby ['egg', 'bacon', 'salt'].each do |x| puts x # egg, bacon, salt end puts x # NameError: undefined local variable or method `x' for #<Object:0x10de53298> Dienstag, 16. April 13
23. JavaScript Usergroup Hamburg - 2013-04-15 let for (let i = 0; i < 5; i++) { console.log(i); // 1, 2, 3, 4 } console.log(i); // ReferenceError: i is not defined Dienstag, 16. April 13
24. JavaScript Usergroup Hamburg - 2013-04-15 let let (a = 6) { console.log(a); // 6 } console.log(a); // ReferenceError: a is not defined Dienstag, 16. April 13
25. JavaScript Usergroup Hamburg - 2013-04-15 let { let foo = 'bar'; } console.log(foo); // ReferenceError: foo is not defined Dienstag, 16. April 13
26. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions Known from CoffeeScript or C# „Like functions“ Dienstag, 16. April 13
27. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions Can‘t use new (no Constructor) No .prototype Trying to access arguments will result in a ReferenceError No dynamic this (call, apply) - lexical scope Dienstag, 16. April 13
28. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions // no argument: var sayHi = () => { console.log('hi!'); }; sayHi(); // hi! // one argument var square = x => x * x; square(3); // 9 // more than one argument: var calcRectangle = (a, b) => a * b; calcRectangle(2, 4); // 8 Dienstag, 16. April 13
29. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions var odds = [1, 3, 5]; var evens = odds.map(x => x + 1); console.log(evens); // [2, 4, 6] Dienstag, 16. April 13
30. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions Today: var object = { method: function() { return function() { return this; }; } }; object.method()() === window; Dienstag, 16. April 13
31. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions common workaround (today): var object = { method: function() { var that = this; return function() { return that; }; } }; object.method()() === object; Dienstag, 16. April 13
32. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions Arrow functions with lexical this: var object = { method: function() { return () => this; } }; object.method()() === object; Dienstag, 16. April 13
33. JavaScript Usergroup Hamburg - 2013-04-15 let & Rest parameters & Fat arrow functions let foo = (...rest) => { console.log(rest); }; foo(1, 2, 3, 4); // [1, 2, 3, 4] Dienstag, 16. April 13
34. JavaScript Usergroup Hamburg - 2013-04-15 The End. Dienstag, 16. April 13