- 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

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