ECMAScript.Next ECMAScipt 6
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

ECMAScript.Next ECMAScipt 6

on

  • 2,653 views

A tour on the future features JavaScript

A tour on the future features JavaScript

Statistics

Views

Total Views
2,653
Views on SlideShare
2,310
Embed Views
343

Actions

Likes
6
Downloads
14
Comments
0

4 Embeds 343

http://kevinderudder.wordpress.com 323
https://twitter.com 16
https://www.rebelmouse.com 2
http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ECMAScript.Next ECMAScipt 6 Presentation Transcript

  • 1. #comdaybeECMAScript.next!ECMAScript.wtf?e-guidelines - HOWEST@kevinderudder
  • 2. ECMAScript.sextECMAScript sex
  • 3. This is a JavaScript session
  • 4. There will be code
  • 5. @kevinderudder working for eGuidelinesand lecturer at the Technical University ofWest Flanders.Contact me on kevin@e-guidelines.be
  • 6. Why this session
  • 7. probably the most popularprogramming languageJavaScriptis
  • 8. probably the most misunderstoodprogramming languageJavaScriptis
  • 9. I <3 JavaScript
  • 10. GOALIntriguing JavaScript storyWhat’s newCode, code and code
  • 11. The intriguing JavaScript Story
  • 12. 19961995 20051999 2009 2011 20131992 1998
  • 13. 19961995 20051999 2009 2011 20131992 1998
  • 14. MochaLiveScriptMocha19961995 20051999 2009 2011 20131992 1998
  • 15. LiveScriptJavaScriptLiveScriptTMJava
  • 16. 19961995 20051999 2009 2011 20131992 1998
  • 17. JScript19961995 20051999 2009 2011 20131992 1998
  • 18. ECMAJavaScriptSCRIPT19961995 20051999 2009 2011 20131992 1998
  • 19. ≠JAVASCRIPTECMASCRIPT19961995 20051999 2009 2011 20131992 1998
  • 20. is a dialect ofJAVASCRIPTECMASCRIPT19961995 20051999 2009 2011 20131992 1998
  • 21. ECMASCRIPTare dialects ofJAVASCRIPT JSCRIPT ACTIONSCRIPT19961995 20051999 2009 2011 20131992 1998
  • 22. ECMASCRIPT~TC 39 controls whatwill be included inthe spec19961995 20051999 2009 2011 20131992 1998
  • 23. ECMASCRIPT 2be inline with excistinginternational standards~19961995 20051999 2009 2011 20131992 1998
  • 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. anticipated the future~ECMASCRIPT 419961995 20051999 2009 2011 20131992 1998
  • 26. ECMASCRIPT 4~Incompatible with ES 319961995 20051999 2009 2011 20131992 1998
  • 27. AJAXBuild complex webapps~19961995 20051999 2009 2011 20131992 1998
  • 28. Object.Create defineProperty StrictGetter and setters json supportSemantic changes~ECMASCRIPT 519961995 20051999 2009 2011 20131992 1998
  • 29. Revision of ES5~ECMASCRIPT 5.119961995 20051999 2009 2011 20131992 1998
  • 30. ~also called ES.nextECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  • 31. ~compatible with ES5ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  • 32. ~be a better languageECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  • 33. ~Final review of draftin november 2013ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  • 34. ~ECMA approval indecember 2014ECMASCRIPT 619961995 20051999 2009 2011 20131992 1998
  • 35. ECMAHARMONYSuperset of ES.nextfuture features in ES.nextor ES.next.next~19961995 20051999 2009 2011 20131992 1998
  • 36. demo.
  • 37. most ES.next features don’t work in your browser
  • 38. What to use??› Node› TypeScript› Transpilers› Google Traceur› Esprima
  • 39. http://kangax.github.io/es5-compat-table/es6/
  • 40. SHOW ME CODE
  • 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. about variables and scopes
  • 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. ES.next: Block scope› 2 new keywords: let and const› let› Creates a block scope variable› const› Like let but only readable afterdeclaration
  • 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. Shorthand Object Literal Syntax
  • 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. 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. Default Function Parameters
  • 50. Default Function Parameters› Have optional function parameters by settingdefault values› The parameters are defined when the functionsare defined
  • 51. Rest parameter
  • 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. 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. 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. Spread operator
  • 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. 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. 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. Classes
  • 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. 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. 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. 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. Modules
  • 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. Modulesmodule helper{export function print(array){for(var a of array){log(a);}}}import {print} from helper;print(["Pierce","Sean"]);
  • 67. Remote modulesmodule JSON athttp://json.org/modules/json2.js;alert(JSON.stringify({hi: world}));
  • 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. Destructuring
  • 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. 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. Good case: return multiple values› Return multiplefunction getMovieInfo(){return ["Dr No", "Sean Connery", "Joseph Wiseman"];}var [title, jamesbond, badGuy] = getMovieInfo();
  • 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. Object destructuringmovies.forEach(function({name: actor, movie: movie}){// ...});
  • 75. Maps, WeakMaps and sets
  • 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. 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. 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. 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. 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. Iterators
  • 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. 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. Arrow functions
  • 85. Arrow Functions› JavaScript developers frequently use functionexpressions$("#button").click(function(){ /*...*/ });forEach(function(item){ /*...*/ });
  • 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. I’m sorry but no time for
  • 88. • Iterators• Symbols• Binary data• Tail-call optomization• Proxies• Reflection methods• …Other cool stuff
  • 89. Q&A