JS Map, Filter and Reduce

Arrays are one of the most commonly used data structures in JavaScript. While they offer many useful built-in methods to help developers manipulate and work with data, map(), filter(), and reduce() are probably the most important, as well as essential tools for functional programming in JavaScript.

• Functional Programming is a paradigm where a function’s output depends solely on its inputs, ensuring that calling it with the same arguments always yields the exact same result. It eliminates "side-effects" (mutating local or global states).
• Why use these methods? They manipulate lists (arrays) while leaving the original array completely intact (immutability). They prevent you from having to manage standard for loops, create empty arrays, or manually push items into them.

1. Map

Concept: Used when you want to look at every single item in an array, modify or extract something from it, and return a new array of the exact same length.

• How it works: map takes a callback function. This callback automatically receives the current item, the index, and the original array.

Examples

Imagine we start with this original array of song objects:

const songs = [
  { name: 'The Motherload', artist: 'Mastodon', duration: 300 },
  { name: 'Blood and Thunder', artist: 'Mastodon', duration: 228 },
  { name: 'The Trooper', artist: 'Iron Maiden', duration: 253 }
];

• Example A: Extracting a single property If you only want an array of song names:

const songNames = songs.map(song => song.name);
// Output: ['The Motherload', 'Blood and Thunder', 'The Trooper']

• Example B: Modifying objects inside the array If you want to return a new array where all song names are converted to lowercase:

const lowercaseSongs = songs.map(song => {
  return {
    ...song,
    name: song.name.toLowerCase()
  };
});

2. Filter

Concept: Used when you want to evaluate every item in an array and selectively choose which ones to keep based on a condition.

• How it works: It takes a callback function that must return either true or false. If true, the item is kept in the new array; if false, it is left out.

Examples

Using the same songs array from above:

• Example A: Filtering numbers (e.g., getting even numbers from an array)

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// Output: [2, 4, 6]

• Example B: Filtering arrays of objects If you only want to see songs by the artist 'Mastodon':

const mastodonSongs = songs.filter(song => song.artist === 'Mastodon');
/* Output: 
[
  { name: 'The Motherload', artist: 'Mastodon', duration: 300 },
  { name: 'Blood and Thunder', artist: 'Mastodon', duration: 228 }
]
*/

3. Reduce

Concept: Used when you want to take an array of values and combine ("reduce") them into a single output value (such as a single number, an object, or a flattened array).

• How it works: Unlike map and filter, its callback receives an accumulator as its first argument, followed by the current value. The accumulator updates with every loop. You can also pass an optional starting value for the accumulator.

Examples

• Example A: Summing integers to find an average

const numbers = [10, 20, 30, 40];
const totalSum = numbers.reduce((accumulator, currentValue) => 
                   accumulator + currentValue, 0);
                   // totalSum = 100
const average = totalSum / numbers.length; // 25

• Example B: Building an object from an array (Counting occurrences) Transforming our songs array into an object that maps { artist: song_count }:

const artistCounts = songs.reduce((acc, song) => {
  acc[song.artist] = (acc[song.artist] || 0) + 1;
  return acc;
}, {});
// Output: { 'Mastodon': 2, 'Iron Maiden': 1 }

4. Chaining Methods

Because map and filter return new arrays, you can string (chain) these methods together consecutively to perform highly complex operations in a clean, readable layout.

Example: Combining everything

Imagine you have a nested array of songs from different music platforms (Spotify and LastFM), and you want to get a comma-separated string of names for all songs that are longer than 3 minutes (180 seconds):

const spotifySongs = [
  { name: 'The Motherload', duration: 300 },
  { name: 'Short Track', duration: 90 }
];
const lastFmSongs = [
  { name: 'The Trooper', duration: 253 }
];

// 1. Flatten into a single array using reduce
const allSongs = [spotifySongs, lastFmSongs].reduce((acc, currentArray) => {
  return acc.concat(currentArray);
}, []);

// 2. Chain filter and map to get the final result
const longSongNamesString = allSongs
  .filter(song => song.duration > 180) // Keeps only songs > 180s
  .map(song => song.name)             // Extracts just the names
  .join(', ');                        // Joins them into a string

console.log(longSongNamesString); 
// Output: "The Motherload, The Trooper"