Cakupan kode (scope code) Javascript adalah area dari cakupan kode agar bisa berjalan maupun diakses oleh kode lainnya. Dalam sebuah file javascript, terdapat tiga jenis scope, yakni global scope, local scope, dan block scope.
Global Scope
Global scope adalah kode yang cakupannya di seluruh file javascript sehingga bisa diakses oleh semua fungsi yang ada di dalam file javascript. Agar bisa menjadi Global scope, maka kode perlu di tulis di dasar atau root dari file javascript.
Perhatikan contoh kode berikut :
|
|
Output kode di atas adalah adanya alert dan output pada console berisi nilai dari variabel greeting
.
Dari kode diatas variabel greeting
bisa dipanggil di dalam fungsi printAlert
dan juga bisa menjadikan variabel greeting
sebagai argument untuk memanggil fungsi printConsole
. Ini adalah salah satu contoh kemampuan variabel pada global scope untuk diakses oleh kode lain di dalam satu file Javascript.
Local Scope
Local Scope atau function scope adalah cakupan kode yang hanya dapat diakses dari dalam fungsi itu saja dan tidak bisa diakses oleh kode di luar fungsi tersebut.
Perhatikan contoh kode berikut :
|
|
Output dari kode di atas adalah adanya alert berisi nilai variabel greeting
namun output pada console hanya berisi undefined
, hal ini terjadi karena variabel greeting
hanya dapat diakses oleh kode yang ada di dalam fungsi printAlert
.
Berikut ini contoh local scope yang diakses oleh fungsi di dalamnya fungsi javascript :
|
|
Variabel yang dibuat menggunakan keyword var
akan menjadi local variabel di dalam fungsi.
Block Scope
Block scope adalah cakupan kode yang hanya terbatas pada block code saja. Block code adalah area yang ada di antara kurung kurawal {
dan }
.
Perhatikan contoh block scope berikut ini :
|
|
Error terjadi dikarenakan console log kedua tidak bisa mengakses variabel greeting.
Variabel yang dibuat menggunakan let
dan const
akan menjadi block variabel yang tidak bisa diakses di luar block kode.
Test Pemahaman Tentang Scope
Coba tebak terlebih dahulu output kode berikut sebelum dijalankan:
|
|
|
|
Manfaat Memahami Scope
Manfaat dari memahami scope atau cakupan kode Javascript antara lain:
- Memudahkan pembacaan kode
- Menghindari duplikat variabel, nama variabel dalam satu scope harus unik
- Pemahaman referensi variabel yang lebih baik
Closure
Closure Javascript adalah cara pengaksesan variabel dari parent scope di dalam children scope-nya. Beberapa kode di atas telah mencontohkan closure, namun sebagai pengingat kembali silahkan pahami contoh kode berikut ini:
|
|
Dari contoh di atas, closure terjadi ketika variabel text
dipanggil di console log yang merupakan isi fungsi children dari sayHello
.