6 Exciting Features of ES6

Seema Ullal

 seemaisms

"CLASSES"

ES5

function Rectangle(l,w) {
    Shape.call(this); 
    this.length = l;
    this.width = w;
}

Rectangle.prototype.area = function() {
    return this.length * this.width;
}

//instantiating the class
var myRectangle = new Rectangle(3,4);
myRectangle.area() //returns 12

CLASSES

ES6

class Rectangle extends Shape { // inheritance!
    constructor(l,w) { 
        super(); //calls the Shape constructor
        this.length = l;
        this.width = w;
    }

    this.area(){
          return this.length * this.width;
    }
}

Arrows

ES5

var nums = [1,2,3,4];
nums.map(function(number) {
    return number * 2;
});

ES6

var nums = [1,2,3,4];
nums.map(number => number *2);

LEXICAL THIS

function Timer() {
    this.time  = 0;
    var self = this;
    setInterval(function() {
        console.log(self.time++);
    }, 1000)
}

No more of this weirdness

ES6 for the win

function Timer() {
    this.time  = 0;
    setInterval(() => {
        //maintains the outer scope
        console.log(this.time++);
    }, 1000)
}

BLOCK SCOPING

//the scope of i is limited to inside the loop
for (let i = 0; i < 10; i++) { 
  num += i;
  console.log('value of i in block: ' + i);
}

console.log(i) //will be undefined

Template strings

var name = "Seema";

//prints "My name is Seema"
console.log(`My name is ${name}`);

//prints "SEEMA"
console.log(`${name.toUpperCase()}`

var str = `You
definitely
can\'t do
this
in ES5`

BUIlt-in Promises

function timeout(duration = 0) { //default value of 0
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

...and much more!

• Generators
• Iterators
• Modules
• Maps and Sets

...

learn more

Babel

ES6 and Mozilla

ES6 Interactive Guide

Seema Ullal

seemaullal@gmail.com

seemaisms