This post will is 10 of 20 for my series on intermediate-to-advance TypeScript tips.

All tips can be run on the TypeScript Playground.

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. In the world of JavaScript and TypeScript, functional programming concepts have become increasingly popular due to their ability to make code more readable, maintainable, and testable.

One of the key concepts in functional programming is the use of higher-order functions. A higher-order function is a function that takes one or more functions as arguments, returns a function, or both. This post will explore how to leverage higher-order functions in TypeScript.

Let's start with a simple example of a higher-order function that you've likely used before: the map function. Here's how you might use it in TypeScript:

let numbers = [1, 2, 3, 4, 5];

let squares = numbers.map((num) => num * num);

console.log(squares); // Output: [1, 4, 9, 16, 25]
copy

In this example, map is a higher-order function that takes a function as an argument. This function is applied to each element in the numbers array, and a new array is returned.

Now, let's create our own version of the map function. This will help us understand how higher-order functions work under the hood.

function map<T, U>(array: T[], transform: (value: T) => U): U[] {
  let result: U[] = [];
  for (let value of array) {
    result.push(transform(value));
  }
  return result;
}

let numbers = [1, 2, 3, 4, 5];

let squares = map(numbers, (num) => num * num);

console.log(squares); // Output: [1, 4, 9, 16, 25]
copy

In this example, we've defined a map function that takes an array and a transform function as arguments. The transform function is applied to each element in the array, and the results are collected into a new array.

Now, let's take things a step further by implementing our map function using another higher-order function: reduce.

function map<T, U>(array: T[], transform: (value: T) => U): U[] {
  return array.reduce((result, value) => {
    result.push(transform(value));
    return result;
  }, [] as U[]);
}

let numbers = [1, 2, 3, 4, 5];

let squares = map(numbers, (num) => num * num);

console.log(squares); // Output: [1, 4, 9, 16, 25]
copy

In this example, reduce is a higher-order function that takes a function (the reducer) and an initial value as arguments. The reducer function is called for each element in the array, with the result of the previous call passed as the first argument and the current element passed as the second argument.

Higher-order functions are a powerful tool in functional programming, and TypeScript's static typing features make them even more powerful. By using higher-order functions, we can write code that is more reusable, testable, and readable.

In this post, we've explored how to use and implement higher-order functions in TypeScript. We started with a simple example using the map function, then created our own version of map, and finally implemented `

map using reduce. Each step of the way, we leveraged the power of higher-order functions to make our code more declarative and less imperative.

Photo credit: fonsheijnsbroek_amsterdam_photos