Scope dalam JavaScript mendefinisikan aksesibilitas variabel, objek, dan fungsi.Ada dua jenis cakupan di JavaScript yaitu :
- Global Scope
- Local Scope
Untuk lebih jelasnya kita akan membahas Global Scope dan Local Scope dan bagaimana contoh dari Syntax itu sendiri .
GLOBAL SCOPE
<!DOCTYPE html> <html> <body> <h1>Demo: JavaScript Global scope</h1> <script> var userName = "Bill"; function modifyUserName() { userName = "Steve"; }; function showUserName() { alert(userName); }; alert(userName); modifyUserName(); showUserName(); </script> </body> </html>
Dalam contoh di atas, variabel userName menjadi variabel global karena dideklarasikan di luar fungsi apa pun. Fungsi modifikatorName () memodifikasi nama pengguna karena nama pengguna adalah variabel global dan dapat diakses di dalam fungsi apa pun. Dengan cara yang sama, fungsi showUserName () menampilkan nilai variabel userName saat ini. Perubahan nilai variabel global dalam fungsi apa pun akan tercerminkan di seluruh program.
Harap dicatat bahwa variabel yang dideklarasikan di dalam fungsi tanpa kata kunci var juga menjadi sebuah variabel global.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>Demo: Global scope</h1>
<script>
function createUserName() {
userName = "Bill";
};
function modifyUserName() {
if(userName)
userName = "Steve";
};
function showUserName() {
alert(userName);
};
createUserName();
showUserName(); // Bill
modifyUserName();
showUserName(); // Steve
</script>
</body>
</html>Dalam contoh di atas, variabel userName dideklarasikan tanpa kata kunci var di dalam createUserName (), sehingga variabel tersebut otomatis menjadi variabel global setelah memanggil createUserName () untuk pertama kali.
Noted
Variabel userName akan menjadi variabel global hanya setelah createUserName () dipanggil setidaknya sekali. Memanggil showUserName () sebelum createUserName () akan memunculkan pengecualian “userName tidak ditentukan”.
LOCAL SCOPE
Variabel yang dideklarasikan di dalam fungsi apa pun dengan kata kunci var disebut variabel lokal. Variabel lokal tidak dapat diakses atau dimodifikasi di luar deklarasi fungsi.
Contoh :
<!DOCTYPE html> <html> <body> <h1>Demo: Local scope</h1> <p id="error"></p> <script> function createUserName() { var userName = "Bill"; } function showUserName() { try{ alert(userName); } catch(ex) { document.getElementById("error").innerHTML = ex; } } createUserName(); showUserName(); // throws error: userName is not defined </script> </body> </html>
Dan hasil nya sebagai berikut :
Dalam contoh di atas, userName bersifat lokal untuk fungsi createUserName (). Itu tidak bisa diakses dalam fungsi showUserName () atau fungsi lainnya. Ini akan memunculkan kesalahan jika Anda mencoba mengakses variabel yang tidak berada dalam lingkup lokal atau global.
Beberapa tips ..
Jika variabel lokal dan variabel global memiliki nama yang sama maka perubahan nilai satu variabel tidak mempengaruhi nilai variabel lainnya.
Contoh jika variabel lokal dan variable global memiliki nama yang sama
<!DOCTYPE html>
<html>
<body>
<h1>Demo: Global & local variable with same name</h1>
<p id="p1"></p>
<p id="p2"></p>
<script>
var userName = "Bill";
function ShowUserName()
{
var userName = "Steve";
document.getElementById("p1").innerHTML = userName; // "Steve"
}
ShowUserName();
document.getElementById("p2").innerHTML = userName; // Bill
</script>
</body>
</html>Dan berikut hasil Syntax di atas :
JavaScript tidak mengizinkan cakupan tingkat blok di dalam {}. Misalnya, variabel yang didefinisikan di blok if dapat diakses di luar blok if, di dalam fungsi.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>Demo: No block level scope</h1>
<script>
function NoBlockLevelScope()
{
if (1 > 0)
{
var myVar = 100;
}
alert(myVar);
}
NoBlockLevelScope();
</script>
</body>
</html>Untuk hasilnya akan menampilkan alert yang berisi nilai 100 .
Point untuk diingat :
1. JavaScript memiliki cakupan global dan cakupan lokal.
2. Variabel yang dideklarasikan dan diinisialisasi di luar fungsi apa pun menjadi variabel global.
3. Variabel yang dideklarasikan dan diinisialisasi di dalam fungsi menjadi variabel lokal untuk
fungsi itu.
4. Variabel yang dideklarasikan tanpa kata kunci var di dalam fungsi apa pun menjadi variabel
global secara otomatis.
5. Variabel global dapat diakses dan dimodifikasi di mana saja dalam program.
6. Variabel lokal tidak dapat diakses di luar deklarasi fungsi.
7. Variabel global dan variabel lokal dapat memiliki nama yang sama tanpa mempengaruhi satu
sama lain.
8. JavaScript tidak mengizinkan cakupan tingkat blok di dalam {} tanda kurung.
