TypeScript Anonymous Functions

Introduction

In this chapter, we will learn anonymous functions in TypeScript. Anonymous functions are defined without a name and are often used as arguments to other functions or assigned to variables. Understanding how to use anonymous functions is essential for writing flexible and concise TypeScript code.

Table of Contents

• Definition
• Anonymous Function Syntax
• Basic Anonymous Function
• Anonymous Functions as Arguments
• Anonymous Functions with Arrow Functions
• Using Anonymous Functions in Array Methods
• Complete Example with Output
• Conclusion

Definition

An anonymous function is defined without a name. It is typically used in places where a named function is not necessary, such as callbacks, event handlers, or immediately invoked function expressions (IIFEs).

Anonymous Function Syntax

Syntax

let functionName = function(parameters: type): returnType {
  // code to be executed
};

Example

This example demonstrates a basic anonymous function assigned to a variable.

let add = function(a: number, b: number): number {
  return a + b;
};

console.log(add(5, 3)); // Output: 8

Output

8

Basic Anonymous Function

Anonymous functions can be assigned to variables and used like named functions.

Example

This example demonstrates an anonymous function that subtracts two numbers.

let subtract = function(a: number, b: number): number {
  return a - b;
};

console.log(subtract(10, 3)); // Output: 7

Output

7

Anonymous Functions as Arguments

Anonymous functions are often used as arguments to other functions, such as in callbacks or event handlers.

Example

This example demonstrates using an anonymous function as a callback to the setTimeout function.

setTimeout(function() {
  console.log("This message is displayed after 1 second.");
}, 1000);

Output

This message is displayed after 1 second.

Anonymous Functions with Arrow Functions

Arrow functions provide a more concise syntax for writing anonymous functions.

Example

This example demonstrates using an arrow function to multiply two numbers.

let multiply = (a: number, b: number): number => {
  return a * b;
};

console.log(multiply(4, 5)); // Output: 20

Output

20

Using Anonymous Functions in Array Methods

Anonymous functions are commonly used in array methods like map, filter, and reduce.

Example

This example uses an anonymous function with the map method to double the values in an array.

let numbers: number[] = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(n: number): number {
  return n * 2;
});

console.log(doubled); // Output: [2, 4, 6, 8, 10]

Output

[2, 4, 6, 8, 10]

Complete Example with Output

In this section, we will combine the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground.

// Basic Anonymous Function
let add = function(a: number, b: number): number {
  return a + b;
};
console.log(add(5, 3)); // Output: 8

// Anonymous Function to Subtract
let subtract = function(a: number, b: number): number {
  return a - b;
};
console.log(subtract(10, 3)); // Output: 7

// Anonymous Function as Argument
setTimeout(function() {
  console.log("This message is displayed after 1 second.");
}, 1000);

// Anonymous Function with Arrow Function
let multiply = (a: number, b: number): number => {
  return a * b;
};
console.log(multiply(4, 5)); // Output: 20

// Using Anonymous Functions in Array Methods
let numbers: number[] = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(n: number): number {
  return n * 2;
});
console.log(doubled); // Output: [2, 4, 6, 8, 10]

Conclusion

In this chapter, we covered anonymous functions in TypeScript, including their syntax, usage as arguments, use with arrow functions, and application in array methods. We provided a complete example with its output to illustrate how anonymous functions work in TypeScript. Understanding anonymous functions is essential for writing flexible and concise TypeScript code.