This document discusses the history and evolution of ECMAScript, also known as JavaScript. It begins with the origins of JavaScript in the mid-1990s and traces the development of the language through successive standards known as ECMAScript 3, 5, 6 and beyond. Key features of newer ECMAScript versions like ECMAScript 6 are summarized, including let and const block scoping, shorthand object literal syntax, default parameters, rest parameters, spread syntax, classes, modules, destructuring and iterators. The presentation aims to explain new JavaScript capabilities and show code examples.

1. #comdaybe
ECMAScript.next!
ECMAScript.wtf?
e-guidelines - HOWEST
@kevinderudder

2. ECMAScript.sext
ECMAScript sex

3. This is a JavaScript session

4. There will be code

5. @kevinderudder working for eGuidelines
and lecturer at the Technical University of
West Flanders.
Contact me on kevin@e-guidelines.be

8. Why this session

9. probably the most popular
programming language
JavaScriptis

10. probably the most misunderstood
programming language
JavaScriptis

11. I <3 JavaScript

13. GOAL
Intriguing JavaScript story
What’s new
Code, code and code

14. The intriguing JavaScript Story

15. 19961995 20051999 2009 2011 20131992 1998

17. 19961995 20051999 2009 2011 20131992 1998

19. Mocha
LiveScript
Mocha
19961995 20051999 2009 2011 20131992 1998

20. LiveScript
JavaScript
LiveScript
TM
Java

21. 19961995 20051999 2009 2011 20131992 1998

23. JScript
19961995 20051999 2009 2011 20131992 1998

24. ECMA
JavaScript
SCRIPT
19961995 20051999 2009 2011 20131992 1998

25. ≠
JAVASCRIPT
ECMASCRIPT
19961995 20051999 2009 2011 20131992 1998

26. is a dialect of
JAVASCRIPT
ECMASCRIPT
19961995 20051999 2009 2011 20131992 1998

27. ECMASCRIPT
are dialects of
JAVASCRIPT JSCRIPT ACTIONSCRIPT
19961995 20051999 2009 2011 20131992 1998

28. ECMASCRIPT~
TC 39 controls what
will be included in
the spec
19961995 20051999 2009 2011 20131992 1998

29. ECMASCRIPT 2
be inline with excisting
international standards
~
19961995 20051999 2009 2011 20131992 1998

30. features that are really
essential to programming
regular expressions more string methods switch, do while
instanceof exception handling numeric formatting
~
ECMASCRIPT 3
19961995 20051999 2009 2011 20131992 1998

31. anticipated the future
~
ECMASCRIPT 4
19961995 20051999 2009 2011 20131992 1998

32. ECMASCRIPT 4~
Incompatible with ES 3
19961995 20051999 2009 2011 20131992 1998

33. AJAX
Build complex web
apps
~
19961995 20051999 2009 2011 20131992 1998

34. Object.Create defineProperty Strict
Getter and setters json supportSemantic changes
~
ECMASCRIPT 5
19961995 20051999 2009 2011 20131992 1998

35. Revision of ES5
~
ECMASCRIPT 5.1
19961995 20051999 2009 2011 20131992 1998

36. ~
also called ES.next
ECMASCRIPT 6
19961995 20051999 2009 2011 20131992 1998

37. ~
compatible with ES5
ECMASCRIPT 6
19961995 20051999 2009 2011 20131992 1998

38. ~
be a better language
ECMASCRIPT 6
19961995 20051999 2009 2011 20131992 1998

39. ~
Final review of draft
in november 2013
ECMASCRIPT 6
19961995 20051999 2009 2011 20131992 1998

40. ~
ECMA approval in
december 2014
ECMASCRIPT 6
19961995 20051999 2009 2011 20131992 1998

41. ECMAHARMONY
Superset of ES.next
future features in ES.next
or ES.next.next
~
19961995 20051999 2009 2011 20131992 1998

43. demo.

44. most ES.next features don’t work in your browser

45. What to use??
› Node
› TypeScript
› Transpilers
› Google Traceur
› Esprima

46. http://kangax.github.io/es5-compat-table/es6/

48. SHOW ME CODE

49. 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
…

50. about variables and scopes

51. ES 5: function scope
var 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

52. ES.next: Block scope
› 2 new keywords: let and const
› let
› Creates a block scope variable
› const
› Like let but only readable after
declaration

53. let
var 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

54. Shorthand Object Literal Syntax

55. Shorthand Object Literal Syntax
› Allow us to remove redundant code
var 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

56. Shorthand Object Literal Syntax
function 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;
}
};

57. Default Function Parameters

59. Default Function Parameters
› Have optional function parameters by setting
default values
› The parameters are defined when the functions
are defined

60. Rest parameter

61. Function problem
› You never know how many arguments are being
passed 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

62. 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");

63. Rest Parameters
function 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');

64. Spread operator

65. Spread operator
› Opposite of rest parameters
› Pass number of arguments to function
function 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());

66. Spread Operator
function 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);

67. Spread operator and rest parameters combined
function 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);

68. Classes

69. 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

70. 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();

71. Classes in ES6
class 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');

72. Extending classes
class 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;
}
};

73. Modules

74. Modules
› Group functionality into a module
› Define which function you want to make available
externally
› Import module in your code
› Define which functionality you want to include

75. Modules
module helper{
export function print(array){
for(var a of array){
log(a);
}
}
}
import {print} from helper;
print(["Pierce","Sean"]);

76. Remote modules
module JSON at
'http://json.org/modules/json2.js';
alert(JSON.stringify({'hi': 'world'}));

77. Module Loaders
› Dynamic API for loading modules in controlled
and selectively isolated contexts
Loader.load('http://json.org/modules/json2.js',
function(JSON) {
alert(JSON.stringify([0, {a: true}]));
});

78. Destructuring

79. 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

80. Array destructuring
› Variables can be initialized in one statement
› Swapping 2 variables
var [d, m, y] = [20,6,2013];
var d = 20, m = 6, y = 2013;
var [value1, value2] = [10, 30];
[value1, value2] = [value2, value1]

81. Good case: return multiple values
› Return multiple
function getMovieInfo(){
return ["Dr No", "Sean Connery", "Joseph Wiseman"];
}
var [title, jamesbond, badGuy] = getMovieInfo();

82. Object destructuring
› Similar to array pattern
› Map on object properties
var movie = { "name": "Sean Connery“
, "movie": "Dr No"};
var {name: actor, movie: title} = movie;

83. Object destructuring
movies.forEach(function({name: actor, movie: movie}){
// ...
});

84. Maps, WeakMaps and sets

85. Maps, WeakMaps and Sets
› Until now, Array was (is) the only type of
collection
› ES6 introduces 3 new types of collections
› Set:
› Map:
› WeakMap:

86. Sets
› List of unique array elements
var movies = new Set();
movies.add("Dr No");
movies.add("GoldFinger");
console.log(movies.size()); // --> 2
var movies = new Set();
movies.add("Dr No");
movies.add("GoldFinger");
movies.add("Dr No"); // --> already in the set
console.log(movies.size()); // --> 2

87. Maps
› Map a value to a unique key
› cfr: a Dictionary
var movies = new Map();
movies.set(1, "Dr No");
movies.set(2, "GoldFinger");
var m = movies.get(1);
movies.delete(2);

88. WeakMaps
› Like maps
› But: key must be an object
cannot be a primitive value
› When the reference gets garbage collected, the
weakmap will remove the item

89. WeakMaps
var drNo = new Movie(...params);
var movies = new WeakMap();
movies.set(drNo, {'jamesbond': 'Sean'});
var m = movies.get(drNo); // OK
drNo = null;
var m = movies.get(drNo); // UNDEFINED

90. Iterators

91. Iterators
› JavaScript has the for – in
› In an array, the for-in gives the indexes and not the
values
var actors = ["Sean", "Timothy", "Roger”];
for (var a in actors) {
alert(a); // 0,1,2
}

92. for-of
var 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);
}

93. Arrow functions

94. Arrow Functions
› JavaScript developers frequently use function
expressions
$("#button").click(function(){ /*...*/ });
forEach(function(item){ /*...*/ });

95. Arrow Functions
function addMovies(...movies){
movies.forEach(function(m){
alert(m);
});
}
addMovies("dr No", "Goldeneye");
function addMovies(...movies){
movies.forEach(m => alert(m));
}
addMovies("dr No", "Goldeneye");

96. I’m sorry but no time for

97. • Iterators
• Symbols
• Binary data
• Tail-call optomization
• Proxies
• Reflection methods
• …
Other cool stuff

99. Q&A