Some ES6 Features you can test today

Some ES6 Features you can test today

765845d4b1c07dd284eae0866d1d7939?s=128

Robert Kowalski

April 15, 2013
Tweet

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