EcmaScript 6 Demos

Plunker

EcmaScript 6 Demos

Improving Control Flow

Promises

• A promise is a placeholder for a value that may only be available in the future

readFile("hello.txt",function(err,content){
    if(err){
        //handle error	
    }else{
	//use content
    }
}

ES5

ES6

readFile("hello.txt")
    .then(function(content){
        //use content
    },function(err){
        //handle error
    });

Promises

• Promises can be chained to avoid callback hell

step1(function(value1){
    step2(value1,function(value2){
        step3(value2,function(value3){
            //do something
        });	
    });
});

ES5

ES6

Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(function (value3) {
    // Do something 
})
.catch(function (error) {
    // Handle any error from all above steps
})
.done();

Promises

• Promises already exist as a library in ES5
• Then why standardize?
  • Wide disagreement on a single Promise API. ES6 settled on an API called “Promises/A+”. See promisesaplus.com
  • Standard API allows platform APIs to use Promises as well
  • W3C’s latest DOM APIs already use promises

async/await (ES7)

• async/await is a C# 5.0 feature that enables asynchronous programming using “direct style” control flow (i.e. no callbacks)

(async function(){
    try{
        var value1=await step1();
        var value2=await step2(value1);
        var value3=await step3(value2);
        //do something
    }catch(error){
        //handle any error here
    }
}())

ES6

Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(function (value3) {
    // Do something 
})
.catch(function (error) {
    // Handle any error from all above steps
})
.done();

ES7

async/await (ES6)

• Generators can be used as async functions

(async function(){
    try{
        var value1=await step1();
        var value2=await step2(value1);
        var value3=await step3(value2);
        //do something
    }catch(error){
        //handle any error here
    }
}())

ES7

Q.async(function*(){
    try{
        var value1=yield step1();
        var value2=yield step2(value1);
        var value3=yield step3(value2);
        //do something
    }catch(error){
        // handle any error here
    }
})()

ES6