Method Array JavaScript: map, filter, reduce, dan Lainnya

Array Punya Kotak Perkakas

Array JavaScript membawa banyak method bawaan. Sebagian besar hal yang biasanya kamu tulis dengan loop for, seperti mengubah nilai, memilih sebagian, atau menjumlahkannya, punya method yang melakukannya dalam satu baris, lebih enak dibaca, dan mudah digabungkan dengan method lain.

Bekal awalnya tiga method: map, filter, dan reduce. Kuasai ketiganya beserta beberapa kerabatnya, dan kode yang penuh loop akan menyusut menjadi sesuatu yang bisa kamu pahami sekilas.

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

const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const total = nums.reduce((sum, n) => sum + n, 0);

console.log(doubled);
console.log(evens);
console.log(total);

Setiap method menerima callback dan mengembalikan sesuatu. Tidak ada satu pun yang mengubah nums. Ini pola yang sebaiknya kamu pahami sejak awal.

map: Mengubah Setiap Elemen

map menerima sebuah fungsi dan memanggilnya pada setiap elemen, lalu mengumpulkan nilai kembaliannya ke array baru dengan panjang yang sama. Pakai saat kamu ingin "satu output untuk setiap input".

const users = [
    { name: "Ada", age: 36 },
    { name: "Boris", age: 29 },
    { name: "Chen", age: 41 },
];

const names = users.map(user => user.name);
const labels = users.map(user => `${user.name} (${user.age})`);

console.log(names);
console.log(labels);

Callback juga menerima index sebagai argumen kedua kalau kamu membutuhkannya: arr.map((item, i) => ...). Abaikan saja kalau tidak perlu.

Satu kesalahan umum: memakai map padahal kamu tidak butuh array yang dikembalikan. Kalau kamu hanya ingin mencetak setiap item atau menyimpannya ke database, itu tugas forEach atau loop biasa.

filter: Menyimpan yang Cocok

filter memanggil sebuah predikat, yaitu fungsi yang mengembalikan true atau false, pada setiap elemen dan menyimpan elemen yang hasilnya truthy. Array barunya punya panjang yang sama atau lebih pendek.

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
    { name: "Chair", price: 90, inStock: true },
];

const available = products.filter(p => p.inStock);
const affordable = products.filter(p => p.price < 50);

console.log(available);
console.log(affordable);

map dan filter mudah dirangkai. Baca rangkaiannya dari kiri ke kanan seperti sebuah pipeline:

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
];

const inStockNames = products
    .filter(p => p.inStock)
    .map(p => p.name);

console.log(inStockNames);

Filter dulu, baru map. Dengan begitu map hanya berjalan pada elemen yang lolos.

reduce: Meringkas Array Menjadi Satu Nilai

reduce adalah yang paling umum di antara ketiganya. Kamu memberinya fungsi reducer (accumulator, item) => newAccumulator dan nilai awal. Method ini menelusuri array, memberikan setiap item ke reducer bersama akumulator sejauh ini, lalu mengembalikan nilai akhir akumulatornya.

const nums = [3, 1, 4, 1, 5, 9, 2, 6];

const sum = nums.reduce((acc, n) => acc + n, 0);
const max = nums.reduce((acc, n) => (n > acc ? n : acc), -Infinity);

console.log(sum);
console.log(max);

Hasilnya tidak harus berupa angka. Bisa berupa objek, array lain, string, apa pun yang kamu bangun:

const people = [
    { name: "Ada", team: "red" },
    { name: "Boris", team: "blue" },
    { name: "Chen", team: "red" },
    { name: "Dari", team: "blue" },
];

const byTeam = people.reduce((acc, person) => {
    (acc[person.team] ??= []).push(person.name);
    return acc;
}, {});

console.log(byTeam);

Selalu berikan nilai awal (argumen kedua). Tanpa nilai awal, reduce memakai elemen pertama sebagai akumulator awal, yang gagal pada array kosong dan sering kali memang bukan yang kamu inginkan.

reduce sangat kuat, tetapi bisa sulit dibaca kalau logikanya rumit. Kalau reducer kamu lebih dari beberapa baris, loop for...of biasa sering kali lebih jelas.

forEach: Efek Samping, Tanpa Nilai Kembalian

forEach mirip map tetapi tanpa array yang dikembalikan. Method ini ada untuk saat kamu ingin melakukan sesuatu pada setiap item, seperti mencetaknya, memanggil API, atau memperbarui DOM, dan tidak butuh koleksi baru.

const messages = ["hi", "hello", "hey"];

messages.forEach((msg, i) => {
    console.log(`${i}: ${msg}`);
});

Dua hal yang perlu kamu ketahui:

• forEach mengembalikan undefined. Kamu tidak bisa merangkai .map() setelahnya.
• Kamu tidak bisa keluar lebih awal dari forEach dengan break. Kalau butuh berhenti lebih awal, pakai for...of atau some/every.

Kalau kamu mendapati dirimu menulis arr.forEach(x => results.push(transform(x))), itu sebenarnya map.

find dan findIndex: Cukup Satu Saja

find mengembalikan elemen pertama yang cocok dengan predikat, atau undefined kalau tidak ada yang cocok. findIndex mengembalikan index-nya (atau -1).

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Boris" },
    { id: 3, name: "Chen" },
];

const boris = users.find(u => u.name === "Boris");
const borisIndex = users.findIndex(u => u.name === "Boris");

console.log(boris);
console.log(borisIndex);

find berhenti di kecocokan pertama. Jangan pakai filter(...)[0], karena cara itu memindai seluruh array hanya untuk membuang sisanya.

some dan every: Pertanyaan Boolean

some mengembalikan true kalau setidaknya satu elemen lolos pengujian. every mengembalikan true hanya kalau semuanya lolos.

const scores = [82, 91, 77, 64, 88];

console.log(scores.some(s => s >= 90));   // true - at least one A
console.log(scores.every(s => s >= 60));  // true - nobody failed
console.log(scores.every(s => s >= 80));  // false

Keduanya melakukan short-circuit: some berhenti di true pertama, every berhenti di false pertama. Keduanya alat yang tepat untuk pertanyaan "apakah ada yang…" dan "apakah semuanya…".

slice vs splice: Menyalin vs Memotong

Keduanya terdengar mirip, tetapi cara kerjanya sangat berbeda.

slice(start, end) mengembalikan salinan dangkal dari sebagian array. Method ini tidak mengubah apa pun. end tidak ikut disertakan; hilangkan saja kalau ingin sampai ke akhir array.

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
const last = letters.slice(-2);

console.log(middle);
console.log(last);
console.log(letters);  // unchanged

splice(start, deleteCount, ...items) mengubah array langsung di tempat. Method ini menghapus deleteCount elemen mulai dari start, bisa juga menyisipkan elemen baru, lalu mengembalikan elemen yang dihapus.

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2, "X", "Y", "Z");

console.log(letters);   // ["a", "X", "Y", "Z", "d", "e"]
console.log(removed);   // ["b", "c"]

Cara mengingatnya: slice itu aman (menyalin), splice membedah array langsung di tempat.

Mengubah Array Asli vs Tidak

Perbedaan ini penting. Kode yang tanpa sengaja mengubah array yang dipakai bersama adalah salah satu bug yang paling menyebalkan untuk dilacak.

Mengubah array asli (memodifikasi aslinya, biasanya mengembalikan sesuatu yang lain):

• push, pop, shift, unshift
• splice, sort, reverse
• fill, copyWithin

Tidak mengubah array asli (mengembalikan array atau nilai baru, aslinya tidak tersentuh):

• map, filter, slice, concat
• flat, flatMap
• find, findIndex, some, every, includes, indexOf
• reduce, reduceRight

Dua yang perlu diwaspadai adalah sort dan reverse: keduanya terlihat tidak berbahaya tetapi diam-diam mengubah array. Kalau kamu butuh salinan yang sudah diurutkan, pakai slice dulu:

const nums = [3, 1, 4, 1, 5];

const sorted = nums.slice().sort((a, b) => a - b);

console.log(sorted);
console.log(nums);  // unchanged

JS modern juga punya kembaran yang tidak mengubah array asli: toSorted, toReversed, toSpliced, dan with. Semuanya mengembalikan array baru dan membiarkan aslinya. Didukung di semua runtime saat ini, jadi pakai saja kalau tersedia.

const nums = [3, 1, 4, 1, 5];

console.log(nums.toSorted((a, b) => a - b));
console.log(nums.toReversed());
console.log(nums);  // still [3, 1, 4, 1, 5]

flat dan flatMap

flat meratakan array bersarang satu tingkat (atau lebih, dengan argumen kedalaman). flatMap adalah map yang diikuti flat satu tingkat, berguna saat setiap item menghasilkan nol output atau lebih.

const nested = [[1, 2], [3, 4], [5]];
console.log(nested.flat());

const sentences = ["hello world", "how are you"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words);

flatMap adalah cara rapi untuk "memekarkan" item, satu input menjadi banyak output, tanpa langkah flat() tambahan.

Menggabungkan Semuanya

Contoh kecil yang realistis. Dari daftar pesanan, hitung total pendapatan dari pesanan yang selesai dengan nilai di atas $50:

const orders = [
    { id: 1, total: 120, status: "completed" },
    { id: 2, total: 30, status: "completed" },
    { id: 3, total: 200, status: "pending" },
    { id: 4, total: 75, status: "completed" },
    { id: 5, total: 45, status: "completed" },
];

const revenue = orders
    .filter(o => o.status === "completed")
    .filter(o => o.total > 50)
    .reduce((sum, o) => sum + o.total, 0);

console.log(revenue);

Tiga method, satu pipeline, tanpa urusan pencatatan loop. Setiap langkah menjelaskan apa yang dilakukannya. Kamu bisa menggabungkan kedua panggilan filter, tetapi memisahkannya tetap enak dibaca dan kadang membantu saat kamu sedang debug.

Berikutnya: Map dan Set

Array menangani urutan data dengan baik, tetapi kurang praktis saat kamu butuh pencarian cepat berdasarkan key atau koleksi nilai yang unik. JavaScript punya dua struktur data bawaan untuk tugas-tugas itu, yaitu Map dan Set, dan keduanya dibahas di halaman berikutnya.