Higher-Order Array Methods: map, filter, reduce

Now that you know the basic array methods, it's time to learn three of the most important higher-order methods. They are the cornerstone of functional programming in JavaScript and incredibly useful when working with dinosaur data.

map() — Transforming Data

The

map()

method creates a new array by executing a function on every element of the original array. It does not modify the original array.

1const dinosaurs = [
2  { name: "Blue", age: 4, species: "Velociraptor" },
3  { name: "Rex", age: 12, species: "T-Rex" },
4  { name: "Bronto", age: 8, species: "Brachiosaurus" }
5];
6
7// Extract only the names
8const names = dinosaurs.map(dino => dino.name);
9console.log(names); // ["Blue", "Rex", "Bronto"]
10
11// Transform into a new format
12const reports = dinosaurs.map(dino => ({
13  label: dino.name + " (" + dino.species + ")",
14  ageInMonths: dino.age * 12
15}));
16console.log(reports);
17// [{ label: "Blue (Velociraptor)", ageInMonths: 48 }, ...]

filter() — Filtering Data

The

filter()

method creates a new array containing only the elements that satisfy a given condition (the function returns

true

).

1const dinosaurs = [
2  { name: "Blue", age: 4, diet: "carnivore", dangerLevel: 8 },
3  { name: "Rex", age: 12, diet: "carnivore", dangerLevel: 10 },
4  { name: "Bronto", age: 8, diet: "herbivore", dangerLevel: 2 },
5  { name: "Triki", age: 6, diet: "herbivore", dangerLevel: 3 }
6];
7
8// Filter carnivores
9const carnivores = dinosaurs.filter(dino => dino.diet === "carnivore");
10console.log(carnivores.length); // 2
11
12// Dinosaurs with a high danger level
13const dangerous = dinosaurs.filter(dino => dino.dangerLevel >= 8);
14console.log(dangerous.map(d => d.name)); // ["Blue", "Rex"]

reduce() — Aggregating Data

The

reduce()

method reduces an array to a single value by processing elements sequentially with an accumulator.

1const dinosaurs = [
2  { name: "Blue", age: 4 },
3  { name: "Rex", age: 12 },
4  { name: "Bronto", age: 8 },
5  { name: "Triki", age: 6 }
6];
7
8// Sum of all ages
9const totalAge = dinosaurs.reduce((sum, dino) => sum + dino.age, 0);
10console.log(totalAge); // 30
11
12// Average age
13const avgAge = totalAge / dinosaurs.length;
14console.log(avgAge); // 7.5
15
16// Grouping dinosaurs by diet
17const grouped = dinosaurs.reduce((groups, dino) => {
18  const key = dino.diet || "unknown";
19  if (!groups[key]) groups[key] = [];
20  groups[key].push(dino.name);
21  return groups;
22}, {});

Chaining Methods into a Pipeline

The true power of these methods reveals itself when you chain them together:

1const dinosaurs = [
2  { name: "Blue", age: 4, diet: "carnivore", dangerLevel: 8 },
3  { name: "Rex", age: 12, diet: "carnivore", dangerLevel: 10 },
4  { name: "Bronto", age: 8, diet: "herbivore", dangerLevel: 2 },
5  { name: "Triki", age: 6, diet: "herbivore", dangerLevel: 3 }
6];
7
8// Pipeline: filter carnivores -> extract names -> sort
9const dangerousNames = dinosaurs
10  .filter(dino => dino.diet === "carnivore")
11  .map(dino => dino.name)
12  .sort();
13
14console.log(dangerousNames); // ["Blue", "Rex"]
15
16// Total danger level of carnivores
17const totalDanger = dinosaurs
18  .filter(dino => dino.diet === "carnivore")
19  .reduce((sum, dino) => sum + dino.dangerLevel, 0);
20
21console.log(totalDanger); // 18