Array: Penggunaan forEach()

Menurut saya, pengolahan data yang banyak / heterogen dalam sebuah variable memang lebih baik menggunakan array.

Dalam sebuah prakteknya kita akan menjumpai kasus dimana sebuah array harus di tampilkan secara berurutan.

Hal ini dapat dilakukan dengan menggunakan looping dengan perintah for. Anda dapat perhatikan kode berikut ini

const myArr = [3, 15, 9]

for (let index = 0; index < myArr.length; index++) {
    const element = myArr[index]
    console.log(element)
}

/* 
output
-------------- 
3
15
9
*/

Akan tetapi mari kita bandingkan kode diatas dengan menggunakan method foreEach() dalam menampilkan dan mengurutkan data pada array.

const myArr = [3, 15, 9]

myArr.forEach((element) => { console.log(element) })

/* 
output
-------------- 
3
15
9
*/

bagaimana?….

Rasanya lebih simpel menggunakan forEach() dalam menampilkan data secara berurutan, selain itu juga membuat kode kita jadi kelihatan lebih bersih. Mari kita bahas lebih lanjut tentang foreEach().

Pengertian dan Cara kerja forEach()

Sebelumnya kita telah mempelajari method map(), dalam beberapa kasus yang telah saya temui pada salah satu forum online ada seseorang yang kesulitan membedakan antara method map() dan forEach().

Lalu apa yang menjadi perbedaan antara map() dengan forEach()?

Method map() akan membentuk array baru setelah melakukan perulangan terhadap array berdasarkan kriteria yang ditetukan dalam callback.

Sedangkan method forEach() hanya melakukan perulangan terhadap array dan menampilkan data yang ada pada setiap element secara berurutan.

Jadi dari penjelasan singkat diatas anda dapat memahami perbedaannya. Kemudian syntak dari forEach sebagai berikut.

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

Keterangan:

callback: fungsi untuk mengeksekusi array agar untuk dilakukan perulangan dan menampilkannya secara berurutan

curretValue: Adalah element yang dieksekusi

index: penggunaannya optional, dan menyatakan index dari element yang di eksekusi

array: penggunaan parameter bersifat optional, dan parameter ini menyatakan array yang dieksekusi.

thisArg: Penggunaanya optional dan value ini menyatakan this dalam fungsi forEach

Dan sekarang kita akan melanjutkan pembahasan bagaimana cara kerja dari method forEach(). Anda dapat perhatikan kode berikut ini

const menu = ['nasi padang', 'soto betawi', 'sate madura']

menu.forEach(makanan => {
   console.log(makanan)
})

/*
output
-------------
nasi padang
soto betawi
sate madura
*/

Mari kita lihat cara kerjanya, perhatikan gambar dibawah ini.

  • Kasus diatas akan melakukan 3 kali perulangan karena array diatas hanya memiliki 3 element. Proses pertama.
  • Proses yang berikutnya
  • proses yang terakhir.

Dan proses terhenti dikarenakan tidak ada lagi element yang di panggil maka callback menampilkan hasil.


Saya harap penjelasan tetang forEach dapat di mengerti. Semoga bermanfaat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s