Arrays and Tuples

Array Methods

Array methods such as map, filter, and reduce transform typed lists into new values.

array method Array methods run a function for each element while preserving useful type information.

Array Methods

example
methods.ts
Replay: real traced execution (multi-file project)
const bonus: number = 5;
const passingScore: number = 70;

const scores: number[] = [68, 74, 91];
const adjusted: number[] = scores.map((score: number): number => score + bonus);
const passing: number[] = adjusted.filter((score: number): boolean => score >= passingScore);
const total: number = passing.reduce((sum: number, score: number): number => sum + score, 0);

console.log(`adjusted=${adjusted.join(",")}`);
console.log(`passing=${passing.length}`);
console.log(`total=${total}`);

const bonus: number = 0;
const passingScore: number = 70;

const scores: number[] = [68, 74, 91];
const adjusted: number[] = scores.map((score: number): number => score + bonus);
const passing: number[] = adjusted.filter((score: number): boolean => score >= passingScore);
const total: number = passing.reduce((sum: number, score: number): number => sum + score, 0);

console.log(`adjusted=${adjusted.join(",")}`);
console.log(`passing=${passing.length}`);
console.log(`total=${total}`);

const bonus: number = 10;
const passingScore: number = 70;

const scores: number[] = [68, 74, 91];
const adjusted: number[] = scores.map((score: number): number => score + bonus);
const passing: number[] = adjusted.filter((score: number): boolean => score >= passingScore);
const total: number = passing.reduce((sum: number, score: number): number => sum + score, 0);

console.log(`adjusted=${adjusted.join(",")}`);
console.log(`passing=${passing.length}`);
console.log(`total=${total}`);

const bonus: number = 5;
const passingScore: number = 60;

const scores: number[] = [68, 74, 91];
const adjusted: number[] = scores.map((score: number): number => score + bonus);
const passing: number[] = adjusted.filter((score: number): boolean => score >= passingScore);
const total: number = passing.reduce((sum: number, score: number): number => sum + score, 0);

console.log(`adjusted=${adjusted.join(",")}`);
console.log(`passing=${passing.length}`);
console.log(`total=${total}`);

const bonus: number = 5;
const passingScore: number = 80;

const scores: number[] = [68, 74, 91];
const adjusted: number[] = scores.map((score: number): number => score + bonus);
const passing: number[] = adjusted.filter((score: number): boolean => score >= passingScore);
const total: number = passing.reduce((sum: number, score: number): number => sum + score, 0);

console.log(`adjusted=${adjusted.join(",")}`);
console.log(`passing=${passing.length}`);
console.log(`total=${total}`);

  1. bonus ← 5, passingScore ← 70, scores ← 68,74,91, adjusted ← 73,79,96

    1const bonus→ 5: number = 5;  //@bonus=0, 102const passingScore→ 70: number = 70;  //@passingScore=60, 8034const scores→ 68,74,91: number[] = [68, 74, 91];5const adjusted→ 73,79,96: number[] = scores68,74,91.map((score: number): number => score + bonus);6const passing→ 73,79,96: number[] = adjusted73,79,96.filter((score: number): boolean => score >= passingScore);7const total→ 248: number = passing73,79,96.reduce((sum: number, score: number): number => sum + score, 0);89console.log(`adjusted=${adjusted73,79,96.join(",")}`);10console.log(`passing=${passing.length3}`);11console.log(`total=${total248}`);
    outputadjusted=73,79,96
passing=3
total=248

  1. bonus ← 0, passingScore ← 70, scores ← 68,74,91, adjusted ← 68,74,91

    1const bonus→ 0: number = 0;2const passingScore→ 70: number = 70;34const scores→ 68,74,91: number[] = [68, 74, 91];5const adjusted→ 68,74,91: number[] = scores68,74,91.map((score: number): number => score + bonus);6const passing→ 74,91: number[] = adjusted68,74,91.filter((score: number): boolean => score >= passingScore);7const total→ 165: number = passing74,91.reduce((sum: number, score: number): number => sum + score, 0);89console.log(`adjusted=${adjusted68,74,91.join(",")}`);10console.log(`passing=${passing.length2}`);11console.log(`total=${total165}`);
    outputadjusted=68,74,91
passing=2
total=165

  1. bonus ← 10, passingScore ← 70, scores ← 68,74,91, adjusted ← 78,84,101

    1const bonus→ 10: number = 10;2const passingScore→ 70: number = 70;34const scores→ 68,74,91: number[] = [68, 74, 91];5const adjusted→ 78,84,101: number[] = scores68,74,91.map((score: number): number => score + bonus);6const passing→ 78,84,101: number[] = adjusted78,84,101.filter((score: number): boolean => score >= passingScore);7const total→ 263: number = passing78,84,101.reduce((sum: number, score: number): number => sum + score, 0);89console.log(`adjusted=${adjusted78,84,101.join(",")}`);10console.log(`passing=${passing.length3}`);11console.log(`total=${total263}`);
    outputadjusted=78,84,101
passing=3
total=263

  1. bonus ← 5, passingScore ← 60, scores ← 68,74,91, adjusted ← 73,79,96

    1const bonus→ 5: number = 5;2const passingScore→ 60: number = 60;34const scores→ 68,74,91: number[] = [68, 74, 91];5const adjusted→ 73,79,96: number[] = scores68,74,91.map((score: number): number => score + bonus);6const passing→ 73,79,96: number[] = adjusted73,79,96.filter((score: number): boolean => score >= passingScore);7const total→ 248: number = passing73,79,96.reduce((sum: number, score: number): number => sum + score, 0);89console.log(`adjusted=${adjusted73,79,96.join(",")}`);10console.log(`passing=${passing.length3}`);11console.log(`total=${total248}`);
    outputadjusted=73,79,96
passing=3
total=248

  1. bonus ← 5, passingScore ← 80, scores ← 68,74,91, adjusted ← 73,79,96

    1const bonus→ 5: number = 5;2const passingScore→ 80: number = 80;34const scores→ 68,74,91: number[] = [68, 74, 91];5const adjusted→ 73,79,96: number[] = scores68,74,91.map((score: number): number => score + bonus);6const passing→ 96: number[] = adjusted73,79,96.filter((score: number): boolean => score >= passingScore);7const total→ 96: number = passing96.reduce((sum: number, score: number): number => sum + score, 0);89console.log(`adjusted=${adjusted73,79,96.join(",")}`);10console.log(`passing=${passing.length1}`);11console.log(`total=${total96}`);
    outputadjusted=73,79,96
passing=1
total=96

Follow the Array Flow

  1. Start with scores: [68, 74, 91].
  2. map adds bonus to every score.
  3. filter keeps adjusted scores at or above passingScore.
  4. reduce adds the kept scores into one total. | Step | Values | | --- | --- | | start | 68, 74, 91 | | after map with bonus 5 | 73, 79, 96 | | after filter >= 70 | 73, 79, 96 | | after reduce | 248 |

Exercise: methods.ts

Use map, filter, and reduce to adjust scores, keep passing scores, and print the total