JavaScript Array Methods: map, filter, reduce (Examples)

In application development, we almost always work with data in the form of arrays — a list of products, a list of users, a list of transactions, and so on. JavaScript provides three incredibly powerful array methods for processing data: map, filter, and reduce. Mastering all three will make your code far cleaner and more efficient than using a manual for loop.

Array.map() — Transforming Data

map() is used to create a new array by transforming each element of the source array. The source array is not modified.

const angka = [1, 2, 3, 4, 5];

// Multiply each number by 2
const hasilKali = angka.map(n => n * 2);
console.log(hasilKali); // [2, 4, 6, 8, 10]
console.log(angka);     // [1, 2, 3, 4, 5] — unchanged!

// A real example: Extract only the names from an array of objects
const pengguna = [
  { id: 1, nama: 'Andi', umur: 25 },
  { id: 2, nama: 'Budi', umur: 30 },
  { id: 3, nama: 'Citra', umur: 22 }
];

const daftarNama = pengguna.map(p => p.nama);
console.log(daftarNama); // ['Andi', 'Budi', 'Citra']

// A complex transformation — add a new property
const penggunaPlus = pengguna.map(p => ({
  ...p,
  status: p.umur >= 25 ? 'Senior' : 'Junior'
}));
console.log(penggunaPlus[0]); // { id: 1, nama: 'Andi', umur: 25, status: 'Senior' }

Array.filter() — Filtering Data

filter() creates a new array containing only the elements that meet a certain condition (the condition must return true or false):

const produk = [
  { nama: 'Laptop', harga: 8000000, stok: 5 },
  { nama: 'Mouse', harga: 150000, stok: 0 },
  { nama: 'Keyboard', harga: 500000, stok: 3 },
  { nama: 'Monitor', harga: 3000000, stok: 0 },
  { nama: 'Webcam', harga: 400000, stok: 7 }
];

// Filter products that are still in stock
const produkTersedia = produk.filter(p => p.stok > 0);
console.log(produkTersedia.length); // 3

// Filter products priced under 1 million
const produkMurah = produk.filter(p => p.harga < 1000000);
console.log(produkMurah.map(p => p.nama)); // ['Mouse', 'Keyboard', 'Webcam']

// Combining two conditions — in stock AND cheap
const produkMurahTersedia = produk.filter(p => p.stok > 0 && p.harga < 1000000);
console.log(produkMurahTersedia.map(p => p.nama)); // ['Keyboard', 'Webcam']

Array.reduce() — Accumulating a Value

reduce() is the most flexible method. It processes all elements of an array and produces a single value (which can be a number, string, object, or even a new array).

const angka2 = [10, 20, 30, 40, 50];

// Sum all the numbers
const total = angka2.reduce((akumulator, nilaiSaatIni) => {
  return akumulator + nilaiSaatIni;
}, 0); // 0 is the initial value of the accumulator

console.log(total); // 150

// Find the maximum value
const maks = angka2.reduce((max, n) => n > max ? n : max, angka2[0]);
console.log(maks); // 50

// Calculate the total shopping cost
const keranjang = [
  { nama: 'Kopi', harga: 25000, qty: 2 },
  { nama: 'Roti', harga: 15000, qty: 3 },
  { nama: 'Susu', harga: 18000, qty: 1 }
];

const totalHarga = keranjang.reduce((total, item) => {
  return total + (item.harga * item.qty);
}, 0);

console.log('Total spending: Rp', totalHarga.toLocaleString('id-ID')); // Rp 118.000

Counting Frequencies with reduce()

This is one of the very useful advanced examples — counting how many times each value appears:

const buah = ['apel', 'mangga', 'apel', 'pisang', 'mangga', 'apel'];

const hitungBuah = buah.reduce((akumulasi, buahSaatIni) => {
  akumulasi[buahSaatIni] = (akumulasi[buahSaatIni] || 0) + 1;
  return akumulasi;
}, {});

console.log(hitungBuah); // { apel: 3, mangga: 2, pisang: 1 }

Combining map, filter, and reduce (Method Chaining)

The true power of these three methods becomes clear when they are combined into a single flow:

const transaksi = [
  { id: 1, tipe: 'masuk', jumlah: 500000 },
  { id: 2, tipe: 'keluar', jumlah: 120000 },
  { id: 3, tipe: 'masuk', jumlah: 750000 },
  { id: 4, tipe: 'keluar', jumlah: 85000 },
  { id: 5, tipe: 'masuk', jumlah: 300000 }
];

// 1. filter() — take only incoming transactions
// 2. map() — take only the amounts
// 3. reduce() — sum them all
const totalPemasukan = transaksi
  .filter(t => t.tipe === 'masuk')
  .map(t => t.jumlah)
  .reduce((total, jumlah) => total + jumlah, 0);

console.log('Total Income: Rp', totalPemasukan.toLocaleString('id-ID'));
// Total Income: Rp 1.550.000

Conclusion

The map(), filter(), and reduce() methods are the three pillars of array data processing in modern JavaScript. Use map() to transform data, filter() to filter data based on a condition, and reduce() to accumulate data into a single value. Combining all three lets you process complex data with concise, easy-to-read code. Avoid the manual for loop when these three methods are already enough for your needs.