Fungsi JavaScript

Fungsi JavaScript mampu lebih dari sekadar melampirkan banyak kode sambil menunggu panggilan untuk dieksekusi. Fungsi telah berevolusi dari waktu ke waktu mengarah ke definisi baru, metode eksekusi, dan sintaksis. Posting ini akan membahas beberapa peran yang dimainkan JavaScript saat ini.

Mengetahui berbagai cara untuk mengekspresikan dan mendefinisikan fungsi membuka kemungkinan menerapkan logika dengan cara yang lebih optimal dalam JavaScript. Anda juga dapat menjawab pertanyaan wawancara dengan lebih mudah.

Ekspresi Fungsi

Ketika Anda cukup menyatakan fungsi dengan fungsi kata kunci, parameter opsional, dan isi kode, ini a fungsi pernyataan.

Letakkan deklarasi itu dalam ekspresi JavaScript (seperti dalam penugasan atau ekspresi aritmatika), itu menjadi a fungsi ekspresi.

// Deklarasi fungsi function_name () ; // Ekspresi fungsi var function_name = function () ; 

Semua deklarasi JavaScript diangkat (dipindahkan dalam cakupan) selama evaluasi. Oleh karena itu menulis panggilan fungsi sebelum deklarasi fungsi tidak apa-apa (karena deklarasi akan dipindahkan ke atas pula).

function_name (); // panggilan fungsi [WORKS] function function_name () ; 

Namun, ekspresi fungsi tidak diangkat karena fungsi menjadi bagian dari ekspresi dan bukan deklarasi yang berdiri sendiri.

function_name (); // panggilan fungsi [TIDAK AKAN BEKERJA] var function_name = function () ; 

Ekspresi Fungsi Segera Diminta (IIFE)

Ini adalah ekspresi fungsi, kode yang dieksekusi segera (hanya sekali ketika itu dievaluasi). Anda dapat membuatnya hanya dengan menambahkan () (Sintaks digunakan untuk memanggil fungsi) tepat setelah ekspresi fungsi. Mereka bisa anonim (tidak ada nama untuk memanggilnya).

Di bawah ini adalah dua sintaksis yang paling umum untuk membuat IIFE:

(function opsional_function_name () // body ()); 

dan

(function opsional_function_name () // body) (); 

Tanda kurung di sekitar deklarasi fungsi mengubahnya menjadi ekspresi dan kemudian menambahkan () setelah itu memanggil fungsi. Anda dapat menggunakan cara lain untuk membuat IIFE selama Anda menambahkan () setelah ekspresi fungsi (seperti di bawah), tetapi metode yang disukai adalah dua di atas.

// Beberapa cara untuk membuat fungsi IIFEs () / * ... * / (); + function () / * ... * / (); fungsi baru () / * ... * /; 

IIFE sangat ideal untuk menulis kode yang perlu dieksekusi hanya sekali, penempatan nama, membuat penutupan, membuat variabel pribadi dan banyak lagi. Di bawah ini adalah contoh penggunaan IIFE.

var page_language = (function () var lang; // Kode untuk mendapatkan bahasa dari halaman return lang;) (); 

Kode untuk mendapatkan bahasa halaman hanya dieksekusi satu kali (lebih disukai setelah halaman dimuat). Hasilnya disimpan di halaman_bahasa untuk digunakan nanti.

Metode

Ketika suatu fungsi adalah properti objek, itu disebut metode. Karena fungsi juga merupakan objek, fungsi di dalam fungsi lain juga merupakan metode. Di bawah ini adalah contoh untuk metode di dalam objek.

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78 

Itu menambahkan dan sub fungsi adalah metode kalk obyek.

Sekarang untuk fungsi dalam contoh fungsi:

function add (a) return function (b) return a + b; console.log (add (1) (2)); // Output adalah 3 

Fungsi anonim yang dikembalikan adalah metode fungsi menambahkan.

Catatan: Karena parameter (Sebuah) fungsi menambahkan dalam contoh di atas tersedia untuk menjalankan fungsi berikut, jenis proses ini disebut kari.

Konstruktor

Ketika Anda menambahkan baru kata kunci sebelum fungsi dan menyebutnya, itu menjadi konstruktor yang membuat instance. Di bawah ini adalah contoh di mana konstruktor digunakan untuk membuat contoh Buah dan nilai ditambahkan ke masing-masing Buahproperti.

function Fruit () var name, family; // Nama ilmiah & keluarga this.getName = function () return name;; this.setName = fungsi (nilai) name = value; this.getFamily = function () return family;; this.setFamily = fungsi (nilai) family = value;  var apple = Buah baru (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var orange = Buah baru (); orange.setName ("Jeruk à ??  ?? âA A?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus à ??  ?? ?? ??¢A A?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae " 

Fungsi Panah (Standar ES6) [Hanya di Firefox]

Definisi fungsi baru dari ES6 Standard menyediakan sintaks yang lebih pendek untuk ekspresi fungsi. Sintaksnya adalah

() => / * body * / 

Fungsi sampel ini:

var sing = function () console.log ('singing…'); 

sama dengan:

var sing = () => console.log ('bernyanyi ...'); 

Fungsi panah bersifat anonim dan tidak memiliki fungsi sendiri ini nilai, ini di dalamnya akan sama dengan ini dalam kode terlampir. Juga, Anda tidak dapat mengubahnya ke konstruktor dengan baru kata kunci.

Mereka berguna untuk saat Anda inginkan ini di dalam suatu fungsi sama dengan di luar dan sintaks yang lebih pendek membuat kode untuk fungsi penulisan dalam fungsi ringkas (seperti di bawah)

setInterval (function () console.log ('message'), 1000); 

ke

setInterval (() => console.log ('message'), 1000); 

Fungsi Generator (Standar ES6) [Hanya di Firefox]

Definisi fungsi baru lainnya dari ES6 Standard adalah Fungsi Generator. Fungsi generator mampu menghentikan dan melanjutkan eksekusi. Sintaksnya adalah:

function * function_name ()  

atau

function * function_name ()  

Fungsi generator membuat iterator. Iterator berikutnya Metode ini kemudian digunakan untuk mengeksekusi kode di dalam fungsi generator sampai menghasilkan kata kunci tercapai. Setelah itu, nilai iterasi yang diidentifikasi oleh menghasilkan kata kunci dikembalikan oleh fungsi generator dan eksekusi dihentikan.

Fungsi generator kembali dieksekusi ketika berikutnya Metode ini dipanggil hingga yang berikutnya menghasilkan kata kunci tercapai. Setelah semua menghasilkan ekspresi dieksekusi, nilai yang dihasilkan mengembalikan tidak terdefinisi.

Di bawah ini adalah contoh sederhana:

function * generator_func (count) for (var i = 0; i 
Ini contoh lain:
 
function * randomIncrement (i) yield i + 3; hasil i + 5; hasil i + 10; hasil i + 6;  var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 
Ada juga a menghasilkan* ekspresi yang meneruskan nilai ke fungsi generator lain
 
fungsi * buah (buah) hasil * sayuran (buah); menghasilkan "Anggur";  fungsi * sayuran (buah) menghasilkan buah + "dan Bayam"; hasil buah + "dan Brokoli"; hasil buah + "dan Mentimun";  var itr = buah ("Apple"); console.log (itr.next (). value); // "Apple and Spinach" console.log (itr.next (). Value); // "Apple dan Brokoli" console.log (itr.next (). Value); // "Apple and Cucumber" console.log (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); //tidak terdefinisi 
 
Fungsi generator berguna jika Anda ingin melalui nilai satu per satu pada titik pilihan Anda dalam kode dengan menjeda, bukan dalam satu jalan seperti dalam perulangan melalui array.
 
Kesimpulan
 
Saya telah memasukkan daftar referensi di bawah ini, di mana Anda akan menemukan tautan ke referensi dan artikel yang secara mendalam membahas berbagai topik secara terpisah. Kedua fungsi standar ES6 hanya akan berfungsi di Firefox saat ini.
 
Referensi
 
Bahasa ECMAScript: Fungsi dan Kelas
 
Ekspresi Fungsi Segera-Invoked (IIFE)
 
Dasar-dasar Generator ES6
 
Fungsi Panah
 
Fungsi - Jaringan Pengembang Mozilla