Array Method JavaScript: map, filter, reduce

Pelajari cara menggunakan method array JavaScript map, filter, dan reduce untuk mengolah data. Cocok untuk pemula yang ingin menguasai JavaScript dari nol.

Keywords: array method javascript, map filter reduce javascript, map js, filter js, reduce js, array javascript, fungsi array js

Pernahkah kamu punya daftar data lalu ingin mengubah, memilih sebagian, atau menghitung hasil akhirnya?
👉 Misalnya, daftar angka yang ingin dikalikan 2, memilih angka genap saja, atau menjumlahkan semua angka.

Di JavaScript, semua itu bisa dilakukan dengan mudah menggunakan method array populer:

• map()
• filter()
• reduce()

Kalau kamu menguasai 3 metode ini, kamu akan terlihat seperti developer pro saat mengolah data.

Apa Itu Array Method?

Array di JavaScript punya banyak method (fungsi bawaan).
Tiga yang paling sering dipakai untuk mengolah data adalah:

• map → membuat array baru dengan memodifikasi setiap elemen
• filter → membuat array baru dengan menyaring elemen tertentu
• reduce → mengurangi array menjadi satu nilai akhir (jumlah, rata-rata, dsb.)

1. map() – Transformasi Data

map() digunakan untuk membuat array baru dengan memproses setiap item.

Sintaks:

array.map(function(element, index, array) {
  // return hasil transformasi
});

array.map(function(element, index, array) {
  // return hasil transformasi
});

Contoh: Kalikan semua angka dengan 2

let angka = [1, 2, 3, 4, 5];
let hasil = angka.map(num => num * 2);

console.log(hasil); // [2, 4, 6, 8, 10]

let angka = [1, 2, 3, 4, 5];
let hasil = angka.map(num => num * 2);

console.log(hasil); // [2, 4, 6, 8, 10]

Kegunaan map()

✔ Mengubah semua nilai sekaligus
✔ Transformasi data tanpa mengubah array asli

2. filter() – Menyaring Data

filter() membuat array baru berisi elemen yang lolos kondisi tertentu.

Sintaks:

array.filter(function(element, index, array) {
  return kondisi; // true atau false
});

array.filter(function(element, index, array) {
  return kondisi; // true atau false
});

Contoh: Ambil angka genap saja

let angka = [1, 2, 3, 4, 5];
let genap = angka.filter(num => num % 2 === 0);

console.log(genap); // [2, 4]

let angka = [1, 2, 3, 4, 5];
let genap = angka.filter(num => num % 2 === 0);

console.log(genap); // [2, 4]

Kegunaan filter()

✔ Menyaring data berdasarkan syarat
✔ Membuat subset array

3. reduce() – Menghitung Nilai Akhir

reduce() digunakan untuk menghasilkan satu nilai dari seluruh array.

Sintaks:

array.reduce(function(accumulator, currentValue, index, array) {
  return hasil;
}, nilaiAwal);

array.reduce(function(accumulator, currentValue, index, array) {
  return hasil;
}, nilaiAwal);

• accumulator → penampung hasil sementara
• currentValue → nilai elemen saat ini
• nilaiAwal (opsional) → nilai awal accumulator

Contoh: Jumlahkan semua angka

let angka = [1, 2, 3, 4, 5];
let total = angka.reduce((acc, num) => acc + num, 0);

console.log(total); // 15

let angka = [1, 2, 3, 4, 5];
let total = angka.reduce((acc, num) => acc + num, 0);

console.log(total); // 15

Kegunaan reduce()

✔ Menjumlahkan nilai
✔ Menghitung rata-rata
✔ Mengubah array menjadi objek

Tabel Perbandingan map, filter, reduce

Studi Kasus Nyata

Kasus 1 – Daftar Harga Produk

let harga = [1000, 2000, 3000];

// Naikkan semua harga 10%
let naik = harga.map(h => h * 1.1); 
console.log(naik); // [1100, 2200, 3300]

// Ambil harga di atas 2000
let mahal = harga.filter(h => h > 2000);
console.log(mahal); // [3000]

// Hitung total harga
let total = harga.reduce((acc, h) => acc + h, 0);
console.log(total); // 6000

let harga = [1000, 2000, 3000];

// Naikkan semua harga 10%
let naik = harga.map(h => h * 1.1); 
console.log(naik); // [1100, 2200, 3300]

// Ambil harga di atas 2000
let mahal = harga.filter(h => h > 2000);
console.log(mahal); // [3000]

// Hitung total harga
let total = harga.reduce((acc, h) => acc + h, 0);
console.log(total); // 6000

Kasus 2 – Data User

let users = [
  { nama: "Budi", umur: 25 },
  { nama: "Siti", umur: 17 },
  { nama: "Andi", umur: 30 }
];

// Ambil nama saja
let namaUser = users.map(u => u.nama);
console.log(namaUser); // ["Budi", "Siti", "Andi"]

// Filter user yang dewasa (umur >= 18)
let dewasa = users.filter(u => u.umur >= 18);
console.log(dewasa); // [Budi, Andi]

// Hitung total umur
let totalUmur = users.reduce((acc, u) => acc + u.umur, 0);
console.log(totalUmur); // 72

let users = [
  { nama: "Budi", umur: 25 },
  { nama: "Siti", umur: 17 },
  { nama: "Andi", umur: 30 }
];

// Ambil nama saja
let namaUser = users.map(u => u.nama);
console.log(namaUser); // ["Budi", "Siti", "Andi"]

// Filter user yang dewasa (umur >= 18)
let dewasa = users.filter(u => u.umur >= 18);
console.log(dewasa); // [Budi, Andi]

// Hitung total umur
let totalUmur = users.reduce((acc, u) => acc + u.umur, 0);
console.log(totalUmur); // 72

Best Practice Penggunaan

✔ Gunakan map saat ingin mengubah semua elemen.
✔ Gunakan filter saat ingin menyaring elemen tertentu.
✔ Gunakan reduce saat ingin menghasilkan satu nilai akhir.
✔ Selalu gunakan arrow function agar kode lebih ringkas.

FAQ

1. Apa bedanya map dan forEach?

• map menghasilkan array baru, sedangkan forEach tidak.

2. Kapan sebaiknya pakai reduce?
Jika hasil akhirnya bukan array, tapi berupa satu nilai (misalnya jumlah, rata-rata, object).

3. Apakah map, filter, reduce mengubah array asli?
Tidak. Mereka selalu menghasilkan array baru (kecuali reduce, yang menghasilkan satu nilai).

Kesimpulan

• map() → transformasi array menjadi array baru.
• filter() → menyaring elemen tertentu.
• reduce() → menghasilkan satu nilai dari array.
• Tiga method ini adalah alat wajib untuk mengolah data di JavaScript.

JavaScript #Array #Map #Filter #Reduce #Coding