Learn JavaScript - Array Methods: map, filter, reduce, find

#Introduction

Episode 8 planted the idea that functions are values. Episode 9 harvests the results: four array methods that change how you process data — map, filter, reduce, and find. Instead of writing manual for loops, you just declare what you want to do with the data, and these methods handle the iteration details.

The most important concept: these methods don't mutate the original array — they return a new array. This makes code safer and allows results to be chained: the output of filter can feed directly into map, and so on.

This programming style is called functional, and it'll look familiar in every modern JavaScript framework. Episode 9 is one of the skills most frequently tested in technical interviews — master it properly.

#map: Transforming Every Element

map creates a new array with the result of transforming every element. The resulting array's length is always the same as the source array:

map transforms every element

const harga = [10000, 25000, 40000];
const pajak = 0.11;
 
const hargaFinal = harga.map((h) => h + h * pajak);
 
console.log(hargaFinal);
console.log(harga);

harga.map((h) => h + h * pajak) produces [11100, 27750, 44400] without changing the original harga. An example closer to the real world: mapping an array of objects into an array of specific properties, for instance a list of names from a list of users.

map on an array of objects

const pengguna = [
  { nama: "Arman", role: "Backend" },
  { nama: "Sari", role: "Frontend" },
];
 
const namaSaja = pengguna.map((p) => p.nama);
console.log(namaSaja);

pengguna.map((p) => p.nama) extracts the nama property from each object into the array ["Arman", "Sari"]. This plucking pattern is used everywhere to prepare display data.

#filter and find: Filtering and Searching

#filter Returns Everything That Matches

filter creates a new array containing the elements that satisfy a condition, with a length that may be shorter:

filter filters elements

const nilai = [45, 80, 92, 58, 73];
 
const lulus = nilai.filter((n) => n >= 75);
const gagal = nilai.filter((n) => n < 75);
 
console.log(lulus);
console.log(gagal);

nilai.filter((n) => n >= 75) returns [80, 92], and the opposite condition returns [45, 58, 73]. filter always returns an array — even if the result is empty, it's an empty array, not undefined.

#find Returns a Single First Element

find returns the first single element that satisfies a condition, or undefined if there is none:

find searches one element

const produk = [
  { nama: "Kopi", stok: 3 },
  { nama: "Teh", stok: 0 },
  { nama: "Susu", stok: 8 },
];
 
const habis = produk.find((p) => p.stok === 0);
console.log(habis);
 
const produkIdeal = produk.find((p) => p.stok > 5);
console.log(produkIdeal);

produk.find((p) => p.stok === 0) returns the Teh object — the first matching element. Meanwhile find((p) => p.stok > 5) returns Susu. Choose filter when there may be many results; choose find when you only need one.

#reduce: Combining Into a Single Value

#Calculating Totals

reduce is the most flexible and the most often misunderstood method. It combines all elements into a single value using an accumulator:

reduce sums elements

const angka = [10, 20, 30];
 
const total = angka.reduce((akumulator, nilai) => akumulator + nilai, 0);
 
console.log(total);

angka.reduce((akumulator, nilai) => akumulator + nilai, 0) starts with akumulator = 0, then adds each nilai one by one: 10, then 30, then 60. The second argument 0 is the accumulator's initial value. The final result is 60.

#reduce with Objects

reduce also fits aggregating arrays of objects, for example summing a particular property:

reduce on an array of objects

const pesanan = [
  { nama: "Kopi", harga: 15000, jumlah: 2 },
  { nama: "Teh", harga: 8000, jumlah: 3 },
];
 
const totalBayar = pesanan.reduce(
  (total, item) => total + item.harga * item.jumlah,
  0
);
 
console.log(totalBayar);

pesanan.reduce(...) sums harga * jumlah for each item: 15000 * 2 plus 8000 * 3, producing 54000. reduce replaces a whole class of manual accumulation loops — and the result is easier to read.

#some, every, and Chaining Methods

#Testing Conditions with some and every

some returns true if at least one element satisfies a condition; every returns true only if all elements satisfy it:

some and every

const skor = [70, 85, 90];
 
console.log(skor.some((s) => s > 80));
console.log(skor.every((s) => s > 80));

skor.some((s) => s > 80) produces true because a score above 80 exists, while every produces false because not all scores are above 80. some and every are concise replacements for loops with flag variables.

#Chaining Methods

Because each method returns a new array, results can be chained directly:

Chaining filter and map

const transaksi = [
  { item: "Kopi", jumlah: 2, harga: 15000 },
  { item: "Teh", jumlah: 1, harga: 8000 },
  { item: "Kue", jumlah: 3, harga: 20000 },
];
 
const totalBesar = transaksi
  .filter((t) => t.jumlah > 1)
  .map((t) => t.jumlah * t.harga)
  .reduce((a, b) => a + b, 0);
 
console.log(totalBesar);

The chain above selects transactions with a quantity greater than 1, computes each transaction's subtotal, then sums them all. transaksi.filter(...).map(...).reduce(...) produces 90000. Each step reads from top to bottom — this style is very expressive and easy to debug.

#Wrap-Up

Episode 9 equipped you with the four core array methods: map for one-to-one transformation, filter for filtering, find for locating a single element, and reduce for aggregation. You also learned some, every, and chaining methods into functional pipelines.

Key takeaways:

• map transforms every element and returns a new array of the same size.
• filter returns all elements that satisfy a condition.
• find returns the first matching element, or undefined.
• reduce combines all elements into one value via an accumulator.
• some and every test a condition against array elements.
• Methods that return arrays can be chained without mutating the original array.

In the next episode 10 we'll cover ES modules and using import/export — splitting code into small files that share code with each other via import and export, distinguishing named and default exports, and running modules in Node.js. This is how JavaScript projects grow without becoming a giant tangled ball.