Short intro to ES6 Features
1 like685 views
- ES6 is the 6th edition of ECMAScript, which is fully compatible with ES5 strict mode. It introduces many new features such as let, const, arrow functions, classes, modules and more. - Key new features include let/const block scoping, destructuring, default parameters, rest parameters, spread syntax, template literals, arrow functions, shorthand object literals, iterators/for of loops, and modules. - These new features help improve JavaScript code quality, brevity and simplicity compared to ES5. For example, arrow functions provide a cleaner syntax than regular functions, and let/const avoid issues with var scope.
![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](https://image.slidesharecdn.com/jsfes-141228202927-conversion-gate01/85/Short-intro-to-ES6-Features-5-320.jpg)
![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](https://image.slidesharecdn.com/jsfes-141228202927-conversion-gate01/85/Short-intro-to-ES6-Features-8-320.jpg)
![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](https://image.slidesharecdn.com/jsfes-141228202927-conversion-gate01/85/Short-intro-to-ES6-Features-9-320.jpg)
![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)](https://image.slidesharecdn.com/jsfes-141228202927-conversion-gate01/85/Short-intro-to-ES6-Features-10-320.jpg)
![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]](https://image.slidesharecdn.com/jsfes-141228202927-conversion-gate01/85/Short-intro-to-ES6-Features-11-320.jpg)
![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'
}](https://image.slidesharecdn.com/jsfes-141228202927-conversion-gate01/85/Short-intro-to-ES6-Features-15-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (8)
Ad
Similar to Short intro to ES6 Features (20)
Ad
Recently uploaded (20)
Short intro to ES6 Features
- 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. 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