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

ECMAScript.Next ECMAScipt 6

on

  • 2,613 views

A tour on the future features JavaScript

A tour on the future features JavaScript

Statistics

Views

Total Views
2,613
Views on SlideShare
2,272
Embed Views
341

Actions

Likes
6
Downloads
13
Comments
0

4 Embeds 341

http://kevinderudder.wordpress.com 321
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 ECMAScript.Next ECMAScipt 6 Presentation Transcript

  • #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-guidelines.be
  • 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 exception handling numeric formatting~ECMASCRIPT 319961995 20051999 2009 2011 20131992 1998
  • 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 20131992 1998
  • 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• template strings• classes• symbols• spread operator• weakmaps• new object methods• default parameters• binary data…
  • about variables and scopes
  • 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
  • ES.next: Block scope› 2 new keywords: let and const› let› Creates a block scope variable› const› Like let but only readable afterdeclaration
  • 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
  • Shorthand Object Literal Syntax
  • 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
  • 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;}};
  • Default Function Parameters
  • Default Function Parameters› Have optional function parameters by settingdefault values› The parameters are defined when the functionsare defined
  • Rest parameter
  • 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
  • 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");
  • 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);
  • Spread operator
  • 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());
  • 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);
  • 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);
  • Classes
  • 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
  • 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();
  • 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);
  • 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;}};
  • Modules
  • 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
  • Modulesmodule helper{export function print(array){for(var a of array){log(a);}}}import {print} from helper;print(["Pierce","Sean"]);
  • 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/modules/json2.js,function(JSON) {alert(JSON.stringify([0, {a: true}]));});
  • Destructuring
  • 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
  • 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]
  • Good case: return multiple values› Return multiplefunction getMovieInfo(){return ["Dr No", "Sean Connery", "Joseph Wiseman"];}var [title, jamesbond, badGuy] = getMovieInfo();
  • Object destructuring› Similar to array pattern› Map on object propertiesvar movie = { "name": "Sean Connery“, "movie": "Dr No"};var {name: actor, movie: title} = movie;
  • 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› Set:› Map:› WeakMap:
  • 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
  • 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);
  • WeakMaps› Like maps› But: key must be an objectcannot be a primitive value› When the reference gets garbage collected, theweakmap will remove the item
  • 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
  • Iterators
  • 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}
  • 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);}
  • Arrow functions
  • Arrow Functions› JavaScript developers frequently use functionexpressions$("#button").click(function(){ /*...*/ });forEach(function(item){ /*...*/ });
  • 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");
  • I’m sorry but no time for
  • • Iterators• Symbols• Binary data• Tail-call optomization• Proxies• Reflection methods• …Other cool stuff
  • Q&A