Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Some ES6 Features you can test today

Some ES6 Features you can test today

Robert Kowalski

April 15, 2013
Tweet

More Decks by Robert Kowalski

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. JavaScript Usergroup Hamburg - 2013-04-15 And the global (ES1) isNaN?

    Convenience methods for Numbers Dienstag, 16. April 13
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. JavaScript Usergroup Hamburg - 2013-04-15 let { let foo =

    'bar'; } console.log(foo); // ReferenceError: foo is not defined Dienstag, 16. April 13
  16. JavaScript Usergroup Hamburg - 2013-04-15 Fat arrow functions Known from

    CoffeeScript or C# „Like functions“ Dienstag, 16. April 13
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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