ES2015

Transcript

1. ES2015 CoffeeScript: The Good Parts
3. <3 Javascript
5. @MarkFunk
6. ESHarmony
7. ESHarmony
8. ES6
9. ES6
10. ES2015
11. ECMASCRIPT
12. TC39
13. Annual Releases
14. ES2016
15. ES2015
16. BIG
19. Favorite Things
20. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
21. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
22. SCOPE
23. VAR FUNCTION SCOPING
24. VAR HOISTING
25. LET/CONST BLOCK SCOPING
26. CONST NO REASSIGNMENT
27. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
28. New Shorthand
29. function() { return 1; }
30. () => { return 1; };
31. () => 1
32. myArray.map( (a) => a + 1 );
33. this.num = 1; myArray.map( (a) => a + this.num );
34. this.num = 1; myArray.map(function(a) { return a + this.num; }.bind(this));
35. Default Parameters
36. const addFn = (a, b=1) => a + b;
37. const getAge = (ageObj = {}) => { return ageObj.age; };
38. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
39. New Shorthand
40. const person = { firstName: firstName, lastName: lastName };
41. const person = { firstName, lastName };
42. Computed Properties
43. const person = { name }; person[ageField] = 11; hugPerson(person);
44. hugPerson({ name, [ageField]: 11 });
45. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
46. let myPerson = person; let name = myPerson.name; let age = myPerson.age; doSomething(name, age);
47. let { name, age } = person; doSomething(name, age);
48. let [person1, person2] = people; doSomething(person1, person2);
49. let [, person2] = people; doSomething(person2);
50. const fn = ({name, age}) => { doSomething(name, age); }
51. const fn = ({name = ‘Mr F’, age}) => { doSomething(name, age); }
52. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
53. REST
54. const add = (…args) => { return args.reduce((a, b) => { return a + b; }, 0); }; add(1, 2, 3, 4, 5);
55. const [person1, …otherPeople] = people; highFivePerson(person1); winkAtPeople(otherPeople);
56. SPREAD
57. let people = [‘bob’, ‘jane’]; const hug = (person1, person2) => { // Programmatically hug }; hug(…people);
58. let people = […cool, …unCool];
59. const logArgs = (fn) => { return (…args) => { console.log(…args); fn(…args); }; }; const loggedFn = logArgs(myFns); loggedFn(argOne, argTwo);
60. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
61. function Dog() { this.sound = ‘woof’; } Dog.prototype.woof = function() { console.log(this.sound); }; let fido = new Dog(); fido.woof();
62. class Dog { constructor() { this.sound = ‘woof’; } woof() { console.log(this.sound); } } let fido = new Dog(); fido.woof();
63. class Animal { this.sound = ‘’; speak() { console.log(this.sound); } } class Dog extends Animal { constructor() { super(); this.sound = ‘woof’; } } let fido = new Dog(); fido.speak();
64. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
65. String Concatenation
66. let cartMessage = “There are “ + items + “ items in your cart”; console.log(cartMessage);
67. let cartMessage = [ “There are”, items, “items in your cart” ].join(“ “); console.log(cartMessage);
68. let cartMessage = `There are ${items} items in your cart`; console.log(cartMessage);
69. let cartMessage = `There are ${redItems + blueItems} items in your cart`; console.log(cartMessage);
70. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
72. const Animals = require(‘Animals’); let fido = new Animals.Dog(); let fry = new Animals.Cat(); module.exports = { fido, fry };
73. const {Dog, Cat} = require(‘Animals’); let fido = new Dog(); let fry = new Cat(); module.exports = { fido, fry };
74. import {Dog, Cat} from ‘Animals’; let fido = new Dog(); let fry = new Cat(); export fido; export fry;
75. import {Dog as D, Cat} from ‘Animals’; let fido = new D(); let fry = new Cat(); export default { fido, fry };
76. import {Dog as D, Cat} from ‘Animals’; let fido = new D(); let fry = new Cat(); export default { fido, fry };
77. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
78. Favorite Things
79. https://ponyfoo.com/articles/es6
80. https://kangax.github.io/compat-table/es6/
81. Transpiler
83. Brave
84. LET/CONST & FUNCTIONS & OBJECTS & DESTRUCTURING & REST/SPREAD & CLASSES & TEMPLATES & MODULES
85. let { className, icon, ...props } = this.props; const iconClass = `${className} icon icon-${icon}`; return <i className={iconClass} {...props} />;
86. let newObj = { …obj };
87. ES2015
88. Thanks. @MarkFunk