TypeScript Tutorial
TypeScript Array Methods
push, map, filter, and reduce grow an array and transform it. Prefer them over rewriting loops.
A list that can grow and transform
A TypeScript array already has methods for the work beginners write as for loops: add at the end, build a new list from each element, keep some elements, fold the list into one value. C++ usesvector plus push_back and algorithms. Here the methods live on the array itself.
Annotate the list as number[] (or Array<number>). Then tsc checks everypush and every callback. The editor at /typescript/try runs these as one file.
push and length
push adds one or more elements at the end. length is how many you have. Length can change after each push. You never wrote a capacity in the type.
Example
const nums: number[] = [];
nums.push(8);
nums.push(3);
nums.push(5);
console.log(nums.length);
console.log(nums.join(" "));Output is 3 then 8 3 5. const here means you will not reassignnums to a different array. You may still push into the same array.
Run this in /typescript/try. Add another push and watch length follow.
map builds a new array
map calls a function on every element and returns a new array of the results. The original list stays as it was. Type the callback parameter so the compiler knows each item.
Example
const nums: number[] = [2, 5, 9];
const doubled: number[] = nums.map((n: number) => n * 2);
console.log(nums.join(" "));
console.log(doubled.join(" "));First line 2 5 9. Second line 4 10 18. map did not editnums. If you need to change the existing slots, assign through an index or use a loop. Prefermap when the result is a new list.
filter keeps some elements
filter keeps an element when the callback returns true. The result is a new array. The source is unchanged. Use it instead of pushing into a second list inside a loop.
Example
const nums: number[] = [4, 17, 9, 2, 11];
const high: number[] = nums.filter((n: number) => n > 5);
console.log(high.join(" "));
console.log(high.length);Output is 17 9 11 then 3. Values 4 and 2 did not pass the test.
reduce folds the list into one value
reduce walks the array and carries an accumulator. The callback receives the so-far total and the next item, and returns the next total. Pass a starting value so an empty array still has a defined result.
Example
const nums: number[] = [8, 3, 5];
const total: number = nums.reduce((sum: number, n: number) => sum + n, 0);
console.log(total);
console.log(nums.length);Output is 16 then 3. The seed is 0. Starting at 10 would print 26. reduce is the array analog of C++ accumulate.
Method versus a hand-written loop
| Method | Does | Returns |
|---|---|---|
push | Add at the end | The new length |
map | Transform each item | A new array |
filter | Keep items that pass a test | A new array |
reduce | Fold items into one value | That value |
Write a for when you need the index and two moving parts at once. For “double every number” or “keep the large ones,” the named method is shorter and harder to get off-by-one.
Chain when each step is a list
filter returns an array, so you can call map on the result. Keep the chain short enough to read. Next: strict null, which is how tsc stops null from pretending it is a string.