Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Short intro to ES6 Features

586 views

Published on

Presentation for JS Fes at Phandeeyar. Some portion of Code
credit to plura sight, and other slides and internet itself.


https://www.facebook.com/events/747170712042236/

Published in: Technology
  • Be the first to comment

Short intro to ES6 Features

  1. 1. SHORT INTROTO ES6 FEATURES - abbreviation of ECMA version 6 - currently at proposal and beta - revolutionary changes - ES 6 is fully compatible with ES5 (strict mode)
  2. 2. HISTORY - In 1999, ECMAScript 3 - In 2005, ECMAScript 4 - In 2009, ECMAScript 5 - In 2011, ECMAScript 5.1
  3. 3. FEATURES - let - de-structuring - default parameter - rest parameter - spread - template - arrow function - shorthand object literal - for….of - Module
  4. 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. 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. 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. 7. function add(x,y) {return x+y;} REST PARAMETER Case A add(1,2); // 3 Call A
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. Object var employee = function() {} employee.prototype = {} declaration Set employee.doWork = function() { return “Complete” } employee.prototype = { doWork: function() {return “Complete”} }
  19. 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. 20. About Me @kelvinm0rRis nainglinaung in/nainglinaung developer at Aceplus Solutions

×