Dalam artikel ini, kita akan membahas metode map dan forEach dalam JavaScript, dan kita juga akan membahas perbedaan di antara keduanya untuk memahami kapan harus menggunakan masing-masing metode
JavaScript adalah salah satu teknologi inti web. Sebagian besar situs web menggunakannya, dan semua browser web modern mendukungnya tanpa memerlukan plugin. Dalam seri ini, kami membahas berbagai tip dan trik yang akan membantu Anda dalam pengembangan JavaScript sehari-hari
Sebagai bagian dari pengembangan JavaScript sehari-hari, Anda sering perlu bekerja dengan array. Dan saat Anda bekerja dengan array, Anda sering perlu memproses elemen array, jadi Anda memerlukan cara untuk mengulang setiap elemen array. Dalam JavaScript, forEach dan map adalah dua metode paling populer untuk bekerja dengan array. Tujuan utama dari kedua metode ini adalah untuk melakukan iterasi melalui array. Meskipun mereka mungkin terlihat hampir identik, ada beberapa perbedaan di antara mereka. map digunakan untuk mengubah setiap elemen array, sedangkan forEach digunakan untuk menjalankan fungsi pada setiap elemen tanpa mengubah array
Dalam posting ini, kita akan membahas kedua metode ini bersama dengan beberapa contoh dunia nyata. Terakhir, kami juga akan membahas perbedaan antara kedua metode ini. Pada akhirnya, Anda akan lebih memahami kapan harus menggunakan masing-masing
Metode forEach
Metode forEach memungkinkan Anda untuk mengeksekusi fungsi dengan mengulangi setiap elemen array. Penting untuk diperhatikan bahwa metode forEach tidak mengembalikan apa pun, jadi, jika Anda mencoba mendapatkan nilai pengembalian dari metode forEach, Anda akan mendapatkan forEach0. Sebagai gantinya, ini memungkinkan Anda untuk mengubah nilai array yang ada dengan menerapkan fungsi callback pada setiap elemen array. Karena memungkinkan Anda untuk memodifikasi larik sumber itu sendiri, ini adalah metode mutator
Mari kita lihat contoh berikut untuk memahami cara kerja metode forEach
Seperti yang Anda lihat, kami menghitung kuadrat dari semua elemen array. Metode forEach dipanggil dengan setiap elemen, dan kita mencatat kuadratnya. Nilai kembalian dari metode pembantu ini diabaikan, dan larik aslinya tidak berubah. Nilai pengembalian forEach selalu forEach0
Metode map
Metode map sangat mirip dengan metode forEach—memungkinkan Anda menjalankan fungsi untuk setiap elemen array. Namun perbedaannya adalah metode peta membuat larik baru menggunakan nilai kembalian dari fungsi ini. map membuat larik baru dengan menerapkan fungsi callback pada setiap elemen larik sumber. Karena map tidak mengubah larik sumber, kita dapat mengatakan bahwa ini adalah metode yang tidak dapat diubah
Mari kita merevisi contoh yang telah kita diskusikan di bagian sebelumnya dengan mitra peta
Seperti yang Anda lihat, larik forEach_0 tetap tidak berubah, tetapi nilai kembalian dari map adalah larik baru yang dibangun dengan menerapkan fungsi kuadrat ke setiap elemen larik
Hal yang hebat tentang fungsi peta adalah dapat dirangkai. Ini berarti Anda dapat memanggil sejumlah operasi peta secara berurutan. Berikut adalah contoh rangkaian di mana kita mengalikan setiap angka dengan 2, mengonversinya menjadi string, lalu memberi tanda dolar pada masing-masing angka
Perbedaan Antara Metode map dan forEach
Perbedaan utama antara map dan forEach adalah bahwa metode map mengembalikan array baru dengan menerapkan fungsi panggilan balik pada setiap elemen array, sedangkan metode forEach tidak mengembalikan apa pun
Anda dapat menggunakan metode forEach untuk memutasi larik sumber, tetapi ini bukan cara yang dimaksudkan untuk digunakan. Sebaliknya, itu bagus ketika Anda perlu melakukan beberapa tindakan dengan setiap elemen array
Di sisi lain, metode map digunakan untuk membuat array baru, dan dengan demikian, ini dapat dirantai. Anda dapat memanggil sejumlah operasi peta satu per satu
Metode forEach tidak mengembalikan apa pun, jadi Anda tidak dapat mengaitkannya dengan metode lain—ini tidak dapat dirantai
Mana Yang Harus Saya Gunakan, map atau forEach?
Sekarang, intinya adalah pertanyaan ini. bagaimana seharusnya Anda memutuskan apakah akan menggunakan metode map atau forEach?
Jika Anda berencana mengubah elemen larik dengan menerapkan fungsi, Anda harus menggunakan metode map, karena metode ini tidak mengubah larik asli dan mengembalikan larik baru. Dengan cara ini, array asli tetap utuh. Di sisi lain, jika Anda ingin mengulang semua elemen array dan tidak memerlukan array yang dikembalikan, gunakan metode forEach
Selain itu, fungsinya sangat mirip
Kesimpulan
Hari ini, kita membahas dua metode berguna dalam JavaScript. map dan forEach. Kami membahas perbedaan di antara mereka, bersama dengan beberapa contoh dunia nyata