Your SlideShare is downloading. ×
0
#comdaybeECMAScript.next!ECMAScript.wtf?e-guidelines - HOWEST@kevinderudder
ECMAScript.sextECMAScript sex
This is a JavaScript session
There will be code
@kevinderudder working for eGuidelinesand lecturer at the Technical University ofWest Flanders.Contact me on kevin@e-guide...
Why this session
probably the most popularprogramming languageJavaScriptis
probably the most misunderstoodprogramming languageJavaScriptis
I <3 JavaScript
GOALIntriguing JavaScript storyWhat’s newCode, code and code
The intriguing JavaScript Story
19961995 20051999 2009 2011 20131992 1998
19961995 20051999 2009 2011 20131992 1998
MochaLiveScriptMocha19961995 20051999 2009 2011 20131992 1998
LiveScriptJavaScriptLiveScriptTMJava
19961995 20051999 2009 2011 20131992 1998
JScript19961995 20051999 2009 2011 20131992 1998
ECMAJavaScriptSCRIPT19961995 20051999 2009 2011 20131992 1998
≠JAVASCRIPTECMASCRIPT19961995 20051999 2009 2011 20131992 1998
is a dialect ofJAVASCRIPTECMASCRIPT19961995 20051999 2009 2011 20131992 1998
ECMASCRIPTare dialects ofJAVASCRIPT JSCRIPT ACTIONSCRIPT19961995 20051999 2009 2011 20131992 1998
ECMASCRIPT~TC 39 controls whatwill be included inthe spec19961995 20051999 2009 2011 20131992 1998
ECMASCRIPT 2be inline with excistinginternational standards~19961995 20051999 2009 2011 20131992 1998
features that are reallyessential to programmingregular expressions more string methods switch, do whileinstanceof excepti...
anticipated the future~ECMASCRIPT 419961995 20051999 2009 2011 20131992 1998
ECMASCRIPT 4~Incompatible with ES 319961995 20051999 2009 2011 20131992 1998
AJAXBuild complex webapps~19961995 20051999 2009 2011 20131992 1998
Object.Create defineProperty StrictGetter and setters json supportSemantic changes~ECMASCRIPT 519961995 20051999 2009 2011...
Revision of ES5~ECMASCRIPT 5.119961995 20051999 2009 2011 20131992 1998
~also called ES.nextECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
~compatible with ES5ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
~be a better languageECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
~Final review of draftin november 2013ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
~ECMA approval indecember 2014ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
ECMAHARMONYSuperset of ES.nextfuture features in ES.nextor ES.next.next~19961995 20051999 2009 2011 20131992 1998
demo.
most ES.next features don’t work in your browser
What to use??› Node› TypeScript› Transpilers› Google Traceur› Esprima
http://kangax.github.io/es5-compat-table/es6/
SHOW ME CODE
Features• iterators• const and let• maps• rest parameters• generators• shorthand literal syntax• arrow functions• modules•...
about variables and scopes
ES 5: function scopevar jamesBondMovies = ["Goldeneye", "Dr No"];function showMovies(){var i = 0, l = jamesBondMovies.leng...
ES.next: Block scope› 2 new keywords: let and const› let› Creates a block scope variable› const› Like let but only readabl...
letvar jamesBondMovies = ["Goldeneye", "Dr No"];function showMovies(){let i = 0, l = jamesBondMovies.length;for(; i < l ; ...
Shorthand Object Literal Syntax
Shorthand Object Literal Syntax› Allow us to remove redundant codevar jamesbond = Sean Connery;var title = Dr No;var actor...
Shorthand Object Literal Syntaxfunction JamesBond(name, f){this.name = name;this.favDrink = f;}JamesBond.prototype = {orde...
Default Function Parameters
Default Function Parameters› Have optional function parameters by settingdefault values› The parameters are defined when t...
Rest parameter
Function problem› You never know how many arguments are beingpassed to a function› Use the arguments object to get all the...
Rest Parameters› Pass a number of args to a named parameter› Choos a name for your parameter› Instead of using the argumen...
Rest Parametersfunction JamesBond(name,favoriteDrink,...gadgets) {for(var i = 0, l = gadgets.length;i<l;i++){alert(gadgets...
Spread operator
Spread operator› Opposite of rest parameters› Pass number of arguments to functionfunction commentMovie(date, m, comment, ...
Spread Operatorfunction Cocktail(name, type, ...ingredients){alert(name + ( + type + ));alert(ingredients);alert(  + ingre...
Spread operator and rest parameters combinedfunction Cocktail(name, type, ...ingredients){alert(name + ( + type + ));alert...
Classes
Classes› A class is a representation of an object› Blueprint to create objects› Until now, we’ve faked it› functions and p...
Fake itfunction JamesBond(name, favoriteDrink) {this.name = name;this.favDrink = favoriteDrink;}JamesBond.prototype = {/* ...
Classes in ES6class JamesBond{constructor(name, favoriteDrink){this.name = name;this.favDrink = favoriteDrink;}get favorit...
Extending classesclass Movie{constructor(title){this.title = title;}}class jamesBondMovie extends Movie{constructor(title,...
Modules
Modules› Group functionality into a module› Define which function you want to make availableexternally› Import module in y...
Modulesmodule helper{export function print(array){for(var a of array){log(a);}}}import {print} from helper;print(["Pierce"...
Remote modulesmodule JSON athttp://json.org/modules/json2.js;alert(JSON.stringify({hi: world}));
Module Loaders› Dynamic API for loading modules in controlledand selectively isolated contextsLoader.load(http://json.org/...
Destructuring
Destructuring› Extract values from an object using patterns› Get zone number out of telephone number› Syntactic sugar› Is ...
Array destructuring› Variables can be initialized in one statement› Swapping 2 variablesvar [d, m, y] = [20,6,2013];var d ...
Good case: return multiple values› Return multiplefunction getMovieInfo(){return ["Dr No", "Sean Connery", "Joseph Wiseman...
Object destructuring› Similar to array pattern› Map on object propertiesvar movie = { "name": "Sean Connery“, "movie": "Dr...
Object destructuringmovies.forEach(function({name: actor, movie: movie}){// ...});
Maps, WeakMaps and sets
Maps, WeakMaps and Sets› Until now, Array was (is) the only type ofcollection› ES6 introduces 3 new types of collections› ...
Sets› List of unique array elementsvar movies = new Set();movies.add("Dr No");movies.add("GoldFinger");console.log(movies....
Maps› Map a value to a unique key› cfr: a Dictionaryvar movies = new Map();movies.set(1, "Dr No");movies.set(2, "GoldFinge...
WeakMaps› Like maps› But: key must be an objectcannot be a primitive value› When the reference gets garbage collected, the...
WeakMapsvar drNo = new Movie(...params);var movies = new WeakMap();movies.set(drNo, {jamesbond: Sean});var m = movies.get(...
Iterators
Iterators› JavaScript has the for – in› In an array, the for-in gives the indexes and not thevaluesvar actors = ["Sean", "...
for-ofvar actors = ["Sean", "Timothy", "Roger", "Pierce"];for (var a of actors) {alert(a); // 0,1,2,3}var movies = new Map...
Arrow functions
Arrow Functions› JavaScript developers frequently use functionexpressions$("#button").click(function(){ /*...*/ });forEach...
Arrow Functionsfunction addMovies(...movies){movies.forEach(function(m){alert(m);});}addMovies("dr No", "Goldeneye");funct...
I’m sorry but no time for
• Iterators• Symbols• Binary data• Tail-call optomization• Proxies• Reflection methods• …Other cool stuff
Q&A
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
ECMAScript.Next ECMAScipt 6
Upcoming SlideShare
Loading in...5
×

ECMAScript.Next ECMAScipt 6

2,242

Published on

A tour on the future features JavaScript

Published in: Technology

Transcript of "ECMAScript.Next ECMAScipt 6"

  1. 1. #comdaybeECMAScript.next!ECMAScript.wtf?e-guidelines - HOWEST@kevinderudder
  2. 2. ECMAScript.sextECMAScript sex
  3. 3. This is a JavaScript session
  4. 4. There will be code
  5. 5. @kevinderudder working for eGuidelinesand lecturer at the Technical University ofWest Flanders.Contact me on kevin@e-guidelines.be
  6. 6. Why this session
  7. 7. probably the most popularprogramming languageJavaScriptis
  8. 8. probably the most misunderstoodprogramming languageJavaScriptis
  9. 9. I <3 JavaScript
  10. 10. GOALIntriguing JavaScript storyWhat’s newCode, code and code
  11. 11. The intriguing JavaScript Story
  12. 12. 19961995 20051999 2009 2011 20131992 1998
  13. 13. 19961995 20051999 2009 2011 20131992 1998
  14. 14. MochaLiveScriptMocha19961995 20051999 2009 2011 20131992 1998
  15. 15. LiveScriptJavaScriptLiveScriptTMJava
  16. 16. 19961995 20051999 2009 2011 20131992 1998
  17. 17. JScript19961995 20051999 2009 2011 20131992 1998
  18. 18. ECMAJavaScriptSCRIPT19961995 20051999 2009 2011 20131992 1998
  19. 19. ≠JAVASCRIPTECMASCRIPT19961995 20051999 2009 2011 20131992 1998
  20. 20. is a dialect ofJAVASCRIPTECMASCRIPT19961995 20051999 2009 2011 20131992 1998
  21. 21. ECMASCRIPTare dialects ofJAVASCRIPT JSCRIPT ACTIONSCRIPT19961995 20051999 2009 2011 20131992 1998
  22. 22. ECMASCRIPT~TC 39 controls whatwill be included inthe spec19961995 20051999 2009 2011 20131992 1998
  23. 23. ECMASCRIPT 2be inline with excistinginternational standards~19961995 20051999 2009 2011 20131992 1998
  24. 24. features that are reallyessential to programmingregular expressions more string methods switch, do whileinstanceof exception handling numeric formatting~ECMASCRIPT 319961995 20051999 2009 2011 20131992 1998
  25. 25. anticipated the future~ECMASCRIPT 419961995 20051999 2009 2011 20131992 1998
  26. 26. ECMASCRIPT 4~Incompatible with ES 319961995 20051999 2009 2011 20131992 1998
  27. 27. AJAXBuild complex webapps~19961995 20051999 2009 2011 20131992 1998
  28. 28. Object.Create defineProperty StrictGetter and setters json supportSemantic changes~ECMASCRIPT 519961995 20051999 2009 2011 20131992 1998
  29. 29. Revision of ES5~ECMASCRIPT 5.119961995 20051999 2009 2011 20131992 1998
  30. 30. ~also called ES.nextECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  31. 31. ~compatible with ES5ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  32. 32. ~be a better languageECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  33. 33. ~Final review of draftin november 2013ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  34. 34. ~ECMA approval indecember 2014ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  35. 35. ECMAHARMONYSuperset of ES.nextfuture features in ES.nextor ES.next.next~19961995 20051999 2009 2011 20131992 1998
  36. 36. demo.
  37. 37. most ES.next features don’t work in your browser
  38. 38. What to use??› Node› TypeScript› Transpilers› Google Traceur› Esprima
  39. 39. http://kangax.github.io/es5-compat-table/es6/
  40. 40. SHOW ME CODE
  41. 41. Features• iterators• const and let• maps• rest parameters• generators• shorthand literal syntax• arrow functions• modules• template strings• classes• symbols• spread operator• weakmaps• new object methods• default parameters• binary data…
  42. 42. about variables and scopes
  43. 43. ES 5: function scopevar jamesBondMovies = ["Goldeneye", "Dr No"];function showMovies(){var i = 0, l = jamesBondMovies.length;for(; i < l ; i++){alert(jamesBondMovies[i]);}alert(i);alert(l);}showMovies();› 2› 2
  44. 44. ES.next: Block scope› 2 new keywords: let and const› let› Creates a block scope variable› const› Like let but only readable afterdeclaration
  45. 45. letvar jamesBondMovies = ["Goldeneye", "Dr No"];function showMovies(){let i = 0, l = jamesBondMovies.length;for(; i < l ; i++){alert(jamesBondMovies[i]);}alert(i);alert(l);}showMovies();› i is not defined› l is not defined
  46. 46. Shorthand Object Literal Syntax
  47. 47. Shorthand Object Literal Syntax› Allow us to remove redundant codevar jamesbond = Sean Connery;var title = Dr No;var actor1 = Joseph Wiseman;var drNO = {jamesbond: jamesbond,title: title,badGuy: actor1};var jamesbond = Sean Connery;var title = Dr No;var actor1 = Joseph Wiseman;var drNO = {jamesbond,title,badGuy: actor1};ES 5 ES.next
  48. 48. Shorthand Object Literal Syntaxfunction JamesBond(name, f){this.name = name;this.favDrink = f;}JamesBond.prototype = {order(howTo){alert(this.favoriteDrink + + howTo);},get favoriteDrink(){return this.favDrink;},set favoriteDrink(f){this.favDrink = f;}};
  49. 49. Default Function Parameters
  50. 50. Default Function Parameters› Have optional function parameters by settingdefault values› The parameters are defined when the functionsare defined
  51. 51. Rest parameter
  52. 52. Function problem› You never know how many arguments are beingpassed to a function› Use the arguments object to get all the arguments› Arguments is not an array!!!› Solution: rest parameter› use ‘…’ to denote a variable number of arguments
  53. 53. Rest Parameters› Pass a number of args to a named parameter› Choos a name for your parameter› Instead of using the arguments object› Variabe name preceded with …function addMovies(...movies){movies.forEach(function(m){alert(m);});}addMovies("dr No", "Goldeneye");addMovies("dr No", "licence to kill", "Goldfinger");
  54. 54. Rest Parametersfunction JamesBond(name,favoriteDrink,...gadgets) {for(var i = 0, l = gadgets.length;i<l;i++){alert(gadgets[i]);}this.name = name;this.favoriteDrink = favoriteDrink;}var sean = new JamesBond(Sean Connery,Martini,Watch with a laser,Aston Martin,Mojo);
  55. 55. Spread operator
  56. 56. Spread operator› Opposite of rest parameters› Pass number of arguments to functionfunction commentMovie(date, m, comment, by){log("comment on " + m+ " by " + by + " on " + date);}function getComment(){return ["Goldeneye", "my favorite", "kevin"];}commentMovie("20/06/2013", ...getComment());
  57. 57. Spread Operatorfunction Cocktail(name, type, ...ingredients){alert(name + ( + type + ));alert(ingredients);alert( + ingredients);var i = 0, l = ingredients.length;}var vesper = [shortdrink, lillet blanc, wodka, gin];var v = new Cocktail(Vesper Martini, ...vesper);
  58. 58. Spread operator and rest parameters combinedfunction Cocktail(name, type, ...ingredients){alert(name + ( + type + ));alert(ingredients);alert( + ingredients);var i = 0, l = ingredients.length;for(;i<l;i++){alert( + ingredients[i]);}}var vesper = [shortdrink,lillet,blanc,wodka,gin];var v = new Cocktail(Vesper Martini, ...vesper);
  59. 59. Classes
  60. 60. Classes› A class is a representation of an object› Blueprint to create objects› Until now, we’ve faked it› functions and prototypes to implement classes
  61. 61. Fake itfunction JamesBond(name, favoriteDrink) {this.name = name;this.favDrink = favoriteDrink;}JamesBond.prototype = {/* PROPERTIES */get favoriteDrink() { return this.favDrink },set favoriteDrink(v) { this.favDrink = v },/* BEHAVIOR */orderDrink: function () { alert(order); }};var daniel = new JamesBond(Daniel Craig, Vesper Martini);alert(daniel.favoriteDrink);daniel.orderDrink();
  62. 62. Classes in ES6class JamesBond{constructor(name, favoriteDrink){this.name = name;this.favDrink = favoriteDrink;}get favoriteDrink() { return this.favDrink }set favoriteDrink(v) { this.favDrink = v }orderDrink(how) {alert(this.favDrink + n + how);}}var daniel = new JamesBond(Daniel Craig, Vesper Martini);daniel.orderDrink(shaken not stirred);
  63. 63. Extending classesclass Movie{constructor(title){this.title = title;}}class jamesBondMovie extends Movie{constructor(title, jamesBond, badGuy, omgGirl){super(title);this.jamesBond = jamesBond;this.badGuy = badGuy;this.omgGirl = omgGirl;}};
  64. 64. Modules
  65. 65. Modules› Group functionality into a module› Define which function you want to make availableexternally› Import module in your code› Define which functionality you want to include
  66. 66. Modulesmodule helper{export function print(array){for(var a of array){log(a);}}}import {print} from helper;print(["Pierce","Sean"]);
  67. 67. Remote modulesmodule JSON athttp://json.org/modules/json2.js;alert(JSON.stringify({hi: world}));
  68. 68. Module Loaders› Dynamic API for loading modules in controlledand selectively isolated contextsLoader.load(http://json.org/modules/json2.js,function(JSON) {alert(JSON.stringify([0, {a: true}]));});
  69. 69. Destructuring
  70. 70. Destructuring› Extract values from an object using patterns› Get zone number out of telephone number› Syntactic sugar› Is already supported in a number of languages› Python: sequence unpacking› Coffeescript: destructuring
  71. 71. Array destructuring› Variables can be initialized in one statement› Swapping 2 variablesvar [d, m, y] = [20,6,2013];var d = 20, m = 6, y = 2013;var [value1, value2] = [10, 30];[value1, value2] = [value2, value1]
  72. 72. Good case: return multiple values› Return multiplefunction getMovieInfo(){return ["Dr No", "Sean Connery", "Joseph Wiseman"];}var [title, jamesbond, badGuy] = getMovieInfo();
  73. 73. Object destructuring› Similar to array pattern› Map on object propertiesvar movie = { "name": "Sean Connery“, "movie": "Dr No"};var {name: actor, movie: title} = movie;
  74. 74. Object destructuringmovies.forEach(function({name: actor, movie: movie}){// ...});
  75. 75. Maps, WeakMaps and sets
  76. 76. Maps, WeakMaps and Sets› Until now, Array was (is) the only type ofcollection› ES6 introduces 3 new types of collections› Set:› Map:› WeakMap:
  77. 77. Sets› List of unique array elementsvar movies = new Set();movies.add("Dr No");movies.add("GoldFinger");console.log(movies.size()); // --> 2var movies = new Set();movies.add("Dr No");movies.add("GoldFinger");movies.add("Dr No"); // --> already in the setconsole.log(movies.size()); // --> 2
  78. 78. Maps› Map a value to a unique key› cfr: a Dictionaryvar movies = new Map();movies.set(1, "Dr No");movies.set(2, "GoldFinger");var m = movies.get(1);movies.delete(2);
  79. 79. WeakMaps› Like maps› But: key must be an objectcannot be a primitive value› When the reference gets garbage collected, theweakmap will remove the item
  80. 80. WeakMapsvar drNo = new Movie(...params);var movies = new WeakMap();movies.set(drNo, {jamesbond: Sean});var m = movies.get(drNo); // OKdrNo = null;var m = movies.get(drNo); // UNDEFINED
  81. 81. Iterators
  82. 82. Iterators› JavaScript has the for – in› In an array, the for-in gives the indexes and not thevaluesvar actors = ["Sean", "Timothy", "Roger”];for (var a in actors) {alert(a); // 0,1,2}
  83. 83. for-ofvar actors = ["Sean", "Timothy", "Roger", "Pierce"];for (var a of actors) {alert(a); // 0,1,2,3}var movies = new Map();movies.set(1, "Dr No");movies.set(2, "GoldFinger");for(var [id, title] n movies){alert(title);}
  84. 84. Arrow functions
  85. 85. Arrow Functions› JavaScript developers frequently use functionexpressions$("#button").click(function(){ /*...*/ });forEach(function(item){ /*...*/ });
  86. 86. Arrow Functionsfunction addMovies(...movies){movies.forEach(function(m){alert(m);});}addMovies("dr No", "Goldeneye");function addMovies(...movies){movies.forEach(m => alert(m));}addMovies("dr No", "Goldeneye");
  87. 87. I’m sorry but no time for
  88. 88. • Iterators• Symbols• Binary data• Tail-call optomization• Proxies• Reflection methods• …Other cool stuff
  89. 89. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×