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

ES2015 and beyond

ES2015 and beyond

An introduction to the new features of JavaScript ES2015

C2bb0454c4af1a61e7f173d54ce17b0b?s=128

Gabriele Petronella

December 01, 2015
Tweet

More Decks by Gabriele Petronella

Other Decks in Programming

Transcript

  1. ES2015 AND BEYOND GABRIELE PETRONELLA SOFTWARE ENGINEER @ BUILDO TWITTER:

    @GABRO27 / @BUILDOHQ
  2. None
  3. ME OBJECTIVE-C, SCALA, SWIFT (JS?)

  4. TERMINOLOGY ECMASCRIPT (ES) sounds like a skin desease, it's actually

    a standard JAVASCRIPT (JS) a language that implements the said standard
  5. STANDARD SINCE JUNE 2015 ES2015 (ES6)

  6. SO, WHAT'S WRONG WITH JS?

  7. A LOT LIKE IN ANY (USED) LANGUAGE, TO BE FAIR

  8. https://www.destroyallsoftware.com/talks/wat

  9. MORE HONEST QUESTION: WHAT SURPRISED ME AS A BEGINNER

  10. SCOPING

  11. POP QUIZ! var b = 4; a = 38 +

    b; var a; console.log(a);
  12. WHAT'S THE OUTPUT? a) undefined b) 42 c) 'ReferenceError: a

    is not defined'
  13. WHAT'S THE OUTPUT? b) 42

  14. POP QUIZ 2! var letters = ['a','b','c']; for (var i

    = 0; i < letters.length; i++ ) { var letter = letters[i]; setTimeout(function() { console.log(letter) }, 1000 * i); }
  15. WHAT'S THE OUTPUT a) a a a b) a b

    c c) c c c
  16. WHAT'S THE OUTPUT c) c c c

  17. THIS

  18. var x = { bar: function(cb) { cb(); } }

    var y = { foo: function() { console.log(this); // <----- this x.bar(function() { // != console.log(this); // <----- this }); } } y.foo();
  19. var y = { foo: function() { console.log(this); var self

    = this; // <---- self is a way cooler name x.bar(function() { console.log(self); }); } }
  20. None
  21. A SIMPLE RULE Whenever a function is called, we must

    look at the immediate left side of the brackets / parentheses “()”. If on the left side of the parentheses we can see a reference, then the value of “this” passed to the function call is exactly of which that object belongs to, otherwise it is the global object. HTTP://DAVIDSHARIFF.COM/BLOG/JAVASCRIPT-THIS-KEYWORD/
  22. None
  23. SIMPLE, RIGHT?

  24. var bigRoom = { size: 'big', logSize: function () {

    console.log(this.size); } }; var smallRoom = { size: 'small' }; smallRoom.logSize = bigRoom.logSize; bigRoom.logSize(); // ?? smallRoom.logSize(); // ??
  25. ES2015

  26. FORGET ABOUT var let IS THE NEW VAR

  27. BLOCK SCOPING WITH LET for (let i = 0; i

    < letters.length; i++ ) { let letter = letters[i]; setTimeout(function() { console.log(letter) // a b c }, 1000 * i); }
  28. FAT => BEAUTIFUL

  29. this BINDING WITH => let y = { foo: function()

    { console.log(this); // <--- this x.bar(() => { // = console.log(this); // <--- this }); } }
  30. BONUS: SYNTAX! [1, 2, 3].map(x => x + 2); -

    implicit return (if single expression) - no parenthesis (if single argument) Equivalent to [1, 2, 3].map(function (x) { return x + 2; });
  31. DEMO

  32. THANK YOU

  33. QUESTIONS?

  34. None