ECMAScript 6 Fat Arrow Function – a discussion

ECMAScript 6 Fat Arrow Functions –

As we have understood from Mozilla Documentation, An fat arrow function is having shorter syntax compared to traditional function expressions and binds the return value inline. These Arrow functions are always anonymous.

According to MDN, The function definition will look like –
[javascript]
([param] [, param]) => {
statements
}
param => expression
[/javascript]

Below is a quick example of Fat Arrow function as per ECMAScript 6 specification.

A short example

[javascript]
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryl­lium"
];

var a3 = ((s) => s.length);
console.log(a3(a));
[/javascript]

So, this function will output 4 in console. Here before => the function is not having any name and it gets the return value inline.

Below are some examples of current ECMAScript 5 functions.

How we write it in ECMA5 currently?

[javascript]
//1. Simple function
var str = "Please find where there is a find";
var searchStr = "find";
var pos = function(totalStr,stringToSearch){ return str.indexOf(stringToSearch) };
console.log(pos(str,searchStr));
[/javascript]

ECMAScript 6 Equivalent

[javascript]
var es6pos = (totalStr,stringToSearch) => str.indexOf(stringToSearch);
console.log(es6pos(str,searchStr));
[/javascript]

ECMAScript 5

[javascript]
//2. Two functions in combination
var str = "Please find where there is a find";
var searchStr = "find";
var pos = function(totalStr,stringToSearch){ return str.indexOf(stringToSearch) };
var logIt = function(anything){console.log( anything)};
logIt(pos(str,searchStr));
[/javascript]

ECMAScript 6 Equivalent

[javascript]
var intermediateResult = ((totalStr,stringToSearch) => str.indexOf(stringToSearch)) ;
var es6Logit = intermediateResult => console.log( intermediateResult);
es6Logit(intermediateResult(str,searchStr));
[/javascript]

ECMAScript 5 Foreach and For

[javascript]
var arr = ["a", "b", "c"];

arr.forEach(function(entry) {
console.log(entry);
});

//old way
var index;

for (index = 0; index < arr.length; ++index) {
console.log(arr[index]);
}
[/javascript]

ECMAScript 6 Equivalent

[javascript]
arr.forEach(elem => console.log(elem));
[/javascript]

ECMAScript 5 Use of this in function

[javascript]
function Person() {
var self = this;

self.age = 14;

self.grow = function () {
// The callback refers to the `self` variable of which
// the value is the expected object.
return self.age++;
};
}

var p = new Person();
console.log(p.grow());
console.log(p.grow());
[/javascript]

ECMAScript 6 Equivalent for Lexical this

[javascript]
function Person(){
this.age = 14;

this.grow = () => {
return this.age++; // |this| properly refers to the person object
};
}

var p = new Person();

console.log("es6 –"+ p.grow());
console.log("es6 –"+ p.grow());

[/javascript]

Where will we implement arrow functions in a Server Side Framework like Node.js?

We can use this arrow function, where there is an inline functionality.
We should not try to use this arrow function, for global scope functions.
To have more clear code and compactness in code, we may use this Arrow function. Also we find, return value of this function will immediately have execution value in upper scope and the foreach iterator syntax will have more clarity with this function. Also as javascript introduced several utility functions like map(), reduce(), filter() etc. with arrays, this fat arrow function will have a better fit for those scenarios.

What is the Advantage of using this Feature?

As we have gone through –

  • Shorter syntax – without using function, return etc.
  • Better clarity and compact codebase for smaller inline functions
  • Get this context in all the inline functions of a class within higher order function root scope

A real interesting discussion, we have found in stackoverflow, is here.

Have we tested yet?
In Server Side – How have we tested this feature?

As of now, we do not have this => notation is not implemented yet in node.js 0.12 version. So we needed to use the harmony flag. We have use nvm (node version manager) to manage the node version.

[html]
nvm use 0.12
[/html]
and then using the harmony flag –
[html]
node –harmony es6arrow.js
[/html]

In Client Side – How have we tested this feature?

As of now, only Mozilla Firefox has implemented this feature.Our firefox version is 35.0.
We tested those above features in Firefox Console.

Example in Github –

Code tested with node.js harmony flag

Code tested in Mozilla Firefox Console

Other resources which are useful –

All comments are welcome.

If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *