8.Typescript arrow functions

Since you already know how to use Named functions and Anonymous functions let me show you another type of function which you will be dealing with while building Angular Applications

Let's have a look at the following sample:

// Named function
function add(x, y) {
    return x + y;
}

// Call named function
console.log(add(5,10));

You can write the same using arrow functions (sometimes also called fat arrow functions):

var add = (x,y) => x+y;
console.log(add(5,10));

As you can see they are not that fat :) They are actually, shorter and less verbose than traditional function expressions. Arrow functions have two huge advantages, the first one you already know:

1. Shorter syntax:

Arrow functions are always anonymous and turn:

(parameters) { expression }

// Example:
function add(x, y) {
    return x + y;
}

into:

(parameters) => {expression}

// Example:
(x,y) => {x+y};

In the case that your function doesn't use any input parameters, you can use even shorter syntax:

() => {expression}

// Example:
() => {console.log('Doing some math...'); return 1;}

When you only have one parameter, the opening parentheses are optional:

parameters => { expression }

// Example:
z => { return z*z}

Finally, if you are returning an expression, you can remove the brackets and return statement:

() => expression

// Example:
z => z*z;

2. Handling `this`

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

Arrow functions do not have this , arguments or other special names bound at all — when the object is being created the name this is found in the enclosing scope, not the person object.

Consider the following example:

var name = "david";
var person = {
    name: "john",

    shout: function () {
        console.log("my name is ", this.name);
    },
    shout2: () => {
        console.log("my name is ", this.name);
    },
};

person.shout();  // "john"
person.shout2(); // "david"

As you can see, when we are using normal functions this corresponds to the name: john (the closest object), while in case of arrow function, this refers to the global scope: david

Why is it important?

Functions always have their own this. But that prevents you from accessing the this of, e.g., a surrounding method from inside a callback:

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) { // (A)
    'use strict';
    return arr.map(function (x) { // (B)
        // Doesn’t work:
        return this.prefix + x; // (C)
    });
};

var pre = new Prefixer('Hi ');
console.log(pre.prefixArray(['Joe', 'Alex']));

This will generate an error:

TypeError: Cannot read property 'prefix' of undefined

This is because, in line C, we’d like to access this.prefix, but can’t, because the this of the function from line B shadows the this of the method from line A. In strict mode, this is undefined in non-method functions, which is why we get an error if we use Prefixer.

There is a workaround which we can use:

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    var that = this; // (A)
    return arr.map(function (x) {
        return that.prefix + x;
    });
};

var pre = new Prefixer('Hi ');
console.log(pre.prefixArray(['Joe', 'Alex']));

But this is tricky and makes code more complex, while using an arrow function solves the issue:

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    return arr.map((x) => {
        return this.prefix + x;
    });
};

var pre = new Prefixer('Hi ');
console.log(pre.prefixArray(['Joe', 'Alex']));

Lesson summary:

Since ES6, you can use arrow functions to make your code less verbose:

//Multiple input parameters => mixed output
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
(param1, param2, …, paramN) => { return expression; }

// Single input (parenthesis are optional)
(singleParam) => { statements }
singleParam => { statements }
singleParam => expression


// Empty list of parameters
() => { statements }

As a disclaimer, there is more to arrow functions than what was explained in this article. But this should give you a great base for further learning! As always, leave a comment if you have any great resources on the subject for others to explore.