• Arrow Functions
• Tip: Arrow Function Danger
• Tip: Arrow Function inheritance

1. You don’t need to keep typing function
2. It lexically captures the meaning of this
3. It lexically captures the meaning of arguments

For a language that claims to be functional, in JavaScript you tend to be typing function quite a lot. The fat arrow makes it simple for you to create a function

this has traditionally been a pain point in JavaScript. As a wise man once said “I hate JavaScript as it tends to lose the meaning of this all too easily”. Fat arrows fix it by capturing the meaning of this from the surrounding context. Consider this pure JavaScript class:

function Person(age) {
    this.age = age;
    this.growOld = function() {
        this.age++;
    }
}
var person = new Person(1);
setTimeout(person.growOld,1000);

If you run this code in the browser this within the function is going to point to window because window is going to be what executes the growOld function. Fix is to use an arrow function:

function Person(age) {
    this.age = age;
    this.growOld = () => {
        this.age++;
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000); // 2

The reason why this works is the reference to this is captured by the arrow function from outside the function body. This is equivalent to the following JavaScript code (which is what you would write yourself if you didn’t have TypeScript):

class Person {
    constructor(public age:number) {}
    growOld = () => {
        this.age++;
    }
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000); // 2

Tip: Arrow Function Need

Beyond the terse syntax, you only need to use the fat arrow if you are going to give the function to someone else to call. Effectively:

var growOld = person.growOld;
// Then later someone else calls it:
growOld();

If you are going to call it yourself, i.e.

then this is going to be the correct calling context (in this example person).

Tip: Arrow Function Danger

Tip: Arrow functions with libraries that use this

Many libraries do this e.g. jQuery iterables (one example ) will use this to pass you the object that it is currently iterating over. In this case if you want to access the library passed this as well as the surrounding context just use a temp variable like like you would in the absence of arrow functions.

something.each(function() {
    console.log(_self); // the lexically scoped value
    console.log(this); // the library passed value
});

Tip: Arrow functions and inheritance

If you have an instance method as an arrow function then it goes on this. Since there is only one this such functions cannot participate in a call to super (super only works on prototype members). You can easily get around it by creating a copy of the method before overriding it in the child.

class Adder {
    constructor(public a: number) {}
    // This function is now safe to pass around
    add = (b: number): number => {
        return this.a + b;
    }
}
class ExtendedAdder extends Adder {
    // Create a copy of parent before creating our own
    private superAdd = this.add;
    // Now create our override
    add = (b: number): number => {
        return this.superAdd(b);
    }
}

Tip: Quick object return

Sometimes you need a function that just returns a simple object literal. However, something like

is parsed as a block containing a JavaScript Label by JavaScript runtimes (cause of the JavaScript specification).

You can fix it by surrounding the object literal with ():

// Correct ?
var foo = () => ({
    bar: 123