ECMA Script 6

ECMA Script 6What’s next in JavaScript

Tarek Salah - JavaScript Team

BadrIT

March 11, 2014

Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 1 / 36

Introduction

What’s ECMA Script?


Overview

1 Introduction

2 Variables and scoping

3 Parameter handling

4 Arrow Function

5 Object-orientation and modularity

6 Standard Library

7 Loops and iteration


Introduction

The TC39 group within ECMA is responsible for formalizing thelanguage specification.

Every browser vendor, as well as other interested parties, has one ormore representative members in this committee.


Table of Contents

1 Introduction



4 Arrow Function


6 Standard Library



Variables and Scoping

Function Scope (var)

1 function order(x, y) {

2 if (x > y) {

3 var tmp = x;

4 x = y;

5 y = tmp;

6 }

7 console.log(tmp===y);

8 return [x, y];

9 }

Block Scope (let)


2 if (x > y) {

3 let tmp = x;

4 x = y;

5 y = tmp;

6 }


8 // tmp is not defined

9 return [x, y];

10 }


Variables and Scoping

Function Scope (var)


2 if (x > y) {

3 var tmp = x;

4 x = y;

5 y = tmp;

6 }


8 return [x, y];

9 }

Block Scope (let)


2 if (x > y) {

3 let tmp = x;

4 x = y;

5 y = tmp;

6 }


8 // tmp is not defined

9 return [x, y];

10 }


Block Scoping with const

1 const PI = 3.14

2 console.log(PI);

3

4 PI = 3 // re-assign

5 console.log(PI);

6

7 const PI = 4 //re-initialize

8 console.log(PI);

9

10 var PI = 5 //re-declare

11 console.log(PI);


Array Destructuring

1 var [ start, end ] = ["earth", "moon"] // initialize

2 console.log(start + " calling " + end); // earth calling moon

1 [start, end] = [end, start] // variable swapping

2 console.log(start + " calling " + end); // moon calling earth

1 [all, year, month, day] =

/^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2999-12-31");

2 //all = "2999-12-31" year="2999" month = "12" day = "31"


Array Destructuring






/^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2999-12-31");



Array Destructuring






/^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2999-12-31");



Multiple return values

1 function f() {

2 return [1, 2]

3 }

4 var [a, b] = f();

1 //some values are not interesting

2 function f() {

3 return [1, 2, 3]

4 }

5 var [a, , b] = f();

try online


http://jsbin.com/OrorIMA/3/edit

Multiple return values

1 function f() {

2 return [1, 2]

3 }

4 var [a, b] = f();

1 //some values are not interesting

2 function f() {

3 return [1, 2, 3]

4 }

5 var [a, , b] = f();

try online


http://jsbin.com/OrorIMA/3/edit

Object Destructuring

Extract data (more than one value!) via patterns:

1 let obj = { first: "Tarek", last: "Salah" };

2 let { first: f, last: l } = obj;

3 console.log(f + " " + l); // Tarek Salah

try online


http://jsbin.com/EgiRIyOF/1/edit

Table of Contents

1 Introduction



4 Arrow Function


6 Standard Library



Parameter Default Values

ECMA Script 5

1 function func(x, y) {

2 y = typeof y !== ’undefined’ ?

y : 3;

3 return [x,y]

4 }

ECMA Script 6

1 function func(x, y=3) {

2

3 return [x,y];

4 }

# func(1, 2)

[1, 2]

# func(1)

[1, 3]

# func()

[undefined, 3]

try online


http://jsbin.com/EfiJOhi/1/edit

Parameter Default Values

ECMA Script 5

1 function func(x, y) {

2 y = typeof y !== ’undefined’ ?

y : 3;

3 return [x,y]

4 }

ECMA Script 6

1 function func(x, y=3) {

2

3 return [x,y];

4 }

# func(1, 2)

[1, 2]

# func(1)

[1, 3]

# func()

[undefined, 3]

try online


http://jsbin.com/EfiJOhi/1/edit

Rest parameter

1 add(arg1, arg2, ...);

ECMA Script 5

1 function add(category) {

2 var items = [].slice.call(arguments);

3 items.forEach(function (item) {

4 console.log(item);

5 });

6 }

ECMA Script 6

1 function add(category, ...items) {



4 });

5 }

try online


http://jsbin.com/AXiWaLE/2/edit

Rest parameter

1 add(arg1, arg2, ...);

ECMA Script 5





5 });

6 }

ECMA Script 6




4 });

5 }

try online



Rest parameter

1 add(arg1, arg2, ...);

ECMA Script 5





5 });

6 }

ECMA Script 6




4 });

5 }

try online



Spread Operator (...)

Turn an array into function/method arguments:

1 # Math.max(7, 4, 11)

2 11

3 # Math.max(...[7, 4, 11])

4 11

1 var ar1 = [’B’, ’C’];

2 var ar2 = [’A’, ...ar1, ’D’, ’E’];

3 // [’A’, ’B’, ’C’, ’D’, ’E’]




1 # Math.max(7, 4, 11)

2 11

3 # Math.max(...[7, 4, 11])

4 11

1 var ar1 = [’B’, ’C’];

2 var ar2 = [’A’, ...ar1, ’D’, ’E’];

3 // [’A’, ’B’, ’C’, ’D’, ’E’]




ECMA Script 5

1 var arr1 = [0, 1, 2];

2 var arr2 = [3, 4, 5];

3 Array.prototype.push.apply( arr1 , arr2);

ECMA Script 6

1 var arr1 = [0, 1, 2];

2 var arr2 = [3, 4, 5];

3 arr1.push(...arr2);

try online


http://jsbin.com/UTAWEVu/1/edit



ECMA Script 5

1 var arr1 = [0, 1, 2];

2 var arr2 = [3, 4, 5];

3 Array.prototype.push.apply( arr1 , arr2);

ECMA Script 6

1 var arr1 = [0, 1, 2];

2 var arr2 = [3, 4, 5];

3 arr1.push(...arr2);

try online


http://jsbin.com/UTAWEVu/1/edit

Table of Contents

1 Introduction



4 Arrow Function


6 Standard Library



Arrow functions

1 let squares = [1, 2, 3].map(function (x) {return x * x});

2 //[1,4,9]

1 let squares = [1, 2, 3].map(x => x * x);

General Form:

1 (arg1, arg2, ...) => expr

2 (arg1, arg2, ...) => { stmt1; stmt2; ... }

Shorter version - single parameter:

1 arg => expr

2 arg => { stmt1; stmt2; ... }


Arrow functions


2 //[1,4,9]


General Form:

1 (arg1, arg2, ...) => expr

2 (arg1, arg2, ...) => { stmt1; stmt2; ... }


1 arg => expr

2 arg => { stmt1; stmt2; ... }


Arrow functions


2 //[1,4,9]


General Form:

1 (arg1, arg2, ...) => expr

2 (arg1, arg2, ...) => { stmt1; stmt2; ... }


1 arg => expr

2 arg => { stmt1; stmt2; ... }


Arrow functions


2 //[1,4,9]


General Form:

1 (arg1, arg2, ...) => expr

2 (arg1, arg2, ...) => { stmt1; stmt2; ... }


1 arg => expr

2 arg => { stmt1; stmt2; ... }


Arrow functions: No more that

ECMA Script 5

1 function UiComponent {

2 var that = this;

3 var button = document.getElementById(’#myButton’);

4 button.addEventListener(’click’, function () {

5 console.log(’CLICK’);

6 that.handleClick();

7 });

8 }

ECMA Script 6



3 button.addEventListener(’click’, () => {


5 this.handleClick();

6 });

7 }


Arrow functions: No more that

ECMA Script 5


2 var that = this;


4 button.addEventListener(’click’, function () {


6 that.handleClick();

7 });

8 }

ECMA Script 6



3 button.addEventListener(’click’, () => {


5 this.handleClick();

6 });

7 }


Table of Contents

1 Introduction



4 Arrow Function


6 Standard Library



Modules

1 // lib/math.js

2 let notExported = ’abc’;

3 export function square(x) {

4 return x * x;

5 }

6 export let my_var = 123;

1 // main.js

2 import {square} from ’lib/math’;

3 console.log(square(3));

Alternatively:

1 // main.js

2 import ’lib/math’ as math;

3 console.log(math.square(3));


Modules

1 // lib/math.js

2 let notExported = ’abc’;

3 export function square(x) {

4 return x * x;

5 }

6 export let my_var = 123;

1 // main.js

2 import {square} from ’lib/math’;

3 console.log(square(3));

Alternatively:

1 // main.js

2 import ’lib/math’ as math;

3 console.log(math.square(3));


Classes

ECMA Script 5

1 var Language = function(config) {

2 this.name = config.name;

3 this.founder = config.founder;

4 this.year = config.year;

5 };

6 Language.prototype.summary = function() {

7 return this.name + " was created by " + this.founder + " in " + this.year;

8 };

ECMA Script 6

1 class Language {

2 constructor(name, founder, year) {

3 this.name = name;

4 this.founder = founder;

5 this.year = year;

6 }

7 summary() {


9 }

10 }


Classes

ECMA Script 5

1 var Language = function(config) {

2 this.name = config.name;

3 this.founder = config.founder;

4 this.year = config.year;

5 };

6 Language.prototype.summary = function() {


8 };

ECMA Script 6

1 class Language {

2 constructor(name, founder, year) {

3 this.name = name;

4 this.founder = founder;

5 this.year = year;

6 }

7 summary() {


9 }

10 }


Classes

ECMA Script 6

1 var js = new Language ("JavaScript","Brendan Eich",1995);

2 console.log(js.summary());

3 // "JavaScript was created by Brendan Eich in 1995"

try online


http://jsbin.com/aDIluXu/8/edit

Classes: subclass

1 class MetaLanguage extends Language {

2 constructor(x, y, z, version) {

3 super(x, y, z);

4 this.version = version;

5 }

6 }

1 var html = new MetaLanguage ("HTML","Tim Berners-Lee",

1991, 1);

2 console.log(html.summary());

3 // "HTML was created by Tim Berners-Lee in 1991"

4 console.log(html.version);

5 // 1

try online



Classes: subclass

1 class MetaLanguage extends Language {

2 constructor(x, y, z, version) {

3 super(x, y, z);

4 this.version = version;

5 }

6 }

1 var html = new MetaLanguage ("HTML","Tim Berners-Lee",

1991, 1);

2 console.log(html.summary());

3 // "HTML was created by Tim Berners-Lee in 1991"

4 console.log(html.version);

5 // 1

try online



Table of Contents

1 Introduction



4 Arrow Function


6 Standard Library



Standard library: Maps

1 var es6 = new Map(); // create new Map

2

3 es6.set("edition", 6); // key is string

4 es6.set(262, "standard"); // key is number

5 es6.set(undefined, "nah"); // key is undefined

6

7 var hello = function() {console.log("hello");};

8 es6.set(hello, "Hello ES6!"); // key is function

9

10 console.log(es6.has("edition")); // true

11 console.log(es6.has("years")); // false

12 console.log(es6.has(262)); // true

13 console.log(es6.has(undefined)); // true

14 console.log(es6.has(hello)); // true

15

16 es6.delete(undefined); // delete map

17 console.log(es6.has(undefined)); // false

18

19 console.log(es6.get(hello)); // Hello ES6!

try online


http://jsbin.com/AceNAYu/1/edit

Standard library:Weak Maps

1 var wm1 = new WeakMap(),

2 wm2 = new WeakMap(),

3 wm3 = new WeakMap();

4 var o1 = {},

5 o2 = function(){},

6 o3 = window;

7

8 wm1.set(o1, 37);

9 wm1.set(o2, "azerty");

10 wm2.set(o1, o2); // a value can be anything, including an object or a function

11 wm2.set(o3, undefined);

12 wm2.set(wm1, wm2); // keys and values can be any objects. Even WeakMaps!

13

14 wm1.get(o2); // "azerty"

15 wm2.get(o2); // undefined, because there is no value for o2 on wm2

16 wm2.get(o3); // undefined, because that is the set value

try online


http://jsbin.com/eDecoGux/1/edit

Standard library: Sets

1 var items = new Set();

2 items.add(5);

3 items.add("5");

4 console.log(items.size); // 2

Insertion from Array:

1 var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);

2 [...items]; // [1,2,3,4,5]


Standard library: Sets

1 var items = new Set();

2 items.add(5);

3 items.add("5");

4 console.log(items.size); // 2

Insertion from Array:

1 var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);

2 [...items]; // [1,2,3,4,5]


Standard library: String

New string methods:

1 # "abc".repeat(3)

2 "abcabcabc"

3 # "abc".startsWith("ab")

4 true

5 # "abc".endsWith("bc")

6 true

7 # "foobar".contains("oo")

8 true

try online


http://jsbin.com/esaXepe/1/edit

Standard library: Arrays

New Array methods:

1 # [13, 7, 8].find(x => x % 2 === 0)

2 8

3 # [1, 3, 5].find(x => x % 2 === 0)

4 undefined

5 # [13, 7, 8].findIndex(x => x % 2 === 0)

6 2

7 # [1, 3, 5].findIndex(x => x % 2 === 0)

8 -1

try online


http://jsbin.com/EWAromu/1/edit

Table of Contents

1 Introduction



4 Arrow Function


6 Standard Library



for-of loop: arrays

1 let arr = [ 3, 5, 7 ];

2

3 // for-in loops iterate over the names of properties.

4 for (let i in arr) {

5 console.log(i); // "0", "1", "2"

6 console.log(arr[i]); // "3", "5", "7"

7 }

8

9 // for-of loops iterate over the values of properties.

10 for (let i of arr) {

11 console.log(i); // "3", "5", "7"

12 }

try online


http://jsbin.com/uqEnAWU/1/edit

Array Comprehensions

1 let numbers = [1,2,3];

2 let squares = [x * x for (x of numbers) ];


Compatibility

ECMA Script 6 support


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

When

November 2013: final review of draft

July 2014: editorially complete

December 2014: Ecma approval


References

https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript

https://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/

http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/

http://net.tutsplus.com/articles/news/ecmascript-6-today/


https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript

https://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/



http://net.tutsplus.com/articles/news/ecmascript-6-today/

Thanks


Documents

ECMA Script 6