Array.map: Transformasi

Analogi: Pabrik dengan Ban Berjalan

Bayangkan pabrik roti. Adonan mentah masuk di satu ujung ban berjalan, melewati mesin pemanggang, dan keluar sebagai roti matang di ujung lain. Jumlah roti yang keluar SAMA dengan jumlah adonan yang masuk, hanya bentuknya berubah. map adalah ban berjalan itu: tiap elemen array masuk ke "mesin" (fungsi callback), keluar sebagai nilai baru, dan hasilnya dikumpulkan menjadi array BARU dengan jumlah elemen yang SAMA. Adonan aslinya (array asli) tidak disentuh sama sekali. Kalau pabriknya mengubah 4 adonan, keluar 4 roti. Kalau map memproses 4 elemen, keluar array 4 elemen. Selalu sama jumlahnya, hanya isinya yang bertransformasi.

Kenapa map Ada?

Pola "ubah setiap elemen" adalah pola paling sering di pemrograman: data mentah dari API diubah jadi tampilan, daftar harga diubah jadi label Rupiah, nilai ujian diubah jadi huruf mutu. Cara lama memakai loop manual: siapkan array kosong, loop, push satu per satu. Bisa, tapi bertele-tele dan rawan salah (lupa push, salah index). map mengemas pola itu menjadi satu baris deklaratif: "ubah tiap elemen dengan aturan ini". Kodenya lebih pendek, niatnya lebih jelas ("ini transformasi, bukan sekadar loop"), dan karena array asli tidak diubah, datanya aman dari efek samping. Di React dan framework modern, map bahkan adalah CARA STANDAR merender daftar ke layar.

Contoh 1: Transformasi Sederhana

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

// Tiap elemen dikali 2, hasilnya jadi array baru
const dobel = angka.map(function(n) {
  return n * 2;
});
console.log(dobel); // [2, 4, 6, 8]
console.log(angka); // [1, 2, 3, 4] (ASLI TIDAK BERUBAH!)

// Versi arrow yang lebih ringkas (bentuk paling umum di kode nyata)
const kuadrat = angka.map(n => n * n);
console.log(kuadrat); // [1, 4, 9, 16]

Perhatikan: callback menerima tiap elemen satu per satu (di sini bernama n), dan NILAI KEMBALI callback menjadi elemen di array baru. Kalau callback tidak me-return apa-apa, array barunya berisi undefined semua. Panjang array hasil SELALU sama dengan panjang array asli: 4 masuk, 4 keluar.

Contoh 2: Kasus Nyata, Data API jadi Tampilan

Inilah map di habitat aslinya: mengubah data mentah menjadi sesuatu yang siap ditampilkan.

// Data mentah dari server (mis. API toko online)
const produk = [
  { nama: "Kopi", harga: 15000 },
  { nama: "Teh", harga: 8000 },
  { nama: "Susu", harga: 12000 },
];

// 1. Ekstrak satu field jadi array sederhana
const daftarNama = produk.map(p => p.nama);
console.log(daftarNama); // ["Kopi", "Teh", "Susu"]

// 2. Format jadi label siap tampil
const labelHarga = produk.map(p => p.nama + ": Rp" + p.harga);
console.log(labelHarga);
// ["Kopi: Rp15000", "Teh: Rp8000", "Susu: Rp12000"]

// 3. Tambah pajak 11% jadi array object baru
const denganPajak = produk.map(p => {
  return {
    nama: p.nama,
    hargaAkhir: p.harga * 1.11,
  };
});
console.log(denganPajak[0]); // { nama: "Kopi", hargaAkhir: 16650 }
console.log(produk[0].harga); // 15000 (data asli tetap murni!)

Contoh ketiga menunjukkan kekuatan penuh: tiap object diubah menjadi object BARU. Data asli produk tetap murni, sehingga kalau ada bug di tampilan, kamu tahu sumber datanya tidak tercemar. Prinsip "jangan rusak data asli" ini adalah fondasi gaya pemrograman modern.

Kesalahan Umum Pemula

1. Lupa return di callback (hasil jadi undefined semua).

const angka = [1, 2, 3];

// SALAH: kurung kurawal tanpa return
const salah = angka.map(n => {
  n * 10;
});
console.log(salah); // [undefined, undefined, undefined]

// BENAR: return eksplisit...
const benar1 = angka.map(n => {
  return n * 10;
});

// ...atau tanpa kurung kurawal (return implisit)
const benar2 = angka.map(n => n * 10);
console.log(benar2); // [10, 20, 30]

Ini bug map nomor satu dan sangat sunyi: tidak error, hanya hasilnya salah semua.

2. Memakai map untuk efek samping (seharusnya forEach).

const angka = [1, 2, 3];

// SALAH: map dipakai cuma untuk console.log, hasilnya dibuang
angka.map(n => console.log(n)); // array [undefined, undefined, undefined] terbuang

// BENAR: untuk aksi tanpa hasil, pakai forEach
angka.forEach(n => console.log(n));

Aturan: butuh ARRAY BARU sebagai hasil? Pakai map. Cuma mau "lakukan sesuatu" untuk tiap elemen tanpa butuh hasil? Pakai forEach.

3. Mengira map mengubah array asli.

const harga = [10000, 20000];

// SALAH sangka: dikira harga ikut berubah
harga.map(h => h * 2);
console.log(harga); // [10000, 20000] TETAP! hasil map-nya terbuang

// BENAR: tangkap hasil map ke variabel baru
const hargaNaik = harga.map(h => h * 2);
console.log(hargaNaik); // [20000, 40000]

map TIDAK PERNAH mengubah array asli. Kalau hasilnya tidak ditangkap, komputasinya sia-sia.

4. Memakai map saat butuh jumlah elemen berbeda (seharusnya filter).

const nilai = [55, 80, 45, 90];

// SALAH: memaksa map untuk menyaring (jelek dan membingungkan)
const lulus = nilai.map(n => {
  if (n >= 70) return n;
});
console.log(lulus); // [undefined, 80, undefined, 90]

// BENAR: saring dulu dengan filter, baru transform dengan map
const lulusBenar = nilai.filter(n => n >= 70).map(n => n + 5);
console.log(lulusBenar); // [85, 95]

Ringkasan

map adalah ban berjalan transformasi: tiap elemen dilewatkan ke callback, nilai kembali callback dikumpulkan menjadi array BARU dengan panjang yang SAMA, array asli tidak tersentuh. Habitatnya: mengubah data mentah (API, database) menjadi bentuk siap tampil. Selalu return sesuatu di callback, tangkap hasilnya ke variabel, pakai forEach untuk efek samping murni, dan pasangkan dengan filter saat butuh menyaring dulu. Kuasai map karena ia adalah method array yang paling sering kamu tulis dalam karier JavaScript-mu.