TypeScript Arrow Function

The ES6 iteration of TypeScript introduces an arrow function, which serves as a concise syntax for creating anonymous functions, or function expressions. This syntax eliminates the need for the function keyword. Commonly referred to as a fat arrow (due to the distinction between the thin arrow -> and the "fat" arrow =>), it is also known as a Lambda function. Arrow functions exhibit lexical scoping for the "this" keyword.

The motivation for arrow function is:

• ✅ When we don't need to keep typing function.
• ✅ It lexically captures the meaning of this keyword.
• ✅ It lexically captures the meaning of arguments.

Syntax

We can split the syntax of an Arrow function into three parts:

• ✅ Parameters: A function may or may not have parameters.
• ✅ The arrow notation/lambda notation (=>)
• ✅ Statements: It represents the function's instruction set.
Example
Copy
(parameter1, parameter2, ..., parameterN) => expression;
Try it Yourself

When employing the fat arrow (=>) syntax, the use of the function keyword becomes unnecessary. Parameters are provided within the parentheses , and the function body is encapsulated in curly braces {}.

In both ES5 and ES6 coding styles, a function can be defined in two different manners.

// ES5: Without arrow function
var getResult = function(username, points) {
  return username + ' scored ' + points + ' points!';
};

// ES6: With arrow function
var getResult = (username: string, points: number): string => {
  return `${ username } scored ${ points } points!`;
}

Arrow function with parameter

The subsequent program illustrates the use of an arrow function that incorporates parameters.

let sum = (a: number, b: number): number => {
            return a + b;
}
console.log(sum(20, 30)); //returns 50

In the preceding example, the sum is represented as an arrow function, with " a: number, b: number " denoting the types of the parameters, and " : number " indicating the return type. The arrow syntax => distinguishes the function parameters from the function's body.

Upon compilation of the aforementioned TypeScript program, the resulting JavaScript code is:

let sum = (a, b) => {
    return a + b;
};
console.log(sum(20, 30)); //returns 50

Output:

Arrow function without a parameter

The subsequent code illustrates an example of an arrow function that does not accept any parameters.

let Print = () => console.log("Hello TypeScript Tutorial!");
Print();

Output:

In an arrow function, when the body contains just a single statement, the use of curly braces and the return keyword is unnecessary. This can be illustrated with the following example.

let sum = (a: number, b: number) => a + b;
console.log("SUM: " +sum(5, 15));

Output:

Arrow function in a class

An arrow function can be incorporated as a property within a class. The example below illustrates this concept more effectively.

class Student {
    studCode: number;
    studName: string;
    constructor(code: number, name: string) {
            this.studName = name;
            this.studCode = code;
    }
    showDetail = () => console.log("Student Code: " + this.studCode + '\nStudent Name: ' + this.studName)
}
let stud = new Student(101, 'Abhishek Mishra');
stud.showDetail();

Output: