Fungsi tingkat tinggi dalam JavaScript: apa itu?

Kami menyajikan kepada Anda terjemahan sebuah artikel oleh Sukhjinder Arora yang diterbitkan di Bits and Pieces . Cari tahu di bawah kucing tentang fungsi-fungsi tingkat tinggi dalam JavaScript dan beberapa fungsi lain yang ada dalam bahasa ini.


Foto oleh NESA oleh Pembuat dari Unsplash

Belajar pemrograman JavaScript, Anda mungkin menemukan konsep fungsi tingkat tinggi . Meskipun konsep ini mungkin tampak menakutkan, sebenarnya tidak terlalu rumit.

Berkat kemampuan untuk bekerja dengan fungsi tingkat tinggi, JavaScript cocok untuk pemrograman fungsional.

Fungsi tingkat tinggi umum dalam JavaScript. Jika Anda bekerja dengannya sebentar, sangat mungkin bahwa Anda menggunakan fungsi tersebut tanpa menyadarinya.

Untuk mendapatkan gambaran lengkap fungsi tingkat tinggi, Anda harus terlebih dahulu memahami apa pemrograman fungsional dan fungsi kelas satu .

Kiat : Menggunakan kembali fungsi JavaScript sering menyebabkan duplikat. Untuk menghindari ini, gunakan Bit (GitHub) . Anda dapat dengan mudah menemukan fitur baru, membaginya, dan menerapkannya kembali dengan perubahan manajemen minimal. Cobalah, jangan malu-malu.

Apa itu pemrograman fungsional

Tanpa merinci, pemrograman fungsional adalah pemrograman di mana beberapa fungsi dilewatkan sebagai argumen ke fungsi lain dan mengembalikan fungsi ketiga sebagai nilai. Dalam pemrograman fungsional, kami berpikir dan beroperasi dengan fungsi.

Pemrograman fungsional dilakukan dalam bahasa seperti JavaScript, Haskell, Clojure, Scala, dan Erlang.

Apa fitur kelas satu?

Saat belajar bekerja dengan JavaScript, Anda kemungkinan besar mendengar bahwa baginya, fungsi adalah warga negara kelas satu. Faktanya adalah bahwa dalam JavaScript, seperti dalam bahasa pemrograman fungsional lainnya, fungsi adalah objek.

Khusus untuk JavaScript, fungsi adalah objek dari jenis khusus (Objek Function , atau functors). Sebagai contoh:

 function greeting() { console.log('Hello World'); } // Invoking the function greeting(); // prints 'Hello World' 

Untuk menunjukkan bahwa fungsi dalam JavaScript adalah objek, kita dapat melakukan sesuatu seperti ini:

 // We can add properties to functions like we do with objects greeting.lang = 'English'; // Prints 'English' console.log(greeting.lang); 

Catatan: meskipun di atas berfungsi dengan baik di JavaScript, Anda tidak boleh menyalahgunakannya. Anda tidak dapat menetapkan properti acak ke functor - lebih baik menggunakan objek biasa.

Dalam JavaScript, semua yang dapat Anda lakukan dengan entitas lain, seperti objek, string, atau angka, berlaku untuk fungsi. Mereka dapat diteruskan, termasuk sebagai argumen ke fungsi lain (maka mereka disebut fungsi callback atau fungsi callback), menugaskan mereka ke variabel, dan sebagainya. Inilah sebabnya mengapa fungsi JavaScript disebut fungsi kelas satu.

Menetapkan Fungsi ke Variabel

JavaScript memungkinkan Anda untuk menetapkan fungsi ke variabel. Sebagai contoh:

 const square = function(x) { return x * x; } // prints 25 square(5); 

Mereka juga dapat ditularkan. Sebagai contoh:

 const foo = square; // prints 36 foo(6); 

Melewati fungsi sebagai argumen

Kita bisa meneruskan fungsi sebagai argumen ke fungsi lain. Sebagai contoh:

 function formalGreeting() { console.log("How are you?"); } function casualGreeting() { console.log("What's up?"); } function greet(type, greetFormal, greetCasual) { if(type === 'formal') { greetFormal(); } else if(type === 'casual') { greetCasual(); } } // prints 'What's up?' greet('casual', formalGreeting, casualGreeting); 

Jadi, sekarang kita tahu apa fungsi kelas satu, mari kita beralih ke fungsi tingkat tinggi dalam JavaScript.

Fungsi Orde Tinggi

Fungsi tingkat tinggi adalah fungsi yang bekerja dengan fungsi lain, mengambil fungsi sebagai argumen, atau mengembalikan fungsi sebagai hasilnya.

Contoh fungsi tingkat tinggi yang sudah dibangun ke dalam bahasa adalah Array.prototype.map , Array.prototype.filter dan Array.prototype.reduce .

Fungsi Perintah Tinggi

Mari kita lihat beberapa contoh fungsi built-in orde tinggi dan membandingkannya dengan solusi di mana fungsi orde tinggi tidak digunakan.

Array.prototype.map
Metode map() membuat array baru dengan hasil memanggil fungsi yang lewat untuk setiap elemen dari array awal. Metode map() mengambil setiap nilai fungsi panggilan balik dan membuat array baru menggunakan nilai-nilai ini.

Fungsi panggilan balik yang dilewati ke metode map() membutuhkan tiga argumen: element , index dan array .

Pertimbangkan ini dengan beberapa contoh.

Contoh No. 1
Misalkan kita memiliki array angka, dan darinya kita ingin membuat array baru di mana setiap angka dari array awal akan digandakan. Bagaimana kita bisa menyelesaikan masalah ini dengan dan tanpa fungsi urutan yang lebih tinggi?

Tanpa fungsi urutan yang lebih tinggi:

 const arr1 = [1, 2, 3]; const arr2 = []; for(let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2); } // prints [ 2, 4, 6 ] console.log(arr2); 

Menggunakan fungsi map urutan yang lebih tinggi:

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(function(item) { return item * 2; }); console.log(arr2); 

Kode dapat dibuat lebih pendek menggunakan fungsi panah.

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); console.log(arr2); 

Contoh No. 2
Katakanlah kita memiliki array yang berisi tahun kelahiran beberapa orang, dan darinya kita ingin membuat array baru di mana usia mereka nantinya.

Tanpa fungsi urutan yang lebih tinggi:

 const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = []; for(let i = 0; i < birthYear.length; i++) { let age = 2018 - birthYear[i]; ages.push(age); } // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Menggunakan fungsi map urutan yang lebih tinggi:

 const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = birthYear.map(year => 2018 - year); // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Array.prototype.filter
Metode filter() membuat array baru dengan semua elemen lulus tes yang ditentukan dalam fungsi lulus. Fungsi callback yang diteruskan ke filter() membutuhkan tiga argumen: element , index dan array .

Pertimbangkan ini dengan beberapa contoh.

Contoh No. 1
Bayangkan bahwa kita memiliki array yang berisi objek dengan properti "nama" dan "usia". Dari sini kami ingin membuat array baru di mana hanya orang dewasa (dari delapan belas dan lebih tua) akan ditunjukkan.

Tanpa fungsi urutan yang lebih tinggi:

 const persons = [ { name: 'Peter', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24}, ]; const fullAge = []; for(let i = 0; i < persons.length; i++) { if(persons[i].age >= 18) { fullAge.push(persons[i]); } } console.log(fullAge); 

Menggunakan fungsi filter urutan lebih tinggi:

 const persons = [ { name: 'Peter', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24}, ]; const fullAge = persons.filter(person => person.age >= 18); console.log(fullAge); 

Array.prototype.reduce
Metode reduce berlaku fungsi untuk setiap nilai array, menguranginya menjadi nilai tunggal. Metode pengurangan mengambil dua argumen:

1. fungsi callback untuk diproses;
2. parameter initialValue opsional (argumen pertama pada panggilan fungsi pertama).

Fungsi callback mengambil empat argumen: accumulator , currentValue , currentIndex , sourceArray .

Jika parameter initialValue dilewatkan, argumen accumulator akan sama dengan argumen initialValue , dan argumen currentValue menjadi elemen pertama dari array.

Jika parameter initialValue tidak diteruskan, argumen accumulator akan sama dengan elemen pertama array, dan elemen kedua array akan diambil sebagai argumen currentValue .

Contoh No. 1
Misalkan kita perlu menemukan jumlah angka dalam array.

Menggunakan fungsi urutan yang lebih tinggi reduce :

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }); // prints 25 console.log(sum); 

Setiap kali fungsi panggilan balik diterapkan ke setiap nilai dari array, argumen accumulator menyimpan hasil dari tindakan sebelumnya yang dikembalikan oleh fungsi, dan currentValue mengambil nilai berikutnya dari array. Setelah selesai, hasilnya disimpan dalam sum variabel.

Selain itu, kami dapat meneruskan fungsi ini dengan nilai awal:

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 10); // prints 35 console.log(sum); 

Tanpa fungsi urutan yang lebih tinggi:

 const arr = [5, 7, 1, 8, 4]; let sum = 0; for(let i = 0; i < arr.length; i++) { sum = sum + arr[i]; } // prints 25 console.log(sum); 

Seperti yang Anda lihat, dengan bantuan fungsi tingkat tinggi, kode dapat dibuat lebih rapi, lebih pendek dan lebih luas.

Buat fungsi pesanan tinggi Anda sendiri

Hingga saat ini, kami telah mempertimbangkan berbagai fungsi tingkat tinggi yang ada dalam bahasa ini. Saatnya untuk membuat fungsi pesanan tinggi Anda sendiri.

Bayangkan bahwa JavaScript tidak akan memiliki metode map sendiri. Kita dapat membangunnya sendiri, dengan demikian menciptakan fungsi kita sendiri dengan tatanan yang lebih tinggi.

Katakanlah kita memiliki larik string, dan darinya kita ingin membuat larik integral di mana setiap elemen akan mewakili panjang string dari larik awal.

 const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C']; function mapForEach(arr, fn) { const newArray = []; for(let i = 0; i < arr.length; i++) { newArray.push( fn(arr[i]) ); } return newArray; } const lenArray = mapForEach(strArray, function(item) { return item.length; }); // prints [ 10, 6, 3, 4, 1 ] console.log(lenArray); 

Pada contoh di atas, kami membuat fungsi mapForEach , yang menggunakan fungsi array dan fungsi panggilan balik fn sebagai argumen. Fungsi ini secara siklikatif diterapkan pada setiap elemen array dan memanggil fungsi panggilan balik fn sebagai bagian dari newArray.push fungsi newArray.push di setiap iterasi.

Fungsi panggilan balik fn mengambil elemen saat ini dari array awal dan mengembalikan nilai panjang dari elemen ini, yang disimpan di dalam newArray baru. Setelah iterasi selesai, array newArray dikembalikan sebagai hasilnya dan ditugaskan ke lenArray array.

Kesimpulan

Kami belajar apa fungsi tingkat tinggi, dan memeriksa beberapa fungsi yang dibangun ke dalam bahasa. Kami juga belajar cara membuat fungsi tingkat tinggi Anda sendiri.

Singkatnya, fungsi tingkat tinggi berfungsi seperti fungsi biasa, tetapi memiliki kemampuan tambahan untuk menerima fungsi lain sebagai argumen dan mengembalikannya sebagai hasilnya.

Faktanya, itu saja. Jika Anda menemukan artikel ini bermanfaat, Anda juga dapat mengikuti saya di Medium dan di Twitter . Jangan ragu untuk berkomentar jika Anda memiliki pertanyaan! Saya akan dengan senang hati membantu. :)