© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA ...
var links = document.querySelectorAll(“a”);
for (var i = 0; i < links.length; i++)
{
links[i].onclick = function(){alert(i...
var links = document.querySelectorAll(“a”);
for (var i = 0; i < links.length; i++)
{
var clickFunc = function(j) {
links[j...
var links = document.querySelectorAll("a");
for (var i = 0; i < links.length; i++)
{
let j = i;
links[j].onclick = functio...
Syntactic Sugar
Promises
Modules & Classes
Platform support
Summary
Agenda
var firstName = ‘Ran’;
var lastName = ‘Wahle’;
//ES5
var person = {firstName: firstName, lastName: lastName};
//ES6
var pe...
var {firstName, lastName} = person;
//firstName === ‘Ran’
//lastName === ‘Wahle’
Syntactic Sugar : Object destructure
var phoneParts = /^(d{3})-(d{2})-(d{7})$/.exec("972-54-
3050897");
var countryCode = phoneParts[0];
var areaCode = phonePa...
var [,countryCode, areaCode, local] = /^(d{3})-(d{2})-
(d{7})$/.exec("972-54-3050897");
console.log("countryCode", country...
var family= { father: {firstName: 'Dan', lastName: 'Wahle'} ,
mother: {firstName: 'Nira', lastName: 'Wahle'},
children: [
...
var functionWithDefault = function(param1 = “val1”)
{
console.log(param1);
};
functionWithDefault();
//Ouputs : “val1”
Syn...
var functionWithParameterCollection = function(paramA, paramB,
...theRest)
{
console.log(theRest);
};
functionWithParamete...
var array = [1,2,3,4,5,6];
//es5
array.forEach(function(a) {console.log(a);});
//es6
array.forEach(a => console.log(a));
A...
var promise = new Promise(
function(resolve, reject)
{
var request = new XMLHttpRequest();
request.open('GET', ‘/', true);...
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 ...
class Vehicle {
constructor( name, year ) {
this.name = name;
this.year = year;
}
summary() {
return "This vehicle's name ...
class SemiTruck extends Vehicle {
constructor( x, y ) {
super( x, y );
this.wheels = 18;
}
}
Inherritence
Example from Dan...
Demo
Classes demo using Traceur
Modules
AMD implementation without libraries
No need to wrap an entire code in a function
Export
var innerResult = 0;
var ...
Demo
Very simple Calculator
Platform support
See http://kangax.github.io/compat-table/es6/ for updates
ECMAScript 6 has many features
Many of them are already implemented
in various libraries
Its standards are still in proces...
Questions
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Thank...
Upcoming SlideShare
Loading in …5
×

What's new in ECMAScript 6

639 views

Published on

Published in: Software, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
639
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

What's new in ECMAScript 6

  1. 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. 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. 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. 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. 5. Syntactic Sugar Promises Modules & Classes Platform support Summary Agenda
  6. 6. var firstName = ‘Ran’; var lastName = ‘Wahle’; //ES5 var person = {firstName: firstName, lastName: lastName}; //ES6 var person = {firstName, lastName}; Syntactic sugars: Shorthand objects
  7. 7. var {firstName, lastName} = person; //firstName === ‘Ran’ //lastName === ‘Wahle’ Syntactic Sugar : Object destructure
  8. 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. 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. 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. 11. var functionWithDefault = function(param1 = “val1”) { console.log(param1); }; functionWithDefault(); //Ouputs : “val1” Syntactic Sugar: Default parameters
  12. 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. 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. 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. 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. 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. 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. 18. Demo Classes demo using Traceur
  19. 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. 20. Demo Very simple Calculator
  21. 21. Platform support See http://kangax.github.io/compat-table/es6/ for updates
  22. 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. 23. Questions
  24. 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

×