Belajar Membaca Kode Javascript

Sebelumnya saya sudah menulis dasar-dasar bagaimana cara ‘komputer’ membaca kode javascript. Agar teman-teman lebih mudah memahami artikel yang ini, sebaiknya baca dulu tulisan yang sebelumnya disini <a href='https://sekolahkoding.com/forum/apa-itu-execution-context-dan-execution-stack-pada-javascript '>https://sekolahkoding.com/forum/apa-itu-execution-context-dan-execution-stack-pada-javascript </a> . Sekarang saya mau mencoba membedah kode javascript lainnya,

    1: let a = 3
    2: function addTwo(x) {
    3:   let ret = x + 2
    4:   return ret
    5: }
    6: let b = addTwo(a)
    7: console.log(b)

Teman-teman bisa jelaskan bagaimana ‘komputer’ membaca kode diatas ?

OK, bagi yang belum paham bagaimana, mari kita bedah bersama-sama :

1. Pada baris pertama kita mendeklarasikan variabel a di dalam konteks eksekusi global dan memberikan angka 3 sebagai nilainya.

2. Selanjutnya sedikit nyeleneh, Mulai dari baris ke 2 sampai ke-5 dianggap menjadi satu kesatuan. ‘komputer’ akan membuat pointer pada memori yang menunjuk pada fungsi addTwo, dan pointer ini ada di konteks eksekusi global. Isi dari fungsi tersebut tidak akan ‘dibaca’ dan dilewati begitu saja. Hanya disimpan pada memori, kalau-kalau nanti dibutuhkan.

3. Pada baris ke 6, kita mendeklarasikan variabel b pada konteks eksekusi global yang pada awalnya memiliki value undefined.

4. kemudian masih pada baris yang sama, baris ke 6. Pada variabel b diberikan (assign) berupa return dari fungsi yang akan dipanggil, fungsi yang akan dipanggil ditandai dengan (…). Setiap fungsi pasti mengembalikan (return) sesuatu, bisa fungsi, objek, atau undefined. Apapun yang di-return oleh fungsi tersebut akan disimpan (assigned) di variabel b.

5. Tetapi sebelumnya kita harus memanggil fungsi tersebut. Sang ‘komputer’ akan melihat apa yang ada pada memori konteks eksekusi global, apakah menyimpan pointer menuju fungsi tersebut ? Ternyata ya, kita telah menyimpannya pada step ke 2. Perhatikan bahwa variabel a nilainya dimasukkan sebagai argumen pada fungsi yang dipanggil, fungsi addTwo. ‘Komputer’ akan mencari pada memori di konteks eksekusi global, apakah ada variabel a, dan berapa nilainya. Ok ! Ketemu dan nilainya 3, kemudian angka 3 tersebut dimasukan sebagai argumen pada fungsi addTwo tadi. Bersiap mengeksekusi fungsinya !

6. Sekarang kita masuk kedalam fungsi, artinya konteks eksekusinya berubah. Sekarang kita masuk kedalam konteks eksekusi fungsi (lokal). Sebut saja namanya, “konteks eksekusi AddTwo”. Eksekusi konteks ini akan dimasukan ke tumpukan eksekusi konteks.

7. Pertanyaannya apa yang pertama kali terjadi di konteks eksekusi ini ? pasti ada yang bilang variabel ret bakal dideklarasikan pada konteks eksekusi lokal. Eits, tapi itu jawaban yang salah. Yang bener, kita lihat pada parameter yang ada pada fungsi → yaitu x, dan angka 3 dimasukan ke dalam fungsi sebagai argumen. Maka variabel x akan dideklarasikan dan diberikan nilai angka 3.

8. Setelah itu barulah variabel ret dideklarrasikan pada konteks eksekusi lokal. Dengan value masih undefined. (pada baris ke3)

9. masih di baris ke-3, kita butuh nilai dari x. maka ‘komputer’ akan mencari variabel x. Pertama-tama konteks eksekusi lokal akan discan. Dan ternyata ketemu, nilainya 3. Sekarang variabel ret sudah bisa ditentukan nilainya yaitu (3 + 2). Angka 5 dijadikan nilai yang disimpan pada variabel ret.

10. Pada baris ke-4, return disitu berarti fungsi akan mengembalikan nilai yang dimiliki variabel ret, yaitu angka 5. Fungsi yang kita panggil tadi mengembalikan angka 5. dan kemudian dungsi berakhir.

11. Pada Baris 5, ditandai dengan penutupan “}” tanda berakhirnya fungsi, maka semua variabel yang sudah dideklarasikan tadi, x dan ret, akan dihapus dari memori. Mereka sudah tidak ada lagi, lenyap! Konteks eksekusi AddTwo berakhir dan dibuang dari tumpukan eksekusi. Sekarang berlanjut, kembali memasuki konteks eksekusi global, karena tadi fungsi addTwo dipanggil ketika berada di konteks eksekusi global. Maka kembali lagi ke awalnya.

12. Ini merupakan kelanjutan kisah dari variabel b yang tadi sempat dibicarakan di step ke-4. Variabel b akhirnya mendapatkan nilai 5, dimaka angka 5 tersebut diperoleh dari apa yang di return oleh fungsi yang dipanggil tadi.

13. Terakhir, ga perlu panjang lebar, intinya b bakalan di print di konsol, angka 5 akan di print di konsol.

Panjangggnyaa, padahal ini kode pendek banget. Semoga dengan artikel ini, temen-temen bisa semakin paham bagaimana javascript mengolah kode-kode yang kita ketik! terus belajar, selamanya !

oh ya, 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-dc4vK0x0TW1N6XRvuB4mH '>https://paper.dropbox.com/doc/Belajar-Membaca-Kode-Javascript-dc4vK0x0TW1N6XRvuB4mH </a>