How to use the Array.reduce method in TypeScript⌗

The Array.reduce method is a powerful and versatile way to transform an array into a single value. It takes a callback function and an optional initial value as arguments, and applies the callback function to each element of the array, accumulating the result in an accumulator variable. The callback function receives four parameters: the accumulator, the current element, the current index, and the original array.

The Array.reduce method can be used for various purposes, such as summing up numbers, finding the maximum or minimum value in an array, flattening nested arrays, grouping elements by a common property, and more. In this blog post, we will see some examples of how to use the Array.reduce method in TypeScript with different types of arrays and initial values.

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

// Using type annotations
const sum = numbers.reduce((acc: number, curr: number) => acc + curr, 0);

// Using generics
const sum2 = numbers.reduce<number>((acc, curr) => acc + curr, 0);

console.log(sum); // 15
console.log(sum2); // 15

Example 2: Finding the maximum value⌗

Let’s say we have an array of numbers and we want to find their maximum value. We can use the Array.reduce method with a callback function that compares the accumulator and the current element and returns whichever is larger. We can also provide an initial value that is smaller than any possible element in the array.

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

// Using type annotations
const max = numbers.reduce(
  (acc: number, curr: number) => (acc > curr ? acc : curr),
  -Infinity
);

// Using generics
const max2 = numbers.reduce<number>(
  (acc, curr) => (acc > curr ? acc : curr),
  -Infinity
);

console.log(max); // 5
console.log(max2); // 5

Example 3: Flattening an array⌗

Let’s say we have an array of arrays and we want to flatten it into a single array. We can use the Array.reduce method with a callback function that concatenates the accumulator and the current element using the spread operator (…). We can also provide an initial value of an empty array for the accumulator.

const arrays = [[1, 2], [3, 4], [5]];

// Using type annotations
const flat = arrays.reduce(
  (acc: number[], curr: number[]) => [...acc, ...curr],
  []
);

// Using generics
const flat2 = arrays.reduce<number[]>((acc, curr) => [...acc, ...curr], []);

console.log(flat); // [1 ,2 ,3 ,4 ,5]
console.log(flat2); // [1 ,2 ,3 ,4 ,5]

As you can see, using TypeScript with Array.reduce makes our code more readable and robust by enforcing type safety and avoiding implicit conversions. I hope this blog post helped you understand how to use this powerful method in your TypeScript projects.