ES2015 and beyond

An introduction to the new features of JavaScript ES2015

Transcript

1. ES2015 AND BEYOND GABRIELE PETRONELLA SOFTWARE ENGINEER @ BUILDO TWITTER: @GABRO27 / @BUILDOHQ
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); }); } }
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/
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?