ECMA Script 6

882
-1

Published on

New features in ECMAScript 6

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
882
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

ECMA Script 6

  1. 1. ECMA Script 6 What'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
  2. 2. Introduction What's ECMA Script? Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 2 / 36
  3. 3. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 3 / 36
  4. 4. Introduction The TC39 group within ECMA is responsible for formalizing the language speci
  5. 5. cation. Every browser vendor, as well as other interested parties, has one or more representative members in this committee. Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 4 / 36
  6. 6. Table of Contents 1 Introduction 2 Variables and scoping 3 Parameter handling 4 Arrow Function 5 Object-orientation and modularity 6 Standard Library 7 Loops and iteration Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 5 / 36
  7. 7. 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 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 6 / 36
  8. 8. 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) 1 function order(x, y) { 2 if (x > y) { 3 let tmp = x; 4 x = y; 5 y = tmp; 6 } 7 console.log(tmp===y); 8 // tmp is not defined 9 return [x, y]; 10 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 6 / 36
  9. 9. 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); Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 7 / 36
  10. 10. Array Destructuring 1 var [ start, end ] = ["earth", "moon"] // initialize 2 console.log(start + " calling " + end); // earth calling moon Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 8 / 36
  11. 11. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 8 / 36
  12. 12. 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] = /^(dddd)-(dd)-(dd)$/.exec("2999-12-31"); 2 //all = "2999-12-31" year="2999" month = "12" day = "31" Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 8 / 36
  13. 13. Multiple return values 1 function f() { 2 return [1, 2] 3 } 4 var [a, b] = f(); Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 9 / 36
  14. 14. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 9 / 36
  15. 15. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 10 / 36
  16. 16. Table of Contents 1 Introduction 2 Variables and scoping 3 Parameter handling 4 Arrow Function 5 Object-orientation and modularity 6 Standard Library 7 Loops and iteration Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 11 / 36
  17. 17. Parameter Default Values ECMA Script 5 1 function func(x, y) { 2 y = typeof y !== 'undefined' ? y : 3; 3 return [x,y] 4 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 12 / 36
  18. 18. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 12 / 36
  19. 19. Rest parameter 1 add(arg1, arg2, ...); Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 13 / 36
  20. 20. 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 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 13 / 36
  21. 21. 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) { 2 items.forEach(function (item) { 3 console.log(item); 4 }); 5 } try online Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 13 / 36
  22. 22. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 14 / 36
  23. 23. 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'] Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 14 / 36
  24. 24. Spread Operator (...) Turn an array into function/method arguments: ECMA Script 5 1 var arr1 = [0, 1, 2]; 2 var arr2 = [3, 4, 5]; 3 Array.prototype.push.apply( arr1 , arr2); Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 15 / 36
  25. 25. Spread Operator (...) Turn an array into function/method arguments: 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 15 / 36
  26. 26. Table of Contents 1 Introduction 2 Variables and scoping 3 Parameter handling 4 Arrow Function 5 Object-orientation and modularity 6 Standard Library 7 Loops and iteration Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 16 / 36
  27. 27. Arrow functions 1 let squares = [1, 2, 3].map(function (x) {return x * x}); 2 //[1,4,9] Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 17 / 36
  28. 28. 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); Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 17 / 36
  29. 29. 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; ... } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 17 / 36
  30. 30. 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; ... } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 17 / 36
  31. 31. 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 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 18 / 36
  32. 32. 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 1 function UiComponent { 2 var button = document.getElementById('#myButton'); 3 button.addEventListener('click', () => { 4 console.log('CLICK'); 5 this.handleClick(); 6 }); 7 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 18 / 36
  33. 33. Table of Contents 1 Introduction 2 Variables and scoping 3 Parameter handling 4 Arrow Function 5 Object-orientation and modularity 6 Standard Library 7 Loops and iteration Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 19 / 36
  34. 34. 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; Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 20 / 36
  35. 35. 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)); Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 20 / 36
  36. 36. 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 }; Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 21 / 36
  37. 37. 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() { 8 return this.name + " was created by " + this.founder + " in " + this.year; 9 } 10 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 21 / 36
  38. 38. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 22 / 36
  39. 39. Classes: subclass 1 class MetaLanguage extends Language { 2 constructor(x, y, z, version) { 3 super(x, y, z); 4 this.version = version; 5 } 6 } Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 23 / 36
  40. 40. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 23 / 36
  41. 41. Table of Contents 1 Introduction 2 Variables and scoping 3 Parameter handling 4 Arrow Function 5 Object-orientation and modularity 6 Standard Library 7 Loops and iteration Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 24 / 36
  42. 42. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 25 / 36
  43. 43. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 26 / 36
  44. 44. Standard library: Sets 1 var items = new Set(); 2 items.add(5); 3 items.add("5"); 4 console.log(items.size); // 2 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 27 / 36
  45. 45. 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] Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 27 / 36
  46. 46. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 28 / 36
  47. 47. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 29 / 36
  48. 48. Table of Contents 1 Introduction 2 Variables and scoping 3 Parameter handling 4 Arrow Function 5 Object-orientation and modularity 6 Standard Library 7 Loops and iteration Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 30 / 36
  49. 49. 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 Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 31 / 36
  50. 50. Array Comprehensions 1 let numbers = [1,2,3]; 2 let squares = [x * x for (x of numbers) ]; Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 32 / 36
  51. 51. Compatibility ECMA Script 6 support Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 33 / 36
  52. 52. When November 2013:
  53. 53. nal review of draft July 2014: editorially complete December 2014: Ecma approval Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 34 / 36
  54. 54. 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/ Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 35 / 36
  55. 55. Thanks Tarek Salah - JavaScript Team (BadrIT) ECMA Script 6 March 11, 2014 36 / 36
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×