Subscribe via RSS Feed

ECMAScript 6 Fat Arrow Function – a discussion

May 16, 2015 0 Comments

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. fjallraven kanken mini (enfants) 7 L 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. air max pas cher

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. kanken baratas 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. Baskets asics pas cher

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. kyrie 1 pas cher 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

You must be logged in to post a comment.