Lambda

why introducing lambda first? if you have played a PC game “Half-life” in childhood, then you must have been familiar with “lambda”.

the following definition is from wikipedia:

Lambda calculus (also written as λ-calculus) is a formal system in mathematical logic for expressing computation based on function abstraction and application using variable binding and substitution

what was that? ok, let me put it this way: lambda means a simple mapping relation from x to y, but in most programming languages, it also refers to anonymous function, as in most case it should only be used once.

lambda can be pass as parameter to other function, or return by other function. this kind of things also is called higher order function ¹.

but the original version of lambda expression is much simpler then anonymous function. It should only take one argument.

let’s take a look at the new version of JavaScript lambda.

arrow function

ECMAScript 6, code name harmony (as you can see through this link, Firefox implemented most of the features) is RC now. Without waiting for all browsers support, through some tramscompiler such as Babel, we can use most of es6 features in our product code already²。

One of the most exciting feature is arrow function. Why all it arrow fucntion? You may still remember lambda? A arrow make the anonymous function more like lambda.

arrow function is implemented from Firefox 22³, alternately you can use in chrome by toggle on the es6 features⁴. So, it would be better if you run all examples code in firefox.

define a arrow function

There are two form of defining a arrow function

Why Arrow

Here is the old way of doing map multiple 2 to an array.

and with arrow function will be:

So, we just remove function and return and {}? Indeed, yes, those are all symbols we never needed.

map(x => x*2) make more sense, much more sorter, readable and descriptive.

Lexical this

If you’re still not convinced to use arrow function, here comes the real reason you should start using it.

You must be seeing this before right?

 1     var Multipler = function(inc){
 2       this.inc = inc;
 3     }
 4     Multipler.prototype.multiple = function(numbers){
 5       return numbers.map(function(number){
 6         return this.inc * number;
 7       })
 8     }
 9     new Multipler(2).multiple([1,2,curry,es6]) 
10 // => [NaN, NaN, NaN, NaN]  不 work, 因为 map 里面的 this 指向的是全局变量( window)
11 
12     Multipler.prototype.multiple = function(numbers){
13       var self = this; // 保持 Multipler 的 this 的缓存
14       return numbers.map(function(number){
15         return self.inc * number;
16       })
17     }
18     new Multipler(2).multiple([1,2,curry,es6]) // => [ 2, es6, 6, 8 ]

Weird, isn’t it? It is a bug in JavaScript(due to dynamic binding), and this bug show up in lot of interview quiz. who the hell is this.

alternately there’s couple of ways of fixing this

1 numbers.map(function(number){
2     return this.inc * number;
3 }).bind(this)

or

1 numbers.map(function(number){
2     return self.inc * number;
3 }, this)

but, either way, you have to manually fix this binding.

Try the shiny new arrow function

1 Multipler.prototype.multiple = function(numbers){
2   return numbers.map((number) => number*this.inc);
3 };
4 
5 console.log(new Multipler(2).multiple([1,2,curry,es6]));// => [ 2, es6, 6, 8 ]

phwww, no more manual fixing this, arrow function always point to the instance object.

<a class=”jsbin-embed” href=”http://jsbin.com/vawobe/1/embed?js,console”>codes in jsbin</a><script src=”http://static.jsbin.com/js/embed.js”></script>

Anonymous function in JavaScript

In JavaScript, function is first class citizen, which means function can be return or pass as arguments.

define anonymous function

Creating a anonymous is never been so <del>easy</del>:

1 function(x){
2     return x*x;
3 }// => SyntaxError: function statement requires a name

Opss, what’s going on here? Why function without a name is a SyntaxError? We define a function here using function expression, which means a value should be returned:

1 var a = new Array() // this is a statement, while "new Array()" is expression

That’s why the error message says function statement requires a name. function statement is the way compiler think you’re trying to use.

While the funny thing is, passing such a function as argument or to a variable is fine:

1 var squareA = function(x){
2     return x*x;
3 }

But this is weird since now squareA become a named function.

Even though the result is the same as:

1 function squareB(x){
2     return x*x;
3 } // => undefined

But the way how they are created is different. squareB is created via function statement, while squareA is created vie function expression as a anonymous function , then assign to a variable:

Using Anonymous Function

First class function can be

assign to varibles:

1 var square = function(x) {return x*x}

pass as arguments:

1 console.log(function(x){return x*x})

or return by other function:

1 function multiply(x){
2     return function(y){
3         return x*y;
4     }
5 }
6 multiply(1)(2) // => 2