Array ForEach JavaScript: Sintaks dan Contoh Penggunaan

forEach() merupakan method array di JavaScript yang mengeksekusi fungsi yang disediakan sekali untuk setiap elemen array.

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

forEach() bisa menjadi alternatif perulangan for, kode kita akan menjadi lebih ringkas dibanding menggunakan for.

Mari kita pelajari lebih lanjut method array forEach() mulai dari sintaks hingga contoh penggunaannya.

1. Sintaks
2. Contoh
   1. Melihat Nilai Argumen elemen, index, dan array
   2. Memodifikasi Array Sumber
   3. Mengubah Perulangan for ke forEach

Sintaks

// arrow function
forEach((elemen, indeks, array) => { ... })

// callback function
forEach(callbackFn, thisValue)

Parameter

• callbackFn: fungsi yang akan dieksekusi untuk setiap elemen array. Menerima arguman berikut:
  • elemen: elemen saat ini.
  • indeks (opsional): indeks elemen saat ini.
  • array (opsional): array sumber.
• thisValue (opsional): Nilai this saat callbackFn dieksekusi.

Nilai Kembalian

Mengembalikan nilai undefined.

Contoh

Melihat Nilai Argumen elemen, index dan array

Nilai setiap argumen bergantung pada array sumber, mari kita gunakan contoh.

const numbers = [1, 5, 6, 8, 9, 3];

numbers.forEach((elemen, indeks, array) => {
  console.log('elemen:', elemen, 'indeks:', indeks, 'array:', array);
});

/* output:
elemen: 1 indeks: 0 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 5 indeks: 1 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 6 indeks: 2 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 8 indeks: 3 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 9 indeks: 4 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 3 indeks: 5 array: [ 1, 5, 6, 8, 9, 3 ]
*/

Perhatikan kode di atas, karena fungsi dieksekusi untuk setiap elemen array maka nilai elemen dan indeks berubah sesuai dengan elemen saat ini, sedangkan array mengembalikan array sumber.

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

Kita juga bisa mengekstrak fungsi callback seperti berikut, ini akan mengembalikan hasil yang sama persis seperti contoh di atas.

const numbers = [1, 5, 6, 8, 9, 3];

const callbackFn = (elemen, indeks, array) => {
  console.log('elemen:', elemen, 'indeks:', indeks, 'array:', array);
};

numbers.forEach(callbackFn);

/* output:
elemen: 1 indeks: 0 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 5 indeks: 1 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 6 indeks: 2 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 8 indeks: 3 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 9 indeks: 4 array: [ 1, 5, 6, 8, 9, 3 ]
elemen: 3 indeks: 5 array: [ 1, 5, 6, 8, 9, 3 ]
*/

Memodifikasi Array Sumber

forEach tidak mengubah array sumber, tapi kita bisa mengubah secara manual di badan fungsi callback.

Contoh berikut mengubah array sumber dengan menjumlahkan setiap elemen dengan 2.

const numbers = [1, 5, 6, 8, 9, 3];

numbers.forEach((elemen, index) => {
  numbers[index] = elemen + 2;
});

console.log(numbers); // [ 3, 7, 8, 10, 11, 5 ]

Kita dapat memodifikasi setiap elemen array sumber sesuai keinginan, termasuk menghapus, menambah, mengakses, atau mengubah.

Mengubah Perulangan for ke forEach

forEach bisa menjadi alternatif untuk perulangan for, tapi jauh lebih ringkas.

Mari kita gunakan contoh penggunaan for terlebih dahulu, misalnya kita akan menyalin elemen array users ke array baru copyUsers.

const users = ['ucup', 'budi', 'bambang'];
const copyUsers = [];

for (let i = 0; i < users.length; i++) {
  copyUsers.push(users[i]);
}

console.log(users); // [ 'ucup', 'budi', 'bambang' ]
console.log(copyUsers); // [ 'ucup', 'budi', 'bambang' ]

Mari kita ubah kode di atas menggunakan forEach().

const users = ['ucup', 'budi', 'bambang'];
const copyUsers = [];

users.forEach((user) => copyUsers.push(user));

console.log(users); // [ 'ucup', 'budi', 'bambang' ]
console.log(copyUsers); // [ 'ucup', 'budi', 'bambang' ]

Lihat, kode kita jadi lebih ringkas jika menggunakan forEach tapi kita tetap mendapatkan hasil yang sama dengan contoh for.