4. JavaScript, JS, ECMAScript, ES
● ECMAScript 3 ( 1999 )
● ECMAScript 4 ( incompatible with third version
2005 )
● ECMAScript 5 ( 2009 )
● ECMAScript 5.1 ( 2011 )
● TC39 - Committee for Standardization
5. Funny Facts
● ES 5.1 standard == 243 pages
● JavaScript: The Definitive Guide by David
Flanagan (6th edition)== 1078 pages
● Draft of standard ES 6.0 == 421 pages
● JavaScript: The Definitive Guide by David
Flanagan (7th edition)== ? pages ;)
7. ES.Next vs ES.Harmony
ES.Next === ECMAScript 6
ES 6 is fully compatible with ES5 (strict mode)
ES.Harmony in next versions of ECMAScript
8. Block Scope
Two new significant keywords:
let lock scoped variable
const read-only variable. (couldn't be hided by other variable etc.)
Typical problem in ES 5
var result = [];
for (var length = 10; length--;){
var len = length;
result[len] = function(){ return len; }
}
result[5]() // 0
result[2]() // 0
WHY?
9. Block Scope
Solution ES 5
var result = [];
for (var length = 10; length--;){
var len = length;
result[len] = (function(dlugosc){
return function(){
return dlugosc;
}
})(len)
}
result[5]() // 5
result[2]() // 2
use closure
10. Block Scope
Solution ES 6 (Cleaner, nicer, AWESOME!)
var result = [];
for (var length = 10; length--;){
let len = length;
result[len] = function(){ return len;}
}
result[5]() // 5
result[2]() // 2
11. Shorthand Object Literals
ES 5 version: ES 6 version:
var cat = "Molly"; var cat = "Molly";
var dog = "Rex"; var dog = "Rex";
var pets = { var pets = {cat,dog}
'cat': cat,
'dog': dog,
}
12. Shorthand Object Literals
function Animal(name){
this.name = name;
this.age = 0;
}
Animal.prototype = {
roar(text){
//old version was function roar(text)
return `Animal ${this.name}
roars:${text}` // template syntax
}
}
13. Destructing Assignments
(extraction from objects, swap variables)
var {parse, stringify} = JSON;
var [, areaCode, local] = /^(d{3})-(d{3}-d
{4})$/.exec("048-032-7777");
[left, right] = [right, left];
15. Destructuring Nested Objects
ES 5 VERSION ( really hard to remember )
var author = poets[0]['name'];
var title = poets[0]['works'][1]['title'];
var date = poets[0]['works'][1]['date'];
16. Destructuring Nested Objects
ES 6 version (AWESOME !)
var [{'name': author, 'works': [, {title,
date}]}] = poets;
// Select first author and his second book
and store it in variables author, title, date
`"${title}", by ${author}, was published in
${date}.`
// Template creating string from this
variables.
Rhapsody, by T.S. Eliot, was published in 1917
17. Default parameters
// ES 5
function Person(name, age){
this.name = name || "Anonim";
this.age = age || 0;
}
// ES 6
function Person(name="Anonim", age=0)
{
this.name = name;
this.age = 0;
}
19. ...spread
//ES 5 merging array
js> var a = [1, 2]
[3, 4, 5]
js> var b = [3, 4, 5]
[1, 2]
js> a = a.concat(b)
[1, 2, 3, 4, 5]
//ES 6 merging array (AWESOME!)
js> var a = [3, 4, 5]
[3, 4, 5]
js> var b = [1, 2, ...a]
[1, 2, 3, 4, 5]
20. Array Comprehensions
var arr =
[ x for (x of a) if (x.color === ‘blue’) ]
var arr = [ square(x) for (x of [1,2,3,4,5]) ]
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-thin
to-javascript/
21. Modules
module Car {
// import …
// export …
}
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
things-coming-to-javascript/
22. Modules
module Car {
// Internal
var licensePlateNo = '556-343';
// External
export function drive(speed, direction) {
console.log('details:', speed, direction);
}
export module engine{
export function check() { }
}
};
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
things-coming-to-javascript/
23. Imports
(Yes! YES! No requirejs or AMD needed)
import "crypto" as crypto;
import { encrypt, decrypt } from "crypto";
import { encrypt: enc } from "crypto";
import {drive, engine} from Car;
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
things-coming-to-javascript/
