Perbedaan map() dan forEach() di JavaScript: Jangan Tertukar!

Pertanyaan Jebakan Interview JavaScript

Saat kamu melamar pekerjaan sebagai Frontend Developer, salah satu pertanyaan paling klasik yang akan ditanyakan *Senior Engineer* adalah: "Coba jelaskan apa bedanya .map() dan .forEach()?"

Pemula sering kali menganggap keduanya sama karena sama-sama berfungsi untuk melakukan looping (perulangan) pada sebuah Array. Namun, cara kerja internal dan hasil akhirnya sangatlah berbeda.

1. forEach() - Sang Pekerja Kasar

Fungsi .forEach() bertugas mengeksekusi sebuah perintah untuk setiap elemen di dalam Array, tapi ia TIDAK mengembalikan nilai apapun (Return undefined).

• Sifat: Ia tidak membuat Array baru. Ia murni hanya melakukan aksi (Side Effect) seperti mencetak ke console atau menyimpan data ke database.
• Kapan Digunakan: Gunakan saat kamu hanya ingin "melakukan sesuatu" pada tiap elemen tanpa peduli hasil akhirnya.

const angka = [1, 2, 3];
const hasil = angka.forEach(num => console.log(num * 2));

console.log(hasil); // Output: undefined (Tidak ada data yang disimpan!)

2. map() - Sang Mesin Pencetak

Fungsi .map() juga mengeksekusi perintah untuk setiap elemen, TAPI ia wajib mengembalikan (Return) sebuah ARRAY BARU yang isinya adalah hasil transformasi dari Array aslinya.

• Sifat: Aman dan tidak merusak (Non-destructive). Panjang Array yang dihasilkan akan persis sama dengan panjang Array asalnya.
• Kapan Digunakan: Digunakan saat kamu ingin mengubah bentuk data, atau saat kamu ingin merender daftar elemen HTML/UI di dalam React (mengubah data JSON menjadi tag
• ).

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

console.log(hasil); // Output: [2, 4, 6] (Data baru sukses tercetak!)

Kesimpulan

Di ekosistem modern seperti React, kamu akan menghabiskan 95% waktumu menggunakan map() karena sifatnya yang fungsional dan aman. Kamu TIDAK BISA merender list komponen React menggunakan forEach karena React membutuhkan data yang di-return (dikembalikan) untuk digambar ke layar.