Arrow functions in ES-6



Code for this and several other ES-6 features can be found in my github

ES-6 introduced a shorthand notation to declare functions. In addition to this being a shorthand and being concise, there are a few other advantages specific to scoping that we will see in the next section.
Let us for example, consider a simple map reduce in Javascript ES-5:

var arr = [1,2,3,4,5];
var result = arr.map(
    function(a) {
        return a+1
    }).reduce(
        function(a,b){    
            return a+b
});
While the same thing can be written in ES-6 in a concise manner as follows:

var arr = [1,2,3,4,5];
var result = arr.map((a)=>a+1).reduce((a,b)=>a+b);
console.log(result);
About the syntax:
ES-6 arrow functions can be declared as constants as follows:

const add = (a,b)=> a+b;
and this function can be passed around or used in a way any other function in JS would be.
It is important to note that, if the function body is a single line there is no need for curly braces around the body. Which is why there are not curly braces around 

a+b;
And by default the result of a+b will be returned implicitly.
However, if the function body has multiple lines of code, for example:

const kindOfAdd = (a,b)=> {
let x = a+1;
let y = b+1;
return x+y;
}
If you see in the function
 kindOfAdd
, the body has multiple lines. Hence it should be surrounded by curly braces and also the expected return value should be explicitly returned.

Comments

Post a Comment

Popular posts from this blog

Dockerfile

This post serves as a quick note on how to create a Dockerfile. It is not intended to be a comprehensive guide for the same. 1) FROM   = The image from dockerhub on which the   current image should be based on   2) MAINTAINER   = This is just a free text field where you put in your Name or email id, just so that people can identify the maintainer   3) EXPOSE = The port on which the container should be exposed. This can be overridden while doing a docker run command.   4)   ENTRYPOINT = The command to be executed when the container   strats   up.   For Example: npm start   5) COPY   = used to copy the source code into the docker machine.   For   exmple : COPY . /var/www   Where .(dot) represents that the whole of current directory needs to be copied.   6) WORKDIR   = The root directory from where the commands need to be run. For example, while running npm start, the di...
Read more

ES-6 classes

Code for this and several other ES-6 features can be found in my  github ES-6 has introduced a “class” keyword and “extends” keyword which are similar looking to classes in Java. In reality these are nothing but a syntactic sugar over prototypical inheritance in ES-5. In ES-5 classes were depicted as follows: var PersonEs5 = function(firstName, lastName){ this.firstName = firstName; this.lastName =lastName; } var p1 = new PersonEs5('first','last'); With ES-6 the same class can be written as follows: class Person{ constructor(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; } } Classes are nothing but functions under the cover. If the ES-6 code is compiled down to ES-5, the compiled version will be as follows: function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Pers...
Read more

ES-6 Generators

Code for this and several other ES-6 features can be found in my  github Introduction: Generators have been introduced in Java script as a part of the latest ES6 release. This feature offers significant advantages in asynchronous programming. The Legacy stuff: Functions in Java script (or in most languages) have been a bunch of instructions which start with a single motive- which is to execute the instructions and race to completion. Let us consider for example: var add = function (a, b){ if(a < 0) a = a*-1; if(b < 0) b = b *-1; return a+b; } The add function declared above is a simple function which takes two input parameters. Checks if any of them is negative. If it is negative it makes it positive. Adds the two numbers and returns their sum. Basically, once the add function starts execution, it just runs. Any change that happens around it can influence it in no way. If a developer wants the add function to behave differently, the developer has to ...
Read more