The best of Javascript ECMAScript 6 or ES6


Posted on May 3rd, 2016


ECMAScript 6, also known as ECMAScript 2015 or ES6 in short, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. If you think EcmaScript is a terrible name, you’re not alone. I have heard a lot of people say, "What a fucked up name".

Lets look at the best of ES6:

Classes

Indeed this is a boon for developers who know the power of classes and wants a better syntax. The old syntax was dumb. It was just calling a function with the new keyword. This one is sexy.

class Bike {
    constructor(make) { //constructors!
        this.make = make;
        this.currentSpeed = 25;
    }

    printCurrentSpeed(){
        console.log(this.make + ' is going ' + this.currentSpeed + ' mph.');
    }
}

class DirtBike extends Bike { //inheritance
    constructor(make, topSpeed) {
        super(make); //call the parent constructor with super
        this.topSpeed = topSpeed;
    }

    goFast(){
          this.currentSpeed = this.topSpeed;
    }
}

let yamaha = new DirtBike('Yamaha', 150);

yamaha.printCurrentSpeed();
yamaha.goFast();
yamaha.printCurrentSpeed();

 

Template Strings

I love this. Its always been a pain to concatenate string with variable inside. No more. ES6 provides a better way of doing this:

var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);

//prints 
//Hello Bob, how are you today ?

Promises

Promises provide a mechanism to handle the results and errors from asynchronous operations.  You can accomplish the same thing with callbacks, but promises provide improved readability via method chaining and easy error handling. 

getJSON("/api/users/limit/5").then(function(profiles) {
  return getJSON(profiles.latest_posts);
}).then(function(posts) {  //you could chain multiple then statements
  // do something with the latest posts
}).catch(function(error) { //succinct error handling
  // handle errors in either of the two requests
});

You can also create promises with new Promise

// We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s)
var p1 = new Promise(
    // The resolver function is called with the ability to resolve or
    // reject the promise
    function(resolve, reject) {
        console.log('Promise started');
        // This is only an example to create asynchronism
        window.setTimeout(
            function() {
                // We fulfill the promise !
                resolve('Promise fullfilled');
            }, Math.random() * 2000 + 1000);
    }
);

// We define what to do when the promise is resolved/fulfilled with the then() call,
// and the catch() method defines what to do if the promise is rejected.
p1.then(
    // Log the fulfillment value
    function(val) {
        console.log(val);
    })

    .catch(
        // Log the rejection reason
        function(reason) {
            console.log('Handle rejected promise ('+reason+') here.');
        }
    );

Block Scoping using let

There might be situations where you might accidentally change the value of a global variable. Because the name was too common. For eg.

var count = 1000; //global

for(var count = 1; count <= 5; count++) {

   console.log(count); 
}
console.log(count); //oh snap, the global variable was overwritten

Welcome to let.

var count = 1000; //global

//check we are using let instead of var
for(let count = 1; count <= 5; count++) {

   console.log(count); 
}
console.log(count); //holyshit, it still gives me 1000.

 

Arrows

Arrows are a function shorthand using the => syntax. Lets look at an easy example. 

var nums = [1,2,3,4,5,6,7,8,9,10];
var fives = [];

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

console.log(fives); //5,10

Instead of writing function(){} inside forEach, we simply use => notation. It does the job. #codefast

Long story short. If you are one of those, who like do more but type less, you will love ES6. Few things are relative little difficult to adapt but once you start to appreciate the beauty of the syntax, its dope. 


Webpage rendering - For Frontend DevelopersTutorial - Restful API service in PHP

Comments
100% Complete