Perbedaan Metode ForEach dan Map dalam Javascript: Panduan Pemula

Jika Anda sering bermain dengan JavaScript akhir - akhir ini, Anda mungkin menemukan dua metode Array yang sepertinya fungsi dari kedua itu sama.

Jika Anda menyangka seperti itu, yap, wajar sekali, karena dua-dua bisa digunakan untuk teknik looping. Baik pada artikel ini, kita akan membahas apa sebenarnya perbedaan antara dua fungsi tersebut.

¶For Each

Menurut MDN, Metode forEach() akan mengeksekusi fungsi yang disediakan satu kali untuk setiap elemen array.

Singkatnya, gunakan forEach, jika Anda tidak ingin memanipulasi data yang asli, atau keluaran dari array tersebut.

Karena pada dasarnya, metode ini tidak mengembalikan apapun, yap, apapun tidak dikembalikannya, melainkan dia hanya akan memanggil fungsi yang disediakan pada setiap elemen dalam array yang kita punya.

Berikut contoh penggunaannya.

const users = [
    { firstname: 'Irsyad', lastname: 'A. Panjaitan', age: 25 },
    { firstname: 'Alex', lastname: 'Smith', age: 29 },
    { firstname: 'Sri', lastname: 'A. Rahayu', age: 26 },
];

users.forEach((user) => {
    console.log(user.firstname);
});

// expected output: 'Irsyad'
// expected output: 'Alex'
// expected output: 'Sri'

¶Map

Menurut MDN, Metode map() membuat array baru yang diisi dengan hasil pemanggilan fungsi yang disediakan pada setiap elemen kembali dalam array.

Singkatnya, gunakan map jika Anda ingin merubah data yang didapat dari array tersebut.

Perhatikan array berikut.

const users = [
    { firstname: 'Irsyad', lastname: 'A. Panjaitan', age: 25 },
    { firstname: 'Alex', lastname: 'Smith', age: 29 },
    { firstname: 'Sri', lastname: 'A. Rahayu', age: 26 },
];

Jika Anda lihat array di atas, masing-masing dari mereka mempunya key yang namanya firstname dan lastname. Bagaimana jika firstname dan lastname kita gabung menjadi name.

Perhatikan contoh berikut.

users.map((user) => {
    return {
        name: `${user.firstname} ${user.lastname}`,
        age: user.age,
    };
});

/*
 expected output: Array [
  { name: 'Irsyad A. Panjaitan', age: 25 },
  { name: 'Alex Smith', age: 29 },
  { name: 'Sri A. Rahayu', age: 26 }
]
*/

Jika kita lihat, dari outputnya, jelas mereka berbeda, map mengembalikan array kembali, sedangkan forEach tidak.

Berikut adalah contoh lain.

const numbers = [2, 3, 4, 5];

numbers.forEach((number) => {
    console.log(number * 5);
});

// expected output: 10
// expected output: 15
// expected output: 20
// expected output: 25

Jika kita menggunakan map, maka yang dikembalikan adalah data dalam bentuk array.

const numbers = [2, 3, 4, 5];

numbers.map((number) => number * 5);
// expected output: Array [ 10, 15, 20, 25 ]

¶Kesimpulan

Sudah jelas ya perbedaan dari kedua fungsi tersebut, map akan mengembalikan array kembali, sedangkan forEach tidak.

Semoga artikel ini bermanfaat, like jika Anda suka, share jika Anda suka berbagi.