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.
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
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
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
59. Default Function Parameters
› Have optional function parameters by setting
default values
› The parameters are defined when the functions
are defined
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');
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);
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');
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
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;
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
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);
}
