Some Fat are good for you: Fat Arrow Functions in ECMAScript 6

The Fat Arrow

I have been hearing about the arrow functions lately and everybody is excited about it. Arrow functions are still in experimental stage and are part of the Harmony (ECMAScript 6) proposal. Here is the Arrow Function Reference on MDN. So I am curious what the excitement is about and wanted to try it.

Spider Monkey Build

But before I can try it I have to build my own SpiderMonkey engine that has this new javascript features. Here is the link to Spider Monkey Build Documentation. 

Sublime Text Build System Config

After building SpiderMonkey i added it as a new build system in Sublime Text using this configuration.
{
    "cmd": ["js", "$file", "$file_base_name"],
    "working_dir": "${project_path:${folder}}",
    "path": "/usr/local/bin:/bin:/usr/sbin:/sbin",
    "selector": "*.js"
}
Note: path may vary where the js executable is installed in your system after building Spider Monkey
I tried a couple of examples and things that i wanted to try

Trying Out the Fat Arrow

Here is the source code of my test using the Fat Arrow Function:

//Single Args need no parenthesis

var fatArrow1 = val => { return val };

print(fatArrow1(10));

//Multiple Args need parenthesis

var fatArrow2 = (a, b) => { return [a, b] }

print(fatArrow2('one', 'two'));

//No Args need parenthesis

var fatArrow3 = () => 'I have no args';

print(fatArrow3()); 

//Sample of lexically binding to this

function myObject (nameArg) {

function printMyName () {

//Undefined because this is this function scope

print('My name is ' + this.name);

};

this.name = nameArg;

this.sayMyName = function(){

printMyName();

};

}

//Sample using the fat Arrow

function myFatObject (nameArg) {

this.name = nameArg;

this.sayMyName = () =>{ print('My name is ' + this.name); };

}

var obj1 = new myObject('George');

obj1.sayMyName();

var obj2 = new myFatObject('George');

obj2.sayMyName();

//Sample from MDN

var a = [

  "We're up all night 'til the sun",

  "We're up all night to get some",

  "We're up all night for good fun",

  "We're up all night to get lucky"

];

//Reminds me of LINQ in C#

var a2 = a.map(function(s){ return s.length });

print(a2);

var a3 = a.map( s => s.length );

print(a3);

//Short cut to do this;

a.map(s => print(s));

As described in MDN two factors influenced adding this language feature in ECMAScript 6

1. So that we can write shorter functions

    - like traversing an array (See //Sample From MDN from above code sample)which kind of reminds me of LINQ in C#

2. Lexically binding this

    -Every new function defines it's own 'this' value, which makes it a little bit confusing which object is this referring too. By lexically binding 'this' meaning that 'this' is bound to the enclosing text rather than the arrow function. This means that it is the end of having 'that' be 'this' to get around this situation without arrow functions. (See //Sample of lexically binding to this from the above code sample)

The Fat Arrow is a good feature to be added in ECMAScript 6 and hopefully will make coding in javascript a little less confusing having 'that' to be 'this'. I hope it will come soon the a modern browser near you.