Memahami Fungsi Tingkat Tinggi dalam JavaScript

JavaScript adalah bahasa yang kuat yang didukung oleh sebagian besar browser modern, dan merupakan pilihan yang bagus untuk pemula.

Sama seperti banyak bahasa pemrograman modern lainnya, JavaScript mendukung fungsi yang memungkinkan Anda mengisolasi blok kode dan menggunakannya kembali di tempat lain. Anda juga dapat menggunakan fungsi penetapan ke variabel dan meneruskannya sebagai parameter, seperti nilai lainnya.

Apa itu Fungsi Orde Tinggi?

Definisi paling sederhana untuk fungsi tingkat tinggi adalah fungsi yang melakukan operasi pada fungsi lain dengan menerimanya sebagai parameter atau mengembalikannya. Fungsi tingkat tinggi banyak digunakan dalam paradigma pemrograman fungsional. Jika Anda baru saja memulai dengan JavaScript, fungsi tingkat tinggi mungkin agak sulit dipahami.

Pertimbangkan contoh berikut:

fungsimengubah(fn) {
membiarkan resultArray = [];





instagram viewer

kembalifungsi (Himpunan) {
untuk (membiarkan saya = 0; i < larik.panjang; saya++) {
 resultArray.push (fn (array[i]))
 }
kembali resultArray
 }
}

Di blok kode di atas, file mengubah fungsi adalah fungsi tingkat tinggi yang mengambil di fn berfungsi sebagai parameter dan mengembalikan fungsi anonim yang mengambil Himpunan sebagai parameter.

Tujuan dari mengubah fungsinya adalah untuk memodifikasi elemen-elemen dalam array. Pertama, kode mendefinisikan variabel resultArray dan mengikatnya ke array kosong.

Itu mengubah fungsi mengembalikan fungsi anonim yang mengulang setiap elemen Himpunan, lalu meneruskan elemen ke fn berfungsi untuk komputasi, dan mendorong hasilnya ke dalam resultArray. Setelah loop selesai, fungsi anonim mengembalikan resultArray.

const fungsi1 = transformasi((X) => X * 2)
menghibur.log (fungsi1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Blok kode di atas menetapkan fungsi anonim yang dikembalikan oleh mengubah fungsi ke variabel konstanta function1. fn mengembalikan produk dari X yang merupakan pengganti larik[i].

Kode juga melewati sebuah array, sebagai parameter ke function1 dan kemudian mencatat hasilnya ke konsol. Cara penulisan yang lebih singkat adalah:

menghibur.log (transformasikan((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript memiliki fungsi tingkat tinggi bawaan yang pada dasarnya melakukan hal yang sama seperti mengubah, yang akan kita bahas nanti.

Mudah-mudahan, Anda mulai memahami cara kerja fungsi tingkat tinggi dalam JavaScript. Lihatlah fungsi berikut dan lihat apakah Anda dapat menebak fungsinya.

fungsifilterAndTransform(fn, arrayToBeFiltered, kondisi) {
membiarkan filteredArray = [];
untuk (membiarkan saya = 0; i < arrayToBeFiltered.panjang; saya++) {
jika (kondisi (arrayToBeFiltered[i])) {
membiarkan y = transformasi (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } kalau tidak {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
kembali filteredArray
}

Blok kode ini mendefinisikan fungsi yang melakukan apa yang mungkin Anda curigai—memeriksa elemen dalam larik yang memenuhi kondisi tertentu dan mengubahnya dengan mengubah() fungsi. Untuk menggunakan fungsi ini, Anda melakukan sesuatu seperti ini:

filterDanTransformasi((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x% 20)

tidak seperti mengubah fungsi, The filterAndTransform function mengambil dua fungsi sebagai parameter: fn Dan kondisi. Itu kondisi fungsi memeriksa apakah parameter lulus, adalah bilangan genap, dan mengembalikan true. Jika tidak, itu mengembalikan false.

Jika kondisi memutuskan untuk benar (kondisi terpenuhi), baru kemudian adalah mengubah fungsi disebut. Logika ini berguna jika Anda bekerja dengan array dan ingin mengubah elemen tertentu. Jika Anda menjalankan kode ini di konsol browser, Anda akan mendapatkan respons berikut:

[ 1, 4, 3, 8, 5 ]

Anda dapat melihat bahwa fungsi hanya mentransformasikan elemen yang memenuhi kondisi tertentu, meninggalkan elemen yang tidak memenuhi kondisi seperti apa adanya.

Fungsi Array.map() Tingkat Tinggi dalam JavaScript

Metode array seperti map() adalah fungsi tingkat tinggi yang membuatnya lebih mudah untuk memanipulasi array. Begini cara kerjanya.

membiarkan larik = [ 1, 2, 3, 4, 5 ];
membiarkan transformArray = larik.peta((X) => X * 2);

Saat Anda masuk transformArray di konsol browser, Anda harus mendapatkan hasil yang sama, Anda dapatkan dengan mengubah fungsi yang disebutkan sebelumnya:

[ 2, 4, 6, 8, 10 ]

array.peta() mengambil dua parameter, parameter pertama mengacu pada elemen itu sendiri, sedangkan parameter kedua mengacu pada indeks elemen (posisi dalam array). Dengan hanya array.peta() Anda dapat mencapai hasil yang sama seperti filterAndTransform fungsi. Inilah cara Anda melakukannya:

membiarkan larik = [ 1, 2, 3, 4, 5 ];
membiarkan transformArray = larik.peta((X) => X % 20? X * 2: X);

Pada blok kode di atas, fungsi mengembalikan produk dari elemen saat ini dan 2, jika elemennya genap. Jika tidak, ia mengembalikan elemen yang tidak tersentuh.

Dengan built-in peta fungsi, Anda telah berhasil menghilangkan kebutuhan untuk beberapa baris kode, sehingga menghasilkan kode yang jauh lebih bersih dan lebih sedikit kemungkinan terjadinya bug.

Fungsi Array.filter() dalam JavaScript

Saat Anda memanggil Saring metode pada array, pastikan bahwa nilai kembalian dari fungsi yang Anda berikan ke metode itu benar atau salah. Itu Saring metode mengembalikan array yang berisi elemen yang memenuhi kondisi yang diteruskan. Inilah cara Anda menggunakannya.

fungsicheckFirstLetter(kata) {
membiarkan vokal = "aeiou"
jika (vokal.termasuk(kata[0].toLowerCase())) {
kembali kata;
 } kalau tidak {
kembali;
 }
}
membiarkan kata = [ "Halo", "dari", "itu", "anak-anak", "dari", "planet", "Bumi" ];
membiarkan hasil = kata-kata.filter((X) => checkFirstLetter (x))

Blok kode di atas melintasi kata-kata array dan memfilter kata apa pun yang huruf pertamanya adalah vokal. Ketika Anda menjalankan kode dan mencatatnya hasil variabel, Anda harus mendapatkan hasil berikut:

[ 'dari', 'Bumi' ];

Fungsi Array.reduce() dalam JavaScript

Itu mengurangi() fungsi tingkat tinggi mengambil dua parameter. Parameter pertama adalah fungsi reduksi. Fungsi reduksi ini bertanggung jawab untuk menggabungkan dua nilai dan mengembalikan nilai tersebut. Parameter kedua adalah opsional.

Ini mendefinisikan nilai awal untuk diteruskan ke fungsi. Jika Anda ingin mengembalikan jumlah semua elemen dalam array, Anda dapat melakukan hal berikut:

membiarkan a = [ 1, 2, 3, 4, 5];
membiarkan jumlah = 0;
untuk (membiarkan saya = 0; i < a.panjang; saya++) {
 jumlah = jumlah + a[i];
}
menghibur.log (jumlah);

Jika Anda menjalankan kode, jumlah seharusnya 15. Anda juga dapat mengambil pendekatan yang berbeda dengan mengurangi fungsi.

membiarkan a = [ 1, 2, 3, 4, 5 ];
jumlah = a.kurangi((c, n) => c + n);
menghibur.log (jumlah);

Blok kode di atas jauh lebih bersih dibandingkan dengan contoh sebelumnya. Dalam contoh ini, fungsi reduksi menggunakan dua parameter: C Dan N. C mengacu pada elemen saat ini sementara N mengacu pada elemen berikutnya dalam array.

Saat kode dijalankan, fungsi peredam melewati larik, memastikan untuk menambahkan nilai saat ini ke hasil dari langkah sebelumnya.

Kekuatan Fungsi Tingkat Tinggi

Fungsi dalam JavaScript sangat kuat, tetapi fungsi tingkat tinggi membawa banyak hal ke tingkat berikutnya. Mereka banyak digunakan dalam pemrograman fungsional, memungkinkan Anda memfilter, mengurangi, dan memetakan array dengan mudah.

Fungsi tingkat tinggi dapat membantu Anda menulis kode yang lebih modular dan dapat digunakan kembali saat membangun aplikasi.