Looping Makin Efektif dengan Map di JavaScript

Looping Makin Efektif dengan Map di JavaScript
Photo by Blake Connally / Unsplash

Ketika kerja dengan array di JavaScript, sering kali kita butuh mengubah atau memanipulasi setiap elemen dalam array. Biasanya, kita bisa pakai forEach(), tapi kalau butuh array baru hasil transformasi, map() adalah solusi terbaik! 🚀

Metode map() memungkinkan kita mengubah setiap elemen dalam array tanpa mengubah array aslinya. Hasilnya? Kode lebih rapi, efisien, dan mudah dipahami.

Yuk, kita bahas lebih dalam tentang map() dan kenapa metode ini bisa bikin looping di JavaScript lebih efektif!

Apa Itu map()?

map() adalah metode bawaan JavaScript yang digunakan untuk membuat array baru dengan elemen yang telah dimodifikasi berdasarkan callback function yang kita berikan.

Sintaks Dasar:

let newArray = array.map(function(element, index, array) {
  // Operasi yang dilakukan pada setiap elemen
  return hasilBaru;
});

Parameter:

  • element → Elemen array yang sedang diproses. (Wajib)
  • index → Indeks dari elemen yang sedang diproses. (Opsional)
  • array → Array yang sedang diproses. (Opsional)

Return Value:

Mengembalikan array baru dengan hasil perubahan pada setiap elemen.

Bedanya map() vs forEach()

Fitur map() forEach()
Mengubah elemen array ✅ Ya, dan menghasilkan array baru ❌ Tidak, hanya menjalankan operasi
Mengembalikan array baru ✅ Ya ❌ Tidak
Bisa dihentikan di tengah loop ❌ Tidak ❌ Tidak

Jadi, kalau butuh array baru hasil looping, pakai map()! Kalau cuma buat nge-loop tanpa perlu array baru, pakai forEach().

Contoh Penggunaan map()

1. Mengubah Setiap Elemen dalam Array

Misalnya, kita punya daftar harga dan mau menaikkan semua harga sebesar 10%.

let harga = [10000, 15000, 20000];

let hargaNaik = harga.map(item => item * 1.1);

console.log(hargaNaik);

Output:

[11000, 16500, 22000]

Array harga tetap sama, sedangkan hargaNaik menyimpan hasil perubahan.

2. Konversi Array Angka ke String

Misalnya kita punya daftar angka dan ingin mengubahnya jadi string dengan prefix tertentu.

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

let angkaLabel = angka.map(num => `Nomor: ${num}`);

console.log(angkaLabel);

Output:

["Nomor: 1", "Nomor: 2", "Nomor: 3", "Nomor: 4", "Nomor: 5"]

3. Ambil Properti Tertentu dari Array Objek

Misalnya kita punya daftar pengguna dalam bentuk array objek, dan kita hanya mau mengambil namanya.

let users = [
  { id: 1, name: "Andi" },
  { id: 2, name: "Budi" },
  { id: 3, name: "Citra" }
];

let daftarNama = users.map(user => user.name);

console.log(daftarNama);

Output:

["Andi", "Budi", "Citra"]

4. Konversi Nama ke Huruf Besar

Misalnya kita punya daftar nama dan ingin mengubahnya semua jadi huruf besar.

let nama = ["andi", "budi", "citra"];

let namaBesar = nama.map(n => n.toUpperCase());

console.log(namaBesar);

Output:

["ANDI", "BUDI", "CITRA"]

5. Menambah Properti Baru dalam Array Objek

Misalnya kita punya daftar produk dan ingin menambahkan properti "stok" ke setiap produk.

let produk = [
  { nama: "Laptop", harga: 10000000 },
  { nama: "Mouse", harga: 150000 }
];

let produkStok = produk.map(item => ({ ...item, stok: 100 }));

console.log(produkStok);

Output:

[
  { nama: "Laptop", harga: 10000000, stok: 100 },
  { nama: "Mouse", harga: 150000, stok: 100 }
]

Kapan Sebaiknya Pakai map()?

  • Kalau butuh array baru yang hasilnya berasal dari modifikasi array lama.
  • Kalau mau ubah format data, misalnya dari array objek ke array string.
  • Kalau ingin memproses setiap elemen dengan hasil yang disimpan dalam array baru.

Kapan Jangan Pakai map()?

  • Kalau tidak butuh array baru, lebih baik pakai forEach().
  • Kalau butuh berhenti di tengah loop, lebih baik pakai for...of.
  • Kalau ingin mengubah array asli langsung, lebih baik pakai forEach() atau loop biasa.

Kesimpulan

  • map() adalah metode powerful buat looping array di JavaScript.
  • Berbeda dengan forEach(), metode ini mengembalikan array baru tanpa mengubah array asli.
  • Cocok banget buat transformasi data, seperti mengubah format angka, objek, atau teks.
  • Gabungkan map() dengan metode lain seperti filter() atau reduce() buat hasil lebih optimal.