Peta vs untuk loop javascript

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

Apakah peta lebih baik daripada untuk loop JavaScript?

Apakah peta sama dengan loop JavaScript?

Apa perbedaan antara for dan map di JavaScript?

Apa keuntungan peta dalam JavaScript?