Belajar Membaca Kode Javascript Part 2 : lexical scope

Part kali ini saya bakal mencoba membahas dan membaca kode javascript lagi yang berkaitan dengan lexical scope. Ga usah panjang-panjang intronya langsung saja ke contoh, sehingga teman-teman bakalan lebih mudah memahami apa itu lexical scope.

mari kita lihat contoh kode dibawah ini

    1: let val1 = 2
    2: function multiplyThis(n) {
    3:   let ret = n * val1
    4:   return ret
    5: }
    6: let multiplied = multiplyThis(6)
    7: console.log('example of scope:', multiplied)

Intinya pada kode diatas, kita dapat melihat adanya variabel pada konteks eksekusi global ( val1) dan pada konteks eksekusi lokal (ret). Yang menarik disini adalah bagaimana “javascript” menemukan atau mencari value dari sebuah variabel. Apabila “javascript” sedang berada didalam sebuat konteks eksekusi lokal dan tidak menemukan value dari variabel yang dicari, maka “javascript” akan mencoba keluar dari konteks eksekusi tersebut dan mencari di konteks eksekusi yang memanggil konteks eksekusi tadi, begitu seterusnya sampai konteks eksekusi global. Apabila sampai konteks eksekusi global tidak ditemukan juga valuenya maka variabel tersebut dinyatakan undefined . Mari kita bedah kode diatas dengan menggunakan step-step agar lebih mudah dicerna

1. Pertama-tama kita deklarasi variabel val1 pada konteks eksekusi global dan memberikan value angka 2.

2. Pada baris 2-5, kita membuat pointer di dalam memori yang mereferensikan pada fungsi multiplyThis.

3. Pada baris ke-6, deklarasi variabel baru multiplied pada konteks eksekusi global.

4. Masih pada baris yang sama, kita panggil fungsi multiplyThis dengan memasukkan angka 6 sebagai argumen.

5. Ketika kita memanggil suatu fungsi tandanya terbentuk eksekusi konteks lokal / fungsi baru.

6. Di dalam konteks eksekusi kita deklarasikan variabel n dan berikan nilai angka 6.

7. Pada baris ke 3, di dalam konteks eksekusi fungsi, kita deklarasikan variabel ret.

8. Masih pada baris yang sama, kita melakukan perkalian dengan dua variabel, yaitu n dan val1. “javascript” mencoba mencari masing-masing nilai dari kedua value tersebut. Untuk value dari variabel n kita sudah deklarasikan pada step ke 6. Sementara itu, variabel val1 tidak ditemukan di dalam konteks eksekusi fungsi ini. Sekarang saatnya “javascript” keluar dari dalam konteks eksekusi fungsi tersebut, dan masuk ke dalam konteks eksekusi yang memanggilnya. Pada kasus kali ini konteks eksekusi yang memanggil konteks eksekusi lokal adalah konteks eksekusi global. Maka “javascript” mencari nilai / value dari variabel val1 pada konteks eksekusi global, dan menemukannya ! nilainya adalah 2.

9. Lanjut lagi, masih pada baris ke-3. Kalikan kedua nilai dari variabel tadi, yaitu 6 * 2 = 12. Sekarang ret memiliki nilai 12.

10. Kembalikan (return) variabel ret. Sekarang konteks eksekusi local (fungsi multiplyThis yang tadi dipanggil) destroyed (hancur), begitu juga dengan variabel n dan ret karena keduanya dideklarasikan didalam konteks eksekusi tersebut. Berbeda dengan variabel val1 dia tetap ada karena konteks eksekusi global masih hidup.

11. Kembali ke baris ke 6. Pada konteks yang memanggilnya, angka 12 yang merupakan return dari fungsi yang dipanggil dijadikan varlur dari variabel multiplied.

12. Akhirnya pada baris ke 7, kita tunjukan melalui konsol nilai dari variabel multiplied.

Sekarang dapat dipahami, bahwa sebuah fungsi memiliki akses variabel yang dideklarasikan pada konteks eksekusi yang memanggilnya. Peristiwa diatas dinamakan lexical scope!

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=' +Belajar Membaca Kode Javascript Part 2 : lexical scope '> +Belajar Membaca Kode Javascript Part 2 : lexical scope </a>