Peeking into ES2016

Default Parameters

We had to use these kinds of statements to declare default values.

var link = function (height, color, url) { 
    var height = height || 50 
    var color = color || ‘red’
    var url = url || ‘http://azat.co'
… }

But now with ES2016, we can declare default values on the arguments of the function

var link = function(height = 50, color = 'red', url = 'http://azat.co') {   
    ... 
}

Template Literals

Template literals or interpolation in other languages is a way to output variables in the string. Before ES2016 we had something like this

var name = 'Your name is ' + first + ' ' + last + '.' 
var url = 'http://localhost:3000/api/messages/' + id

Lucky us, in ES6 we can use a new syntax ${NAME} inside of the back-ticked string:

var name = `Your name is ${first} ${last}.` 
var url = `http://localhost:3000/api/messages/${id}`

Multi-line Strings

This new feature is a lifesaver for people who have a lot to say (ahem! like me!). Making the code super clean

var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'     
    + 'Because it was grassy and wanted wear,\n\t'     
    + 'Though as for that the passing there\n\t'     
    + 'Had worn them really about the same,\n\t'  
var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'

See that code above me. Looks messy right, Well ES2016 solves that using backticks:

var roadPoem = `Then took the other, as just as fair,     
    And having perhaps the better claim     
    Because it was grassy and wanted wear,     
    Though as for that the passing there     
    Had worn them really about the same,`  
var fourAgreements = `You have the right to be you.     
    You can only be you when you do your best.`

Destructuring Assignment

Consider that data has properties house and mouse, with ES2015 we had to separately get the values of house and mouse.

var data = $('body').data(), // data has properties house and mouse   house = data.house,   
mouse = data.mouse

In ES2016, We can directly assign the values in this way.

var {house, mouse} = $('body').data() 
// we'll get house and mouse variables

Arrow Functions

This is more of an aesthetic feature for the language plus it does make it look cool. Previously we had this normal callback function.

$('.btn').click(function(event){ 
    alert('Some Event') 
})

Now with ES2016, We have this new fancy way of doing the same!

$('.btn').click((event) =>{   
    alert('Some Event')
})

Ever heard of Callback Hell? (Manda Bathiram)

If you have heard of what I'm talking about, You probably do know promises or if you've stuck using callback then it means you've not explored the world of asynchronous javascript coding.

Just check out this setTimeout code

setTimeout(function(){   
    console.log('Yay!') 
}, 1000)

We can rewrite this code using ES2016 JavaScript using Promises as:

var wait1000 =  new Promise(function(resolve, reject) {       setTimeout(resolve, 1000) }).then(function() {
    console.log('Yay!') 
})

So far we have only increased the number of lines, that's not what we want . The real use comes with nested execution

setTimeout(function(){   
    console.log('Yay!')   
        setTimeout(function(){     
            console.log('Wheeyee!')   
        }, 1000) 
}, 1000)

With promises, we can re-write it as:

var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)})  
wait1000().then(function() {
    console.log('Yay!')     
    return wait1000()   
}).then(function() {
    console.log('Wheeyee!')   
})