Belajar Membaca Kode Javascript Part 2 : Fungsi yang mengembalikan fungsi ?!

Udah seminggu lebih saya tidak menulis artikel di sekolah koding. Daripada beralasan sibuk, saya lebih baik minta maaf, karena emang malas. Padahal kalo memang disempet-sempetin pasti masih ada waktu.

Langsung saja, masih berlanjut dari series belajar membaca kode JavaScript. Kali ini saya akan membahas bagaimana JavaScript menginterpretasikan fungsi yang mengembalikan (return) fungsi. Kenapa saya membahas ini ? karena ada sesuatu yang penting, yang lebih penting dari ini, dan ini satu sama lain saling berkaitan, yang Insya Allah akan saya bahas pada episode selanjutnya. Penasaran ? nantikan ya hehehe.

Pada pembahasan pada episode sebelumnya <a href=' https://www.sekolahkoding.com/forum/belajar-membaca-kode-javascript-part-2-lexical-scope-1519815331'> https://www.sekolahkoding.com/forum/belajar-membaca-kode-javascript-part-2-lexical-scope-1519815331</a> , fungsi AddTwo me-return sebuah angka. Ingat pula pada bahasan sebelumnya, bahwa fungsi itu bisa mengembalikan (return) berbagai macam hal, nggak hanya angka tetapi bisa juga object, definisi fungsi, dan lainnya. Maka kali ini kita akan coba bahas fungsi yang mengembalikan fungsi.

Begini kodenya :

     1: let val = 7
     2: function createAdder() {
     3:   function addNumbers(a, b) {
     4:     let ret = a + b
     5:     return ret
     6:   }
     7:   return addNumbers
     8: }
     9: let adder = createAdder()
    10: let sum = adder(val, 8)
    11: console.log('example of function returning a function: ', sum)

Mari kita pecah kedalam step-step seperti biasa agar mudah dipahami :

1. Baris 1. Kita deklarasikan variabel val pada konteks eksekusi global dan berikan nilai yaitu angka 7.

2. pada baris 2-7. Kita simpan semuanya pada memori dan deklarasikan sebuah pointer /variabel yang menunjuk pada fungsi addNumbers pada konteks eksekusi global. Didalamnya dari baris 3-7 merupakan definisi dari fungsi tersebut. Hanya saja, kali ini kita belum melihat ke dalam definisi dari fungsi tersebut. Kita hanya menyimpannya dalam memori dan membuat pointer yang menunjuk ke sana.

3. Pada baris ke-9. Kita deklarasi variabel baru, adder pada konteks eksekusi global. Sementara ini variabel adder masih undefined.

4. Masih pada baris ke-9. ada buka tutup kurung “()” yang berarti pemanggilan sebuah fungsi. Maka dari itu kita eksekusi fungsi tersebut, dan lihat pada konteks eksekusi global apakah ada pointer yang menunjuk pada createAdder dan jawabannya ada (step 2). Karena ada, mari kita panggil fungsinya.

5. Memanggil fungsi createAdder. Sekarang kita ada di baris ke-2. Masuk ke dalam fungsi tersebut berarti kita membuat konteks eksekusi baru, yaitu konteks eksekusi lokal. JavaScript Engine akan menambahan konteks eksekusi tersebut ke tumpukan konteks eksekusi.

6. Baris 3-6. Masuk ke dalam fungsi, konteks eksekusi baru, tidak lagi berada di konteks eksekusi global. Dan ternyata kita bertemu dengan deklarasi fungsi. Kita buat pointer / variabel pada konteks eksekusi lokal ini dengan nama addNumber . Ini penting sekali, karena addNumber hanya akan ada di dalam scope lokal ini ( di dalam scope fungsi createAdder )

7. Baris ke.7. Kita return apa yang ada pada variabel AddNumber . Engine bakal mencari variabel yang bernama AddNumber dan ternyata AddNumber adalah sebuah definisi dari sebuah fungsi. Gak masalah, fungsi itu bebas mau me-return apapun, termasuk definisi sebuah fungsi. Jadi, kita kembalikan definisi dari fungsi AddNumber dan assign ke variabel adder. Apapun yang ada diantara baris 4-5 merupakan definisi fungsinya.

8. Setelah return dan kemudian dari fungsi tersebut, konteks eksekusi akan di destroy atau dihancurkan. Semua isinya juga bakal hilang, semua yang telah kita deklarasikan dalam konteks eksekusi lokal tadi hilang, termasuk variabel AddNumber yang berisi definisi fungsi. Tapi ingat, “fungsi definisi” AddNumber sudah direturn, jadi meskipun variabel AddNumber sudah di destroy, isi-nya sudah tersimpan rapi didalam variabel adder. Variabel ini yang sebelumnya telah kita deklarasikan pada step ke-3.

9. Baris ke-10. Kita deklarasikan variabel baru, yaitu sum pada konteks eksekusi global dan sementara masih belum memiliki value, alias undefined.

10. Selanjutnya kita memanggil fungsi. Fungsi yang mana ? fungsi yang tadi, yang definisinya di return dan disimpan ke dalam variabel adder . Kita cari pada konteks eksekusi global, dan kita temukan bahwa fungsi tersebut butuh dua paramater.

11. Mari kita cari value dari variabel yang ada pada parameter tersebut. Yang pertama adalah variabel val yang memiliki value 7 dan satu lagi parameternya yaitu angka 8. Kemudian kita pass keduanya sebagai argumen ketika kita memanggil fungsi tersebut.

12. Sekarang kita eksekusi fungsinya. definisi dari fungsi tersebut ditulis pada baris ketiga sampai kelima. Konteks eksekusi lokal dibuat. Pada konteks eksekusi tersebut kita deklarasikan variabel a dan b. Dan kita berikan nilai pada variabel a dengan angka 7 dan variabel b dengan angka 8 (sesuai dengan argumen yang di passing tadi).

13. Baris ke-4. Deklarasi variabel baru, yaitu ret . Variabel itu dideklarasikan masih didalam konteks eksekusi lokal.

14. a dan b kemudian ditambahkan dan di assign ke variabel ret.

15. Sekarang ret memiliki nilai yaitu angka 15. Fungsi tersebut mengembalikan (return) variabel ret. Fungsi berakhir, keluar dari konteks eksekusi lokal. Destroy atau hancurkan konteks eksekusi tersebut. Variabel a, b, dan ret sudah tidak ada lagi. Kemudian kembali masuk ke dalam konteks eksekusi global.

16. Nilai dari pengembalian (return) fungsi diatas di assign ke variabel sum yang tadi telah dideklarasikan pada step 9.

17. Kita print out nilai sum ke konsol.

Apa sih poinnya ? Intinya saya ingin memberi tahu bahwa sebuat fungsi bisa mengembalikan (return) sebuah definisi fungsi (function definition). Fungsi hanya akan disimpan didalam memori dan sang JavaScript Engine hanya akan melewatinya saja tanpa membacanya. JavaScript Engine hanya akan membaca definisi fungsi hanya apabila fungsi tersebut di panggil. Ketika masuk dan membaca definisi fungsi, sang Engine akan membuat konteks eksekusi baru. Dan ketika selesai membaca isi / definisi dari fungsi tersebut, maka konteks eksekusi tersebut akan di destroy.

Semoga artikel ini bisa bermanfaat, bagi yang belum kenal sama saya, bisa kenalan dlu. bisa add fb saya disini

<a href='https://www.facebook.com/yudhatamadanang '>https://www.facebook.com/yudhatamadanang </a>

untuk mempermudah membaca artikel, bisa dibaca disini juga <a href=' https://paper.dropbox.com/doc/Belajar-Membaca-Kode-Javascript-Part-2-Fungsi-yang-return-fungsi-3WwmBhHo2JwH3x7Fnh4GF '> https://paper.dropbox.com/doc/Belajar-Membaca-Kode-Javascript-Part-2-Fungsi-yang-return-fungsi-3WwmBhHo2JwH3x7Fnh4GF </a>

sumber <a href='https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8 '>https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8 </a>