TypeScript and array reduce function
ArraysTypescriptArrays Problem Overview
Do you know what the reduce
array method does in TypeScript?
Can you provide a simple example of usage?
I searched on Google and the TypeScript language specification but could not find any decent explanation and examples.
Arrays Solutions
Solution 1 - Arrays
Just a note in addition to the other answers.
If an initial value is supplied to reduce then sometimes its type must be specified, viz:-
a.reduce(fn, [])
may have to be
a.reduce<string[]>(fn, [])
or
a.reduce(fn, <string[]>[])
Solution 2 - Arrays
It's actually the JavaScript array reduce
function rather than being something specific to TypeScript.
As described in the docs: Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.
Here's an example which sums up the values of an array:
let total = [0, 1, 2, 3].reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(total);
The snippet should produce 6
.
Solution 3 - Arrays
With TypeScript generics you can do something like this.
class Person {
constructor (public Name : string, public Age: number) {}
}
var list = new Array<Person>();
list.push(new Person("Baby", 1));
list.push(new Person("Toddler", 2));
list.push(new Person("Teen", 14));
list.push(new Person("Adult", 25));
var oldest_person = list.reduce( (a, b) => a.Age > b.Age ? a : b );
alert(oldest_person.Name);
Solution 4 - Arrays
Reduce() is..
- The reduce() method reduces the array to a single value.
- The reduce() method executes a provided function for each value of the array (from left-to-right).
- The return value of the function is stored in an accumulator (result/total).
It was ..
let array=[1,2,3];
function sum(acc,val){ return acc+val;} // => can change to (acc,val)=>acc+val
let answer= array.reduce(sum); // answer is 6
Change to
let array=[1,2,3];
let answer=arrays.reduce((acc,val)=>acc+val);
Also you can use in
- find max
let array=[5,4,19,2,7];
function findMax(acc,val)
{
if(val>acc){
acc=val;
}
}
let biggest=arrays.reduce(findMax); // 19
arr = [1, 2, 5, 4, 6, 8, 9, 2, 1, 4, 5, 8, 9]
v = 0
for i in range(len(arr)):
v = v ^ arr[i]
print(value) //6
Solution 5 - Arrays
+1 for @JohnnyHK answer that it's a standard Javascript function.
I landed here because I got some issues with typing this function, so I'll leave my findings here. If you have a standard IDE if you click on reduce
function you will get the type definitions for it.
/**
* Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
* @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
* @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
*/
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
/**
* Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
* @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
* @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
*/
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
First set is for reducing array of T
to the T
value itself.
There is also 2nd usage, mentioned by @Quentin, which is that you might want to reduce array of T
to some other type. Most often I saw it being used as:
const keyToValMap = [{key: 'k1', val: 1}].reduce<Record<string, number>>((map, el) => {
map[el.key] = el.val;
return map
}, {})
Solution 6 - Arrays
Simple example calculating the product of a numerical array. The bits I always forget is the variable as type
syntax for the parameter passed as the initial accumulator.
const product = (nums: number[]): number => nums.reduce((acc: number, v: number): number => acc * v, 1 as number);
alert(product([1, 2, 3, 4]));