dibimbing.id - forEach Array JavaScript: Pengertian, Sintaks, Contoh

forEach Array JavaScript: Pengertian, Sintaks, Contoh

Irhan Hisyam Dwi Nugroho

10 September 2025

383

Image Banner

Dalam JavaScript, penggunaan foreach array JavaScript menjadi cara populer untuk memproses data dalam array. Metode ini praktis digunakan saat ingin menjalankan aksi pada setiap elemen.

Metode forEach memungkinkan kita menjalankan fungsi tanpa perlu membuat loop manual. Simpel, efisien, dan mudah dibaca.

Yuk simak penjelasan lengkap tentang forEach, mulai dari pengertian, sintaks, parameter, hingga contoh penggunaannya.


Apa itu forEach Array JavaScript?

forEach adalah metode bawaan pada array di JavaScript yang digunakan untuk menjalankan fungsi tertentu pada setiap elemen array, satu per satu. 

Metode ini sangat membantu saat kamu ingin melakukan sesuatu terhadap setiap item dalam array tanpa harus membuat loop seperti for atau while. 

Berbeda dengan metode lain seperti map, forEach tidak mengembalikan nilai baru—fungsinya murni untuk mengeksekusi aksi. 

Karena itu, forEach cocok digunakan saat kamu ingin melakukan efek samping, seperti mencetak ke konsol atau mengubah variabel di luar fungsi.

Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat


Sintaks Dasar forEach

Setelah memahami apa itu forEach, sekarang kita masuk ke cara penulisannya. Sintaks dasar forEach sebenarnya cukup sederhana dan mudah diingat, bahkan untuk pemula.

Sintaks Dasar:

array.forEach(function(currentValue, index, array) {

 // aksi yang dijalankan untuk setiap elemen

});

Atau bisa juga ditulis lebih ringkas menggunakan arrow function:

array.forEach((currentValue, index, array) => {

 // aksi yang dijalankan

});

Penjelasan:

  1. currentValue adalah elemen array yang sedang diproses.
  2. index (opsional) menunjukkan posisi elemen dalam array.
  3. array (opsional) adalah array itu sendiri yang sedang diiterasi.

Baca juga: Ingin Belajar Front End Development? Cek Roadmapnya di sini!


Parameters dalam forEach

Berikut adalah tabel parameters dalam forEach JavaScript yang sudah disesuaikan dari gambar:

Parameter

Deskripsi


callback

Fungsi yang dijalankan pada setiap elemen array.

element

Elemen saat ini yang sedang diproses dalam array.

index (opsional)

Indeks dari elemen saat ini. Index dimulai dari 0.

array (opsional)

Array yang sedang digunakan dalam forEach().

thisArg (opsional)

Nilai yang akan digunakan sebagai this saat menjalankan callback.

Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024


Contoh Penggunaan forEach

Sumber: Canva

Setelah tahu cara kerja forEach, yuk lihat contoh penggunaannya dari yang simpel sampai yang lengkap dengan semua parameter.

Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024


1. Menampilkan setiap elemen dalam array

Ini adalah penggunaan paling dasar dari forEach. Kamu hanya butuh mengambil nilai dari tiap elemen dan menjalankan fungsi di dalamnya. Cocok digunakan saat ingin menampilkan semua isi array tanpa perlu tahu indeksnya.

const buah = ['apel', 'jeruk', 'mangga'];


buah.forEach(function(element) {

 console.log(element);

});

Output:

apel

jeruk

mangga


2. Menampilkan elemen beserta indeksnya

Kadang kita perlu tahu posisi setiap elemen dalam array. Dengan menambahkan parameter indeks, kamu bisa tahu urutan data di dalam array. Ini berguna untuk debugging atau sekadar menampilkan data dengan nomor urut.

const warna = ['merah', 'biru', 'kuning'];


warna.forEach(function(element, index) {

 console.log(index + ': ' + element);

});

Output:

0: merah

1: biru

2: kuning


3. Mengakses elemen, indeks, dan array sekaligus

Kalau kamu ingin tahu elemen, posisinya, dan array secara keseluruhan, kamu bisa pakai ketiga parameter sekaligus. 

Ini biasanya digunakan saat kamu perlu membandingkan atau memproses data lebih dalam. Cocok juga untuk keperluan analisis data langsung dalam loop.

const angka = [10, 20, 30];


angka.forEach(function(element, index, array) {

 console.log('Elemen ke-' + index + ' adalah ' + element + ' dari array [' + array + ']');

});

Output:

Elemen ke-0 adalah 10 dari array [10,20,30]

Elemen ke-1 adalah 20 dari array [10,20,30]

Elemen ke-2 adalah 30 dari array [10,20,30]


4. Menggunakan arrow function agar lebih ringkas

Kalau kamu hanya butuh parameter elemen dan ingin kode yang lebih pendek, kamu bisa gunakan arrow function. 

Ini adalah gaya penulisan modern yang sering dipakai di proyek JavaScript saat ini. Sangat cocok untuk fungsi yang pendek dan langsung.

const kota = ['Jakarta', 'Bandung', 'Surabaya'];


kota.forEach(element => console.log(element));

Output:

Jakarta

Bandung

Surabaya


Ingin Jadi Full Stack Web Developer?

Kalau kamu sudah mulai paham forEach di JavaScript, itu tanda kamu siap naik level. Tapi untuk jadi Web Developer profesional, kamu butuh lebih dari sekadar satu fitur.

Yuk, lanjutkan belajar di Bootcamp Full Stack Web Developer dari dibimbing.id! Kamu akan pelajari JavaScript lebih dalam, dari dasar seperti forEach, sampai membangun web lengkap dengan HTML, CSS, React, dan Node.js.

Belajar langsung dari mentor berpengalaman, dengan kurikulum praktis yang disiapkan untuk kebutuhan industri. Dengan 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu makin terbuka.

Daftar sekarang disini dan mulai perjalananmu jadi Full Stack Web Developer.

#BimbingSampeJadi!


Referensi

  1. JavaScript Array forEach() Method [Buka]
Author Image

Irhan Hisyam Dwi Nugroho

Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.

Hi!👋
Kalau kamu butuh bantuan,
hubungi kami via WhatsApp ya!