Quick Introduction to ES6

- brief introduction to ECMAScript version 6
- JS Meet up on Phandeeyar, Yangon

Transcript

1. SHORT INTRO TO ES6 FEATURES - abbreviation of ECMA version 6 - currently at proposal and beta - revolutionary changes - ES 6 is fully compatible with ES5 (strict mode)
2. HISTORY - In 1999, ECMAScript 3 - In 2005, ECMAScript 4 - In 2009, ECMAScript 5 - In 2011, ECMAScript 5.1
3. FEATURES - let - de-structuring - default parameter - rest parameter - spread - template - arrow function - shorthand object literal - for….of - Module
4. VAR LET var doWork = function(flag){ if (flag){ var x = 3; } return x; } var doWork = function(flag){ if (flag){ let x = 3; } return x; }
5. DE-STRUCTURING var x = 3,y = 2; var temp = x, x = y ,y = temp; // y = 3 // x = 2 let x = 3, y = 2; [x,y] = [y,x]; // x = 2, y = 3 [x,y,z] = [1,2]; // x = 1, y=2 [x,y,z] = [1,,3]; // x = 1, z=3
6. DEFAULT PARAMETER function defaultIsRed(color) { if(color==undefined) { return "red"; } else { return color; } } function defaultIsRed(color) { return (color==undefined) ? "red" : color;} function defaultIsRed(color=“red”) { return color;}
7. function add(x,y) {return x+y;} REST PARAMETER Case A add(1,2); // 3 Call A
8. REST PARAMETER Case B function add(arr) { var result =0; for (var i in arr) { result = arr[i]; } return result; } Call B var num = [1,2,3]; add(num); // 6
9. REST PARAMETER Case C function add() { var result =0; for (var i; i<=argument.length; i++) { result = argument[i]; } return result; } Call C add(1,2,3); //6
10. function add(…numbers) { var result =0; for (var i; i<=numbers.length; i++) { result = numbers[i]; } return result; } REST PARAMETER Case D add(1,2,3); //6 Call D (ES6)
11. SPREAD var a = [4,5,6]; var number = [1,2,3,…a,7,8,9]; console.log(number); // [1,2,3,4,5,6,7,8,9]
12. TEMPLATE ES5 ES6 var category = “music”; var id = 2124; var url = “http://api.server.me/“+category+”/“+id; let category = “music”; let id = 2124; let url =`http://api.server.me/${category}/${id}`;
13. ARROW FUNCTIONS Single Expression Multiple Expression function(x) { return x*x; } (x) => x*x; var add = function(x,y) { var temp = x+y; return temp;
 } let add = (x,y) => { var temp = x+y; return temp;
 }
14. SHORT HAND OBJECT LITERAL ES5 ES6 var cat = “Molly”, dog = "Rex"; var pets = { 'cat': cat, 'dog': dog,} var cat = "Molly"; var dog = "Rex"; var pets = {cat,dog}
15. FOR …. OF for….of for….in var num = ['lorem','ipsum','dollar','sit']; for (var i in num) { console.log(num[i]); // i = 0,1,2,3,4 } for (var i of num) { console.log(i); //'lorem','ipsum','dollar','sit' }
16. main.js lib.js MODULE export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5
17. - objects are reflection of classes - objects can’t be existed without classes - objects structures are defined by classes most languages In Javascript - objects can be instantiated by assigning functions - can set methods without declaring as skeleton - there are several ways to create an object.
18. Object var employee = function() {} employee.prototype = {} declaration Set employee.doWork = function() { return “Complete” } employee.prototype = { doWork: function() {return “Complete”} }
19. Classes and Method class Employee { doWork(){ return "Complete"; } } var e = new Employee(); console.log(e.doWork()); //Complete class Employee { constructor(){ console.log(“Complete”); } } var e = new Employee(); // Complete Constructor Setter and Getter class Employee { set name(n){ this._name = n; } get name(){ return this._name;} } var e = new Employee(); e.name = "Slack"; console.log(e.name); //Slack
20. About Me @kelvinm0rRis nainglinaung in/nainglinaung developer at Aceplus Solutions