- 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.
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
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'
}
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.
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