Working with Arrow Functions

Introduction To Arrow Functions In Typescript

Before understanding arrow functions let's understand the need for arrow functions in typescript. Let's see how to write a function without arrow functions:

This is how we used to define a function without the arrow function but now with the help of the arrow function, we can define a function more shortly. Let's see an example where we will define a function with an arrow function:

In the above example, we can see that we have defined the function in a shorter way using the arrow functions. It helps us to avoid writing the function keyword multiple times.

Syntax

Now let's see the syntax of typescript arrow functions:

By using the => (fat arrow) we don't need to use the function keyword. The parameters are passed in the brackets (), and the function expression is enclosed within the curly brackets {}. Till now we have clearly understood the use of typescript arrow functions and we are clear with the syntax of how to implement the arrow function in our program.

What is an Arrow Function?

Arrow functions were introduced in ES6. We know that functions are the building block to creating and combining relatable bits of code. Typescript arrow functions is one of the efficient and easy ways to create functions. In simple words arrow functions (=>) are a concise way of writing a function expression. Arrow functions are similar to lambda in other programming languages. Now let us see some examples of arrow functions with parameter and without a parameter.

Arrow Functions With a Parameter:

The following program is an example of an arrow function with a parameter:

Output

In the above program, the result is an arrow function the variables num1 and num2 with the type number are the parameter types, then the number after the parameters is the return type of the variables, then the (=>) fat arrow or arrow notation separates the function parameters and the function body. Run this code in your editor/ compiler for a better and clear explanation.

Arrow Functions Without A Parameter

The following program is an example of an arrow function without a parameter:

Output

We can see that in the above program no parameters are passed and also if the function body consists of only one line then also there is no need for the curly brackets and the return keyword. Run this code in your editor/compiler for a better and clear explanation. Now let us see some more examples:

1. Arrow Functions With No Parameter And No Return Value

Let's see an example of a function with no parameters and return values:

Output

In the above program, the variables a and b are not given to the parameters but are directly accessed by the function itself. The function does not return any value but prints the output to the browser console.

2. Arrow Functions With No Parameter But Returns Some Value

Let us see an example of a function with no parameters but some return values:

Output

In the above program, the variables a and b are not given to the parameters but are directly accessed by the function itself. The function returns some value whenever we print it.

3. Arrow Functions With Parameters But Returns No Value

Let's see an example of a function with parameters that returns no value:

Output

In the above example we can see that the arrow function has parameters but no return value, the function does not return any value but prints the output to the browser console.

4. Arrow Function With Parameters And Returns Some Value

Let us see an example of arrow functions with parameters that returns some value:

Output

In the above example, the result is an arrow function. (a, b) denotes the parameter types, and :number specifies the return type. The fat arrow => separates the function parameters and the function body. The right side of => can contain one or more code statements. Run this code in your editor for a better and clear explanation.

Arrow Functions in a Class

We can also include the arrow function as a property in a class. To understand it more clearly let us look at an example:

Output

In the above code we have implemented the arrow function property in a class and also added a new employee list with name and employee no and displayed it. Run this code in your editor for a better and clear explanation.