How to create the anonymous function in TypeScript?

In TypeScript, we can declare the function using the function keyword. It is a block of code that performs some operation, and we can reuse the function code by invoking the function.

There are two types of functions. One is a named function, and another is an anonymous function. The name function means we can identify it using the unique identifier, and the identifier doesn’t exist for the anonymous functions.

We will talk about anonymous functions in depth in this tutorial. As the word ‘anonymous function’ states, it means a function defined without any name or identifier. We can simply store the anonymous function in the variable and can identify the function using that variable.

Using The Function Keyword to Create an Anonymous Function

Users can see the general syntax to create a function in TypeScript.

function demo(param1: string, param2: number): void {
   // code for the function
}

The demo is the identifier in the above function. We can make the above function anonymous by removing the demo identifier. We can define the anonymous function by using the function keyword only, and the parameter in the parentheses after that. Also, we can store the anonymous function in the variable.

Users can follow the syntax below to create an anonymous function in TypeScript.

Syntax

We have converted the demo() function to an anonymous in thebelow syntax.

let demo: (param1: string, param2: string) => void = function (
   param1: string,
   param2: string
): 
void {
   // code for anonymousn function
};

Now, the demo is not a function identifier, but it stores a function. We have defined the type of the demo variable, which is the function with two parameters of type string and return-type void. After that, we used the assignment operator to assign the anonymous function to the demo variable.

Example

In the example below, we have defined the demo variable and stored the anonymous function in that. Users can observe how we have invoked the anonymous function using the demo variable. We have also passed the two arguments while invoking the anonymous function using the demo variable.

// define a demo variable of function type taking two string parameters, and returning the none.
let demo: (param1: string, param2: string) => void = function (
   param1: string,
   param2: string
): void {
   // code for the anonymous function
   console.log("The value of the param1 is " + param1);
   console.log("The value of the param2 is " + param2);
};
// calling the anonymous function via variable in which we have stored it.
demo("TutorialsPoint", "TypeScript");

On compiling, it will generate the following JavaScript code

// define a demo variable of function type taking two string parameters, and returning the none.
var demo = function (param1, param2) {
   // code for the anonymous function
   console.log("The value of the param1 is " + param1);
   console.log("The value of the param2 is " + param2);
};
// calling the anonymous function via variable in which we have stored it.
demo("TutorialsPoint", "TypeScript");

Output

The above code will produce the following output −

The value of the param1 is TutorialsPoint
The value of the param2 is TypeScript

Using The Arrow Function to Create an Anonymous Function

The arrow function is another type of anonymous function. Using the arrow syntax, we can define the function without the function keyword and function identifier.

Users can follow the syntax below to define the anonymous function using the arrow syntax and learn why it is called an arrow syntax.

Syntax

let test: function_Type = (parameters): return_type => {
   // anonymous function code
}

In the above syntax, the test is a normal variable of the function type. Here, function_type is a type of arrow function. After that, () => {} is the syntax of the arrow function. Also, we can add parameters for the arrow function into the parentheses and can write code for the arrow function in the curly braces.

Example

In the example below, we have defined the test variable which stores the anonymous arrow function. The arrow function returns the number value after multiplying the value passed as a parameter.

We have invoked the arrow function using the test variable and stored its return value in the result variable.

// defining the test variable
// (value1: number) => number is the type of the test variable.
// In (value1: number): number, value1 is the parameter for the anonymous function,
// number after ':' defines the return type of anonymous function
let test: (valeu1: number) => number = (value1: number): number => {
   return 10 * value1;
};
// invoking the test function
let result = test(12);
console.log("The returned value from the test function is " + result);

On compiling, it will generate the following JavaScript code −

// defining the test variable
// (value1: number) => number is the type of the test variable.
// In (value1: number): number, value1 is the parameter for the anonymous function,
// number after ':' defines the return type of anonymous function
var test = function (value1) {
   return 10 * value1;
};
// invoking the test function
var result = test(12);
console.log("The returned value from the test function is " + result);

Output

The above code will produce the following output −

The returned value from the test function is 120

Using the above syntaxes and examples, we have learned to work with anonymous functions. We will learn where anonymous functions are used while writing real-time code.

Use The Anonymous Function as a Callback Function

While working with TypeScript, we often need to call a callback function when invoking any method or function. We can pass the callback function as a parameter of another function. We can use the anonymous arrow function to keep the syntax sort of the callback function.

Users can follow the syntax below to use the arrow function as a callback function.

Syntax

Array.sort(()=>{
   // code for the callback function
})

In the above syntax, we have used the arrow function as a callback function.

Example

In this example, we have created an array of numbers. After that, we invoked the sort() method to sort the numbers array in the decreasing number. The sort() method takes the callback function which returns the number value to sort the array, and the callback function is the anonymous arrow function.

// Creating the array of numbers
let numbers: Array<number> = [90, 64, 323, 322, 588, 668, 9, 121, 34, 1, 2];

// using the sort method to sort the numbers array
// To sort the numbers in the decreasing order, we need to pass callback function inside the sort method
// we have used the arrow function as a callback function inside the sort() method
numbers.sort((value1: number, value2: number): number => {
   return value1 < value2 ? 1 : -1;
});
// printing the sorted numbers array
console.log(numbers);

On compiling, it will generate the following JavaScript code −

// Creating the array of numbers
var numbers = [90, 64, 323, 322, 588, 668, 9, 121, 34, 1, 2];
// using the sort method to sort the numbers array
// To sort the numbers in the decreasing order, we need to pass callback function inside the sort method
// we have used the arrow function as a callback function inside the sort() method
numbers.sort(function (value1, value2) {
   return value1 < value2 ? 1 : -1;
});
// printing the sorted numbers array
console.log(numbers);

Output

The above code will produce the following output −

[ 668, 588, 323, 322, 121, 90, 64, 34, 9, 2, 1 ]

We learned to use the anonymous function in TypeScript. We can create the anonymous function using two ways, one is only using the function keyword, and another is using the arrow syntax. However, arrow syntax is the best as its syntax is very short.