JavaScript menyediakan cara untuk mengambil nilai dalam array satu per satu secara berurutan. Cara ini dikenal dengan istilah iterasi array. Umumnya iterasi array menggunakan fungsi callback.

Berikut ini adalah fungsi (method) di Javascript untuk mengambil nilai array:

  • forEach() : untuk mengulang setiap elemen dalam array dan menjalankan fungsi callback untuk setiap elemen.
  • map() : untuk melakukan iterasi pada suatu array dan mengembalikan array baru.
  • filter() : untuk mencari elemen dalam array yang memenuhi kriteria tertentu untuk dijadikan elemen pada array baru.
  • indexOf() : untuk mencari posisi indeks elemen tertentu dalam array.
  • find() : untuk mencari elemen dalam array yang memenuhi kriteria tertentu.
  • findIndex() : untuk mencari indeks dari elemen dalam array yang memenuhi kriteria tertentu.

Mari kita mulai bahas satu persatu:

Fungsi forEach() untuk mengulang setiap elemen dalam array

Fungsi forEach() digunakan untuk mengulang setiap elemen dalam array dan menjalankan fungsi callback untuk setiap elemen.

Untuk melakukan perulangan dengan method forEach() sintaksnya seperti di bawah ini:

Keterangan:
  • callbackFunction adalah fungsi yang akan dieksekusi untuk setiap elemen array dengan 3 parameter callback yaitu elemen, indeks (optional), dan array (optional).
  • thisValue (opsional) yaitu nilai this saat callbackFn dieksekusi.

Berikut beberapa contoh perulangan dengan method forEach() menggunakan sintaks fungsi normal dan metode ES6 untuk mendeklarasikan fungsi callback:

Contoh:

Dari kode di atas dapat kita lihat bahwa variabel data merepresentasikan elemen dari array numbers.

Kita juga dapat menggunakan parameter indeks untuk mendapatkan/mengakses indeks dari setiap elemen array, dan variabel array untuk mendapatkan sumber array.

Contoh:

Dari contoh di atas, kita juga bisa menuliskan kodenya seperti berikut:

Pada contoh di atas myFunction adalah fungsi callback. Fungsi ini dipanggil untuk setiap elemen dalam array. Fungsi ini mempunyai tiga parameter. Parameter pertama adalah nilai array (elemen) yang sedang diakses. Parameter kedua adalah posisi atau index yang sedang diakses. Parameter ketiga adalah array itu sendiri.

Kita dapat menentukan sendiri nama setiap argumen sesuai keinginan, yang perlu diperhatikan adalah urutannya.

Contoh lainnya:

Pada contoh di atas, kita memiliki array staffsDetails yang elemennya berupa object yang berisi name, age, salary, dan currency. Kemudian kita melakukan perulangan untuk menampilkan name dari tiap elemen array tersebut dalam sebuah kalimat menggunakan method forEach().

Note: kita juga dapat melakukan destructuring jika elemen array berupa object yang berisi pasangan key/value seperti berikut:

Memodifikasi Array Sumber

Method forEach() mengembalikan nilai undefined dan tidak mengubah array asli, tapi jika dibutuhkan kita bisa memodifikasi array sumber di dalam badan fungsi callback.

Contoh 1: menambahkan semua elemen dalam array number dengan forEach

Contoh 2: menggunakan kondisi dengan forEach


Fungsi map() untuk mengulang setiap elemen dalam array dan mengembalikan array baru

Fungsi map() digunakan untuk mengulang setiap elemen dalam array dan mengembalikan array baru. Fungsi map mempunyai parameter berupa fungsi callback. Fungsi callback melakukan suatu perhitungan pada setiap nilai dalam array. Hasil perhitungan akan menjadi nilai pada array baru pada urutan (index) yang sama.

Contoh:

Pada contoh di atas diperlihatkan elemen dalam array numbers1 tidak berubah. Fungsi map mengembalikan array baru yaitu numbers2. Fungsi callback dapat memakai satu parameter saja. Parameter ini adalah elemen array yang sekarang diakses.

Dari contoh di atas, kita juga bisa membuatnya menggunakan arrow function seperti berikut:

Fungsi filter() untuk mencari elemen dalam array yang memenuhi kriteria tertentu untuk dijadikan elemen pada array baru

Fungsi filter melakukan iterasi pada suatu array dan mengembalikan array baru. Fungsi filter mempunyai parameter berupa fungsi callback. Fungsi callback melakukan filtering (menyaring) setiap nilai dalam array. Nilai pada array lama yang lolos penyaringan akan menjadi nilai pada array baru.

Contoh:


Contoh di atas memperlihatkan hanya elemen array lama (numbers1) yang lebih besar dari 18 yang lolos penyaringan. Elemen array baru (numbers2) adalah semua nilai array lama yang lebih besar dari 18.

Dari contoh di atas, kita juga bisa membuatnya menggunakan arrow function seperti berikut:



Fungsi indexOf() untuk mencari posisi indeks elemen tertentu dalam array

Fungsi indexOf digunakan untuk mencari posisi (indeks) elemen tertentu dalam array. Pencarian dimulai dar posisi pertama (indeks ke 0). 

Jika data yang di cari ada dalam elemen array maka fungsi ini akan menampilkan posisi indeks elemen tersebut, sedangkan jika data yang di cari tidak ada dalam array maka fungsi akan menghasilkan nilai -1.

Fungsi indexOf bisa mempunyai dua parameter :

Parameter pertama adalah elemen yang dicari. Parameter kedua adalah posisi awal pencarian.

Contoh menggunakan satu parameter:

Pada contoh 1 di atas, kita mencari indeks elemen dengan nama ‘apel‘ menggunakan fungsi indexOf() dan hasilnya adalah 0 karena posisi ‘apel‘ di dalam array di indeks ke-0 (ingat, indeks array dimulai dari 0).

Sedangkan pada contoh 2, kita mencari indeks elemen dengan nama ‘Apel‘ menggunakan fungsi indexOf() dan hasilnya adalah -1, artinya ‘Apel‘ tidak ada dalam elemen array tersebut sehingga menghasilkan nilai -1.

Fungsi lastIndexOf() untuk mencari posisi indeks elemen tertentu dalam array dari posisi paling belakang

Fungsi lastIndexOf digunakan untuk mencari posisi (index) elemen tertentu dalam array. Pencarian dimulai dari posisi paling belakang.

Fungsi lastIndexOf() bisa mempunyai dua parameter :

Parameter pertama adalah elemen yang dicari. Parameter kedua adalah posisi awal pencarian.

Contoh penggunaan:

Fungsi find() untuk mencari elemen dalam array yang memenuhi kriteria tertentu

Fungsi find() digunakan untuk mencari elemen dalam array yang memenuhi kriteria tertentu. Fungsi find mempunyai parameter berupa fungsi callback. Fungsi callback memeriksa setiap elemen dalam array untuk kriteria tertentu. Apabila kriteria tersebut terpenuhi maka fungsi callback mengembalikan elemen tersebut.

Contoh:

Pada contoh di atas, kita mencari elemen pertama dalam array yang bernilai lebih dari 18 menggunakan fungsi find(), hasilnya adalah elemen 45.

Dari contoh di atas, kita juga bisa membuatnya menggunakan arrow function seperti berikut:

Fungsi findIndex() untuk mencari indeks dari elemen dalam array yang memenuhi kriteria tertentu

Fungsi findIndex() digunakan untuk mencari indeks elemen dalam array yang memenuhi kriteria tertentu. Fungsi findIndex() mempunyai parameter berupa fungsi callback. Fungsi callback memeriksa setiap elemen dalam array untuk kriteria tertentu. Apabila kriteria tersebut terpenuhi maka fungsi callback mengembalikan indeks elemen tersebut.

Contoh:

Pada contoh di atas, kita mencari indeks dari elemen pertama dalam array yang bernilai lebih dari 18 menggunakan fungsi findIndex(), hasilnya adalah indeks ke-3 dari elemen 45.

Dari contoh di atas, kita juga bisa membuatnya menggunakan arrow function seperti berikut:

Selesai.

Referensi:
https://www.freecodecamp.org/news/javascript-foreach-js-array-for-each-example/
https://nextgen.co.id/tutorial-belajar-javascript
https://kelasprogrammer.com/fungsi-array-javascript/