Slide 1

Slide 1 text

ecmascript 6 today! www.sayan.ee Sunday, 12 May, 13

Slide 2

Slide 2 text

Sunday, 12 May, 13

Slide 3

Slide 3 text

1995 birth Sunday, 12 May, 13

Slide 4

Slide 4 text

1995 1999 birth standardised Sunday, 12 May, 13

Slide 5

Slide 5 text

1995 1999 2005 birth standardised es3 js1.5 Sunday, 12 May, 13

Slide 6

Slide 6 text

1995 1999 2005 2013 birth standardised es3 js1.5 es6 js2.0 harmony Sunday, 12 May, 13

Slide 7

Slide 7 text

es6 modules block scoping generators proxies binary data string templates destructuring rest args name objects hash table weak maps comprehension classes Sunday, 12 May, 13

Slide 8

Slide 8 text

es6 modules block scoping destructuring classes google traceur features use today! Sunday, 12 May, 13

Slide 9

Slide 9 text

block scoping - let now var jsFuture = "es6"; (function () { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); }()); es6 Sunday, 12 May, 13

Slide 10

Slide 10 text

block scoping - let now var jsFuture = "es6"; (function () { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); }()); // var jsFuture; // jsFuture = es5 es6 Sunday, 12 May, 13

Slide 11

Slide 11 text

var jsFuture = "es6"; (function () { if (!jsFuture) { let jsFuture = "es5"; } console.log(jsFuture); // jsFuture = es6 }()); block scoping - let now var jsFuture = "es6"; (function () { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); }()); // var jsFuture; // jsFuture = es5 es6 variables are block scoped Sunday, 12 May, 13

Slide 12

Slide 12 text

block scoping - const now var LATEST_IE = 11; LATEST_IE = 6; console.log( 'I now have IE' + LATEST_IE); Sunday, 12 May, 13

Slide 13

Slide 13 text

block scoping - const now var LATEST_IE = 11; LATEST_IE = 6; console.log( 'I now have IE' + LATEST_IE); es6 const LATEST_IE = 11; LATEST_IE = 6; console.log( 'I now have IE' + LATEST_IE); variables are read-only Sunday, 12 May, 13

Slide 14

Slide 14 text

classes now es6 var Language = function(config) { this.name = config.name; this.founder = config.founder; this.year = config.year; }; Language.prototype.summary = function() { return this.name + " was created by " + this.founder + " in " + this.year; }; // extending Language? Sunday, 12 May, 13

Slide 15

Slide 15 text

classes now es6 google traceur var Language = function(config) { this.name = config.name; this.founder = config.founder; this.year = config.year; }; Language.prototype.summary = function() { return this.name + " was created by " + this.founder + " in " + this.year; }; // extending Language? class Language { constructor(name, founder, year) { this.name = name; this.founder = founder; this.year = year; } summary() { return this.name + " was created by " + this.founder + " in " + this.year; } } class MetaLanguage extends Language { constructor(x, y, z, version) { super(x, y, z); this.version = version; } } extendable code Sunday, 12 May, 13

Slide 16

Slide 16 text

modules now es6 google traceur var circle = (function() { "use strict"; var pi = 3.141; function area(radius) { return "Area of Circle with radius " + radius + " is " + (pi * radius * radius); } function circumference(radius) { return "Circumference of Circle with radius " + radius + " is " + (2 * pi * radius); } return Object.preventExtensions(Object.create(null, { pi: { get: function() { return pi; }, enumerable: true }, area: { get: function() { return area; }, enumerable: true }, circumference: { get: function() { return circumference; }, enumerable: true } })); }).call(this); module circle { export var pi = 3.141; export function area(radius) { return "Area of Circle with radius " + radius + " is " + (pi * radius * radius); } export function circumference(radius) { return "Circumference of Circle with radius " + radius + " is " + (2 * pi * radius); } } console.log( circle.area(3) ); console.log( circle.circumference(2) ); classes can be instantiated as objects while modules cannot Sunday, 12 May, 13

Slide 17

Slide 17 text

// Variable Swapping var a = 'Brisbane', b = 'Singapore', temp; temp = b; b = a; a = temp; // Multiple-Variable returns function jsEngines() { return ['V8', 'SpiderMonkey', 'Trident']; } var chrome = jsEngines()[0], firefox = jsEngine()[1], ie = jsEngine()[2]; destructuring now Sunday, 12 May, 13

Slide 18

Slide 18 text

// Variable Swapping var a = 'Brisbane', b = 'Singapore', temp; temp = b; b = a; a = temp; // Multiple-Variable returns function jsEngines() { return ['V8', 'SpiderMonkey', 'Trident']; } var chrome = jsEngines()[0], firefox = jsEngine()[1], ie = jsEngine()[2]; destructuring now es6 google traceur // Variable Swapping var [a, b] = ['Brisbane', 'Singapore']; console.log('I bought plane ticket ' + a + '-' + b + ' for CampJS'); [a,b] = [b,a]; console.log('oops!! I meant, I bought plane ticket ' + a + '-' + b + ' for CampJS'); // Multiple-Variable returns function jsEngines() { return ['V8', 'SpiderMonkey', 'Trident']; } var [chrome, firefox, ie] = jsEngines(); Sunday, 12 May, 13

Slide 19

Slide 19 text

compatibility table firefox chrome Sunday, 12 May, 13

Slide 20

Slide 20 text

online repl Sunday, 12 May, 13

Slide 21

Slide 21 text

standards documentation Sunday, 12 May, 13

Slide 22

Slide 22 text

other resources Sunday, 12 May, 13

Slide 23

Slide 23 text

Sunday, 12 May, 13