Modul 3-5. Variable Scope

Pendahuluan

Halo teman-teman semua selamat datang kembali di Javascript Course dari nusantech academy. Sebelum teman-teman melanjutkan membaca materi ini, diharapkan teman-teman sudah mengerti tentang materi-materi pada modul 2, yaitu tentang javascript dasar. Di dalam modul 2 kita sudah membahas cara membuat variabel dan dasar-dasar bahasa pemrograman javascript lainnya.

Variable Scope

Pada pembahasan kali ini kita akan membahas tentang variable scope (ruang lingkup variabel). Variable scope berguna dalam menentukan visibilitas dan aksesibilitas dari sebuah variabel. Terdapat tiga jenis scope dalam javascript, yaitu global scope, local scope dan block scope.

Global Scope

Saat kita mengeksekusi atau menjalankan kode program yang telah kita buat, javascript engine akan membuat global execution context, yaitu tempat dimana kode javascript yang di luar fungsi-fungsi javascript akan dievaluasi dan dieksekusi. Tempat evaluasi dan eksekusi kode fungsi javascript dinamakan function execution context. Jadi, secara sederhana global scope adalah ruang lingkup di luar ruang lingkup fungsi-fungsi dalam kode javascript yang kita buat.

Variabel yang dideklarasikan dalam global scope biasa disebut variabel global. Variabel global dapat diakses dan dimodifikasi hampir dimana saja di dalam kode program yang kita buat. 

Contoh variabel global: 

let x = 10;
 
function test() {
   console.log('nilai x: ',x)
   x = 9
   console.log('nilai perubahan x: ',x)
}
 
test()
console.log('nilai global x: ',x)

Variabel x adalah variabel global yang bisa diakses di dalam fungsi mana saja yang ada dalam kode kita. Dalam contoh di atas, kita mencoba mengakses variabel x di dalam fungsi test(). Di dalam fungsi tersebut kita berhasil mengakses dan memodifikasi variabel x yang awalnya bernilai 10 menjadi 9.

Terdapat kasus unik dan penting untuk diingat di dalam javascript, yaitu saat kita mendeklarasikan variabel tanpa menggunakan keyword var, let atau const, maka variabel tersebut akan secara otomatis menjadi variabel global. Contohnya: 

function test() {
   y = 100
}
 
test()
console.log('nilai global y: ',y)

Di dalam contoh di atas, variabel y yang dideklarasikan dalam fungsi test() dapat diakses di luar fungsi test() tersebut. Ini berarti bahwa variabel y merupakan variabel global. Menjadi sebuah bestpractice untuk selalu menggunakan keyword var, let atau const untuk mendeklarasikan sebuah variabel. Dengan begitu, kita dapat scope dari masing-masing variabel dan mencegah terjadinya error kedepannya.

Local Scope

Local scope adalah ruang lingkup dalam sebuah fungsi dalam javascript. Local scope juga sering disebut function scope. Variabel yang dideklarasikan dalam local scope hanya bisa di akses dalam scope tersebut dan tidak dapat diakses secara global atau local scope yang lain. Contohnya:

function test() {
   let y = 100
   console.log('nilai local y: ',y)
}
 
test()
console.log('nilai global y: ',y)

Pada contoh di atas, dapat dilihat muncul sebuah error ketika kita mencoba mengakses local variabel y di luar fungsi test(). Jadi variabel lokal, tidak bisa diakses di luar dari scopenya.

Jika kita membuat sebuah variabel lokal yang memiliki nama yang sama dengan variabel global, maka kedua variabel tersebut tidak akan bertabrakan satu sama lain. Contohnya:

let y = '10'
 
function test() {
   let y = 100
   console.log('nilai local y: ',y)
}
 
test()
console.log('nilai global y: ',y)

Block Scope

Dari update ES6, terdapat dua keyword baru untuk mendeklarasikan variabel, yaitu let dan const. Let dan const ini dapat digunakan untuk mendeklarasikan variabel dalam block scope. Secara umum, block scope adalah ruang lingkup di dalam area kurung kurawal {}, seperti if statement, switch statement, for loop, while loop, dan do while loop. Variabel yang dideklarasikan dalam block scope biasa disebut block level variable. Contoh block scope:

function test() {
 
   let y = 100
   console.log('nilai local y: ',y)
 
   if(y > 99) {
       let y = 1000
       console.log('nilai block y: ', y)
   }
}
 
test()
console.log('nilai global y: ',y)

Dari contoh di atas, kita bisa melihat bahwa pada blok if statement terdapat variabel y yang memiliki nilai khusus untuk blok tersebut. Jika kita mencoba melihat nilai variabel y di luar blok if statement, maka kita akan mendapatkan nilai variabel y sesuai scope nya dan akan bernilai error jika variabel y tidak ada atau belum dideklarasikan dalam scope tersebut.

Penutup

Jadi untuk mereview materi yang telah kita bahas, variable scope dalam javascript dapat berguna untuk menentukan visibilitas dan aksesibilitas dari sebuah variabel. Terdapat tiga jenis scope dalam javascript, yaitu global scope, local scope atau function scope dan block scope. Global scope adalah scope yang paling luar dari kode program kita. Variabel yang dideklarasikan dalam global scope biasa disebut variabel global. Local scope atau function scope adalah scope yang berada dalam masing-masing fungsi dari kode program kita. Biasanya variabel yang dideklarasikan dalam local scope disebut variabel lokal. Block scope adalah scope yang ada di dalam area kurung kurawal {} seperti di if statement, switch statement, for loop, while loop dan do while loop. Variabel dalam block scope biasa disebut block level variable.

Baik teman-teman, saya rasa cukup untuk materi tentang variable scope ini. Tetap semangat mengikuti Javascript Course dari Nusantech Academy.

Thank you and see you next time!

Quiz Time:

Output dari kode program di bawah adalah:

if (true) {
   const a = 'Pernyataan Benar';
   console.log(a);
 }
 console.log(a);

a. 2 pernyataan ‘ Pernyataan Benar’

b. ‘Pernyataan Benar’ dan Error

c. Error dan ‘Pernyataan Benar’

d. 2 pernyataan Error

Berikut adalah bukan jenis scope dalam javascript:

a. Block scope

b. Local scope

c. Global scope

d. Foreign scope