Exploring ES6

What is ES6, what does it add to JavaScript, and how can you use it today? This talk will answer those questions, and, in answering them, make you a more productive JavaScript developer. Learn about arrow functions, block scoping, template literals and much more!

Transcript

1. Exploring ES6 Max Stoiber - @mxstbr
2. Max Stoiber Max Stoiber – @mxstbr – mxstbr.com Freelance Front-End Developer @mxstbr Co-Organiser of the React Vienna Meetup
3. ES6? ES2015? ESxxxx? Max Stoiber – @mxstbr – mxstbr.com
4. TC39 Max Stoiber – @mxstbr – mxstbr.com
5. Max Stoiber – @mxstbr – mxstbr.com ES5: 2009
6. Max Stoiber – @mxstbr – mxstbr.com ES6: 2015
7. Max Stoiber – @mxstbr – mxstbr.com ~6 YEARS!
8. Max Stoiber – @mxstbr – mxstbr.com ➡ ES6 TOO LARGE ~6 YEARS!
9. Max Stoiber – @mxstbr – mxstbr.com YEARLY RELEASES
10. Max Stoiber – @mxstbr – mxstbr.com STAGES
11. Max Stoiber – @mxstbr – mxstbr.com STAGE 0: STRAWMAN STAGE 1: PROPOSAL STAGE 2: DRAFT STAGE 3: CANDIDATE STAGE 4: FINISHED
12. Max Stoiber – @mxstbr – mxstbr.com STAGE 0: STRAWMAN STAGE 1: PROPOSAL STAGE 2: DRAFT STAGE 3: CANDIDATE STAGE 4: FINISHED
13. Max Stoiber – @mxstbr – mxstbr.com STAGE 0: STRAWMAN STAGE 1: PROPOSAL STAGE 2: DRAFT STAGE 3: CANDIDATE STAGE 4: FINISHED
14. Max Stoiber – @mxstbr – mxstbr.com STAGE 0: STRAWMAN STAGE 1: PROPOSAL STAGE 2: DRAFT STAGE 3: CANDIDATE STAGE 4: FINISHED
15. Max Stoiber – @mxstbr – mxstbr.com STAGE 0: STRAWMAN STAGE 1: PROPOSAL STAGE 2: DRAFT STAGE 3: CANDIDATE STAGE 4: FINISHED
16. Max Stoiber – @mxstbr – mxstbr.com STAGE 0: STRAWMAN STAGE 1: PROPOSAL STAGE 2: DRAFT STAGE 3: CANDIDATE STAGE 4: FINISHED
17. USING ESxxxx today? Max Stoiber – @mxstbr – mxstbr.com
18. TRANSPILING Max Stoiber – @mxstbr – mxstbr.com
19. Max Stoiber – @mxstbr – mxstbr.com BABEL
20. Max Stoiber – @mxstbr – mxstbr.com
21. Max Stoiber – @mxstbr – mxstbr.com
22. ES6 Max Stoiber – @mxstbr – mxstbr.com
23. Max Stoiber – @mxstbr – mxstbr.com let & const
24. Max Stoiber – @mxstbr – mxstbr.com Block scoped
25. Max Stoiber – @mxstbr – mxstbr.com if (true) { var a = 0; } console.log(a); // "0"
26. Max Stoiber – @mxstbr – mxstbr.com if (true) { let a = 0; } console.log(a); // "ReferenceError"
27. Max Stoiber – @mxstbr – mxstbr.com Constants
28. Max Stoiber – @mxstbr – mxstbr.com var a = 0; a = 1; console.log(a); // "1"
29. Max Stoiber – @mxstbr – mxstbr.com const a = 0; a = 1; // "SyntaxError"
30. Max Stoiber – @mxstbr – mxstbr.com Blocks
31. Max Stoiber – @mxstbr – mxstbr.com Replace IIFEs
32. Max Stoiber – @mxstbr – mxstbr.com (function() { var a = 0; }()); console.log(a); // "ReferenceError"
33. Max Stoiber – @mxstbr – mxstbr.com { let a = 0; } console.log(a); // "ReferenceError"
34. Max Stoiber – @mxstbr – mxstbr.com Template Literals
35. Max Stoiber – @mxstbr – mxstbr.com Easy String Construction
36. Max Stoiber – @mxstbr – mxstbr.com var name = "Max"; var twitter = "@mxstbr"; console.log("Find " + name + " on Twitter: " + twitter); // "Find Max on Twitter: @mxstbr"
37. Max Stoiber – @mxstbr – mxstbr.com const name = "Max"; const twitter = "@mxstbr"; console.log(`Find ${name} on Twitter: ${twitter}`); // "Find Max on Twitter: @mxstbr"
38. Max Stoiber – @mxstbr – mxstbr.com Arrow Functions
39. Max Stoiber – @mxstbr – mxstbr.com Shorter function declarations
40. Max Stoiber – @mxstbr – mxstbr.com var obj = { hello: function(name) { console.log("Hello", name); } } obj.hello("world"); // "Hello world"
41. Max Stoiber – @mxstbr – mxstbr.com const obj = { hello: (name) => { console.log(`Hello ${name}`); } } obj.hello("world"); // "Hello world"
42. Max Stoiber – @mxstbr – mxstbr.com Lexical Binding
43. Max Stoiber – @mxstbr – mxstbr.com function Person(age) { // this = instance of Person this.age = age; setInterval(function growUp() { this.age++; // Does not refer to the Person instance! }, 1000); } var Max = new Person(19);
44. Max Stoiber – @mxstbr – mxstbr.com function Person(age) { // self = instance of Person var self = this; self.age = age; setInterval(function growUp() { self.age++; // Correctly refers to the Person instance! }, 1000); } var Max = new Person(19);
45. Max Stoiber – @mxstbr – mxstbr.com function Person(age) { this.age = age; setInterval(function growUp() { this.age++; // Correctly refers to the Person instance! }.bind(this), 1000); // Bind the Person instance! } var Max = new Person(19);
46. Max Stoiber – @mxstbr – mxstbr.com function Person(age) { this.age = age; setInterval(() => { // Does not bind its own “this”! this.age++; // Correctly refers to the Person instance! }, 1000); } const Max = new Person(19);
47. Max Stoiber – @mxstbr – mxstbr.com Default Argument Values
48. Max Stoiber – @mxstbr – mxstbr.com function add(x, y) { x = x || 0; y = y || 0; return x + y; }
49. Max Stoiber – @mxstbr – mxstbr.com function add(x = 0, y = 0) { return x + y; }
50. Max Stoiber – @mxstbr – mxstbr.com Object Literals
51. Max Stoiber – @mxstbr – mxstbr.com function foo() { console.log("bar"); } var funcs = { foo: foo }; funcs.foo(); // "bar"
52. Max Stoiber – @mxstbr – mxstbr.com function foo() { console.log("bar"); } const funcs = { foo }; funcs.foo(); // "bar"
53. Max Stoiber – @mxstbr – mxstbr.com Destructuring
54. Max Stoiber – @mxstbr – mxstbr.com Arrays
55. Max Stoiber – @mxstbr – mxstbr.com var employees = ["Max", "Peter", "Hans"]; var Max = employees[0]; var Peter = employees[1]; var Hans = employees[2]; console.log(Max, Peter, Hans); // "Max" "Peter" "Hans"
56. Max Stoiber – @mxstbr – mxstbr.com const employees = ["Max", "Peter", “Hans"]; let [ Max, Peter, Hans ] = employees; console.log(Max, Peter, Hans); // "Max" "Peter" "Hans"
57. Max Stoiber – @mxstbr – mxstbr.com Objects
58. Max Stoiber – @mxstbr – mxstbr.com var Max = { name: "Max Stoiber", occupation: "Developer" } var name = Max.name; var occupation = Max.occupation; console.log(name, occupation); // "Max Stoiber" "Developer"
59. Max Stoiber – @mxstbr – mxstbr.com let Max = { name: "Max Stoiber", occupation: "Developer" } let { name, occupation } = Max; console.log(name, occupation); // "Max Stoiber" "Developer"
60. Max Stoiber – @mxstbr – mxstbr.com Classes
61. Max Stoiber – @mxstbr – mxstbr.com Easier OOP
62. Max Stoiber – @mxstbr – mxstbr.com function Person(age) { this.age = age; } Person.prototype.growUp = function () { return this.age += 1; }; var Max = new Person(19); Max.growUp(); console.log(Max.age); // "20"
63. Max Stoiber – @mxstbr – mxstbr.com class Person { constructor(age) { this.age = age; } growUp() { this.age += 1; } } const Max = new Person(19); Max.growUp(); console.log(Max.age); // "20"
64. Max Stoiber – @mxstbr – mxstbr.com let & const Blocks Template Literals Arrow Functions Default Argument Values Object Literals Destructuring Classes
65. @mxstbr Max Stoiber – @mxstbr – mxstbr.com