1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
June 29-July 3, 2014
Ran Wahle
What’s new in ECMAScript 6

2. var links = document.querySelectorAll(“a”);
for (var i = 0; i < links.length; i++)
{
links[i].onclick = function(){alert(i);};
}
Warmup- what’s wrong with this code

3. var links = document.querySelectorAll(“a”);
for (var i = 0; i < links.length; i++)
{
var clickFunc = function(j) {
links[j].onclick = function(){alert(j);};
}(i);
}
Warmup- fix the wrong code (v5)

4. var links = document.querySelectorAll("a");
for (var i = 0; i < links.length; i++)
{
let j = i;
links[j].onclick = function(){alert(j);};
}
Fix the code (v6)

5. Syntactic Sugar
Promises
Modules & Classes
Platform support
Summary
Agenda

6. var firstName = ‘Ran’;
var lastName = ‘Wahle’;
//ES5
var person = {firstName: firstName, lastName: lastName};
//ES6
var person = {firstName, lastName};
Syntactic sugars: Shorthand objects

7. var {firstName, lastName} = person;
//firstName === ‘Ran’
//lastName === ‘Wahle’
Syntactic Sugar : Object destructure

8. var phoneParts = /^(d{3})-(d{2})-(d{7})$/.exec("972-54-
3050897");
var countryCode = phoneParts[0];
var areaCode = phoneParts[1];
var local = phoneParts[2];
console.log("countryCode", countryCode);
console.log("areaCode", areaCode);
console.log("local", local);
Desctructure: extract from array

9. var [,countryCode, areaCode, local] = /^(d{3})-(d{2})-
(d{7})$/.exec("972-54-3050897");
console.log("countryCode", countryCode);
console.log("areaCode", areaCode);
console.log("local", local);
Destructure of Array

10. var family= { father: {firstName: 'Dan', lastName: 'Wahle'} ,
mother: {firstName: 'Nira', lastName: 'Wahle'},
children: [
{firstName: 'Ran', lastName: 'Wahle'},
{firstName: 'Ayala', lastName: 'Fridman'},
{firstName: 'Tamar',lastName: 'Wahle'},
{firstName: 'Yair', lastName: 'Wahle'},
{firstName: 'Giyora', lastName: 'Wahle'},
{firstName: 'Amnon', lastName: 'Wahle'}
] }
//Query the first name of the family’s oldest child
var {'children': [{'firstName': name}]} = family;
console.log(name)
Nested objects destructure

11. var functionWithDefault = function(param1 = “val1”)
{
console.log(param1);
};
functionWithDefault();
//Ouputs : “val1”
Syntactic Sugar: Default parameters

12. var functionWithParameterCollection = function(paramA, paramB,
...theRest)
{
console.log(theRest);
};
functionWithParameterCollection ('a','b','c','d','e');
//output ["c", "d", "e"]
Syntactic sugar: parameters collection

13. var array = [1,2,3,4,5,6];
//es5
array.forEach(function(a) {console.log(a);});
//es6
array.forEach(a => console.log(a));
Arrow functions (lambda expression)

14. var promise = new Promise(
function(resolve, reject)
{
var request = new XMLHttpRequest();
request.open('GET', ‘/', true);
request.onreadystatechange = () =>
{resolve(request.response);
};
request.send();
}
).then(result =>
{console.log("Result", result, "Promise", promise);},
error =>
{console.error("Promise error", error);});
Promises (no q.js library involved)

15. var numbers = [1,2,3,4,5,6];
var squares = [x*x for (x of numbers)];
//query the array
var evens = [number for (number of numbers)
if (number % 2 === 0)]
console.log(numbers, squares, evens);
//output
[1, 2, 3, 4, 5, 6] [1, 4, 9, 16, 25, 36] [2, 4, 6]
Build array from another array

16. class Vehicle {
constructor( name, year ) {
this.name = name;
this.year = year;
}
summary() {
return "This vehicle's name is " + this.name + " and it
was manufactured in " + this.year;
}
}
var myCar = new Vehicle(‘Susita’, 1975);
Classes
Example from Daniel Struk’s blog http://dstrunk.com/ecmascript-6-features-classes/

17. class SemiTruck extends Vehicle {
constructor( x, y ) {
super( x, y );
this.wheels = 18;
}
}
Inherritence
Example from Daniel Struk’s blog http://dstrunk.com/ecmascript-6-features-classes/

18. Demo
Classes demo using Traceur

19. Modules
AMD implementation without libraries
No need to wrap an entire code in a function
Export
var innerResult = 0;
var addition = function(number)
{
console.log(typeof number, typeof innerResult);
innerResult = innerResult + number;
if (isNaN(innerResult))
{
innerResult = 0;
}
return innerResult;
};
//Export
export {addition};
Import
import {addition} from 'calculator';
document.querySelector('#btnAdd').onclick = function()
{
var number =
parseInt(document.querySelector('#txtNumber').value);
document.querySelector('#spnResult').innerText =
addition(number);
}

20. Demo
Very simple Calculator

21. Platform support
See http://kangax.github.io/compat-table/es6/ for updates

22. ECMAScript 6 has many features
Many of them are already implemented
in various libraries
Its standards are still in process
Many platforms not yet supports it
Summary

23. Questions

24. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Thank You
http://blogs.Microsoft.co.il/ranw
Twitter: @ranwahle
ranw@sela.co.il