Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Quick Introduction to ES6

Quick Introduction to ES6

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

Avatar for Naing Lin Aung

Naing Lin Aung

January 19, 2015
Tweet

More Decks by Naing Lin Aung

Other Decks in Programming

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. 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
  8. 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
  9. 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)
  10. 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}`;
  11. 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;
 }
  12. 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}
  13. 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' }
  14. 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
  15. - 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.
  16. Object var employee = function() {} employee.prototype = {} declaration

    Set employee.doWork = function() { return “Complete” } employee.prototype = { doWork: function() {return “Complete”} }
  17. 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