SESI 31 - FUNCTION PADA JAVASCRIPT: VARIABLE SCOPE

Membahas scope/lingkup variabel → bagaimana sebuah variabel dapat diakses dalam program kita. Dalam bahasa pemrograman ada 2 jenis scope: block scope vs function scope. Jadi ada bahasa pemrograman yang memiliki konsep blok scope dan ada juga yang memakai konsep function scope.

1. Block Scope → digunakan untuk bahasa pemrograman seperti C dan JAVA.
Contoh:
Bahasa C
int i = 2; // deklarasi sebuah variabel i, tipe data integer dengan nilai 2.
if (i%2==0){ // cek menggunakan pengkondisian if. Jika sisa hasil bagi i thdp 2 == 0 maka jika benar
bool genap = true; // maka buat variabel genap dengan nilai true, tipe data boolean
}
if(genap){ //jika genap bernilai true (truthy value) maka cetak tulisan genap kelayar
printf("GENAP!");
}
Jika ditampilkan di layar akan error → 'genap' is undeclared.
Hal ini terjadi karena variabel genap yang disebut pada blok scope {...} if pertama hanya berlalu di dalam blok scope itu sendiri tidak bisa diakses diluar blok nya. Ini yang disebut blok scope.

Jika dibuat di dalam bahasa pemrograman javascript, maka codenya yaitu:

var i = 2;

if (i%2==0){

     var genap = true;

}

if(genap){

    console.log('GENAP!');

}

Akan tampil di console karena javascript menggunakan function scope.

Contoh :

//Global scope / window scope

var a = 1; → variabel global yang bisa digunakan dimanapun program di dalam kita, object window → object paling luar di dalam browser kita. Jika ditulis di console browser kita window.a ↲ hasilnya 1 dan untuk mengecek apakah sama atau tidak maka window.a === a ↲ true.
Contoh lainnya:

var a = 1;
function tes(){
var b = 2;
}
tes();
console.log(b);

Fungsi di atas sudah membuka function scope, artinya variabel apapun yang dibuat di dalam fungsi ini hanya berlaku untuk fungsi ini saja. Jika di jalankan console browser tampil "b is not defined". Kita tidak bisa mengenali b, jadi variabel b hanya bisa digunakan di dalam fungsi, ini yang disebut dengan function scope. jika console.log(b) dipindahkan ke dalam fungsi tes() maka tampil 2 di console browser.

+ Bagaimana jika begini
var a = 1;
function tes(){
var b = 2;
console.log(a);
}
tes();

Console browser akan tampil angka 1, jadi di dalam function bisa mengakses variabel global tetapi di luar function kita tidak bisa mengakses variabel lokal di dalam function. Bayangkan seperti mobil, dimana fungsi adalah mobil dengan kaca film yang gelap sekali, variabel yang di dalam fungsi = orang yang ada di dalamnya sehingga orang luar tidak bisa melihat orang yang di dalam mobil, sedangkan orang yang di dalam mobil bisa melihat orang di luar. Maka,
var = 1;
function tes(){
var b = 2;
console.log(a);
}
tes();
console.log(b);

Di console browser akan tampil 1 dan "b is not defined" artinya a tampil tetapi b tidak diketahui (orang diluar tidak bisa melihat ke dalam isi mobil).

+Sekarang seperti ini
var a = 1;
function tes(){
var a=2;
console.log(a);
}
tes();
Maka di console browser tampil angka 2, jika console.log(a) dipindah di luar maka yang tampil angka 1. Hal ini disebut name conflict → namanya sama tetapi scopenya berbeda. Jadi var a = 2; di dalam fungsi tidak menimpa var a = 1; karena berbeda scope (2 variabel yang berbeda). Bagaimana mengakses variabel global yang sama dengan variabel lokal di dalam function:

var a = 1;
function tes(){
var a = 2;
console.log(window.a);// variabel window/global
}
Variabel window/global yang dimaksud ini bukan variabel lokal.

+Bagaimana jika seperti ini
var a = 1;
function tes(){
a=2;
}
tes();
console.log(a); → mengacu pada variabe global
Pada kasus ini javascript di dalam fungsi tes() mengecek ada di dalam fungsi tes() apakah ada deklarasi variabel a. Jika ada maka dibuat variabel lokal, jika tidak ada maka fungsi tes() akan mengintip keluar apakah ada deklarasi variabel a, ternyata ada yaitu var a = 1; maka a = 2 akan menimpa 1 sehingga console.log(a) menampilkan angka 2 di console browser.

+Bagaimana jika seperti ini
function tes(){
a=2;
}
tes();
console.log(a);
Console browser tampil angka 2. Hal ini terjadi saat javascript meihat fungsi tes() ke dalam tidak ada keyword var dan tidak ada variabel lokal sehingga a = 2; bukan variabel lokal, trus melihat keluar ada deklarasi variabel a ternyata tidak ada juga, maka yang terjadi javascript otomatis membuat variabel a di luar, tetapi tidak kelihatan, code:

var a;
function tes(){
a=2;
}
tes();
console.log(a);
Sehingga a di dalam fungsi adalah variabel global. Hati-hati! Jika maksudnya membuat variabel lokal maka pastikan menulis keyword var di dalam fungsi var a=2; pada fungsi tes(), kaena ketika tidak menulis var a =2; didalam fungsi maka otomatis javascript akan membuat variabel a → var a; di global scope tanpa diberitahu user. Hal ini dapat mengotori global scope, walaupun tujuannya yaitu membuat variabel lokal, untuk dipakai di dalam function tes(). Untuk mengatasinya bisa digunakan keyword var untuk deklarasi variabel di dalam fungsi atau bisa menggunakan seperti ini

"use strict";
function tes(){
a=2
}
tes();
console.log(a);

Javascript akan menggunakan mode strict, artinya ketika menulis a=2; di dalam function maka javascript akan paham bahwa anda membuat variabel lokal sehingga var a; dibuat di dalam fungsi bukan di luar fungsi sehingga global scope tidak terkotori, sehingga jika code tadi dijalankan maka console.log(a) diluar tidak akan bisa akses a=2; di dalam fungsi, sehingga console browser menampilkan "a is not defined".

+Bagaimana jika begini:

var a = 1;
function tes(a){
console.log(a);
}
tes(2);

Console browser akan tampil angka 2 karena var a = 1; tidak terpakai, ketika buat sebuah argument, argument ini akan selalu menjadi lokal-variabel meskipun kita tidak menuliskan keyword var dalam parameter fungsi. Jika kode dirubah

var a = 1;
function tes(a){
console.log(a)
}
tes(2);
console.log(a);

Di console browser akan tampl angka 2 dan 1. Angka 2 karena fungsi tes() dipanggil dengan argument 2, dan angka 1 karena a mengacu pada variabel global.

+Bagaimana jika seperti ini

var a = 1;
function tes(a){
console.log(a);
}
tes(a);
console.log(a);

Hasil di browser akan tampil 1 dan 1
Yang terjadi ada 2 jenis variabel yaitu global dan lokal:
+Global → var a = 1, tes(a); console.log(a) mengacu pada global scope.
+Lokal → function tes(a){console.log(a);}

Hal ini ynag bisanya membuat bingung programmer. Perhatikan dan pahami baik-baik.