Pada kesempatan kali ini, kita akan membahas tentang salah satu konsep yang sangat penting dalam bahasa pemrograman JavaScript, yaitu "scope". Scope dapat menentukan visibilitas dan aksesibilitas variabel di dalam program JavaScript. Konsep ini mungkin terdengar sedikit rumit pada awalnya, tetapi jangan khawatir, karena kita akan menggunakan analogi dan contoh kode untuk membantu memahaminya dengan lebih baik. Mari kita mulai!

Apa itu Scope?

Mungkin beberapa dari kita sudah mengetahui apa itu scope dan pasti pernah memanfaatkannya. Tapi untuk memudahkan penjelasan, untuk saat ini kita bisa bilang scope itu adalah wilayah untuk melakukan aktivitas.

Mari kita bayangkan bahwa kita berada di dalam sebuah perpustakaan yang besar. Di dalam perpustakaan ini, ada beberapa ruangan yang berbeda. Setiap ruangan memiliki rak buku yang berisi berbagai jenis buku. Nah, perpustakaan ini dapat kita analogikan dengan "scope" dalam JavaScript. Setiap ruangan dalam perpustakaan memiliki batasan tertentu, dan hanya orang-orang yang berada di ruangan itu saja yang dapat mengakses buku-buku di rak tersebut.

Pada mulanya, scope terbagi menjadi 2 bagian yaitu Global Scope dan Local Scope. Akan tetapi semenjak ECMAscript 6 (ES6) rilis. Local Scope dibagi menjadi dua. Yakni Function Scope dan Block Scope. Konsep block scope ini diperkenalkan bersama dengan cara-cara baru untuk mendeklarasikan variabel menggunakan const dan let.

Global Scope

Global Scope adalah lingkup (scope) di mana variabel dideklarasikan di luar semua function atau block kode. Variabel yang dideklarasikan dalam global scope dapat diakses dari mana saja dalam program, baik di dalam function maupun di luar function.

Copycopy code to clipboard
var globalVariable = "Ini adalah variabel global";

function exampleGlobalScope() {
  console.log(globalVariable); // Output: Ini adalah variabel global
}

exampleGlobalScope();

console.log(globalVariable); // Output: Ini adalah variabel global

Pada contoh kode di atas, variabel globalVariable dideklarasikan di luar semua function, sehingga memiliki global scope. Kita dapat mengakses variabel ini baik di dalam function exampleGlobalScope maupun di luar function tersebut.

Variabel dengan global scope juga dapat diakses dan dimodifikasi dari function lain dalam program, asalkan variabel tersebut diakses dengan benar.

Harap diingat bahwa penggunaan variabel global sebaiknya dibatasi untuk menghindari pencampuran dan potensi konflik dengan variabel lokal di dalam function.

Local Scope

Local scope adalah lingkup (scope) di mana variabel dideklarasikan di dalam block kode, seperti function atau block if/else. Variabel yang dideklarasikan di dalam local scope hanya dapat diakses di dalam lingkup tersebut, yaitu di dalam function atau block kode di mana mereka dideklarasikan.

Copycopy code to clipboard
function exampleLocalScope() {
  var x = 10; // variabel x memiliki local scope di dalam function exampleLocalScope
  console.log(x); // Output: 10

  if (true) {
    var y = 20; // variabel y memiliki local scope di dalam block if
    console.log(y); // Output: 20
  }

  console.log(y); // Output: 20 (y masih dapat diakses di dalam block if)
}

exampleLocalScope();

console.log(x); // Error: x is not defined (tidak dapat diakses di luar function)
console.log(y); // Error: y is not defined (tidak dapat diakses di luar block if)

Pada contoh kode di atas, variabel x dideklarasikan di dalam function exampleLocalScope, sehingga hanya dapat diakses di dalam function tersebut. Demikian pula, variabel y dideklarasikan di dalam block if, sehingga hanya dapat diakses di dalam block if tersebut. Di luar function atau block if, kita tidak dapat mengakses variabel x dan y, dan akan mendapatkan kesalahan.

Block Scope

Block scope berarti bahwa variabel yang dideklarasikan di dalam block kode tertentu hanya dapat diakses di dalam block tersebut. block kode dalam JavaScript biasanya ditandai dengan menggunakan tanda kurung kurawal {}. Contoh block kode umum adalah block if, block for, atau block while.

Copycopy code to clipboard
function exampleBlockScope() {
  if (true) {
    var x = 10; // variabel x hanya dapat diakses di dalam block if ini
    let y = 20; // variabel y hanya dapat diakses di dalam block if ini
    const z = 30; // variabel z hanya dapat diakses di dalam block if ini

    console.log(x); // Output: 10
    console.log(y); // Output: 20
    console.log(z); // Output: 30
  }

  console.log(x); // Output: 10 (masih dapat diakses di luar block if)
  console.log(y); // Error: y is not defined (tidak dapat diakses di luar block if)
  console.log(z); // Error: z is not defined (tidak dapat diakses di luar block if)
}

exampleBlockScope();

Pada contoh kode di atas, variabel x yang dideklarasikan dengan kata kunci var dapat diakses di luar block if karena variabel var memiliki "function scope". Namun, variabel y yang dideklarasikan dengan kata kunci let dan variabel z yang dideklarasikan dengan kata kunci const hanya dapat diakses di dalam block if, karena keduanya memiliki "block scope".

Function Scope

Function scope berarti variabel yang dideklarasikan di dalam sebuah function hanya dapat diakses di dalam function tersebut. Variabel yang dideklarasikan di luar function memiliki "global scope" dan dapat diakses dari mana saja dalam program.

Copycopy code to clipboard
function exampleFunctionScope() {
  var x = 10; // variabel x dapat diakses di dalam function ini

  if (true) {
    var y = 20; // variabel y dapat diakses di dalam function ini
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }

  console.log(x); // Output: 10
  console.log(y); // Output: 20 (y masih dapat diakses di luar block if)
}

exampleFunctionScope();
console.log(x); // Error: x is not defined (tidak dapat diakses di luar function)
console.log(y); // Error: y is not defined (tidak dapat diakses di luar function)

Pada contoh kode di atas, variabel x dan y yang dideklarasikan dengan kata kunci var memiliki "function scope". Mereka dapat diakses di dalam function tersebut, termasuk di dalam block if. Namun, ketika mencoba mengakses variabel x dan y di luar function, kita akan mendapatkan kesalahan karena variabel tersebut tidak dapat diakses di luar function scope.

Nah, selain Global Scope dan Local Scope yang sudah kita bahas sebelumnya, Javascript juga memiliki konsep lain tentang scope yang di sebut Lexical Scope. Jika kita kembali ke analogi buku dan perpustakaan sebelumnya, bayangkan anda sedang berada di dalam sebuah ruangan perpustakaan yang memiliki ruangan VIP dan rak khusus di dalamnya. Maka yang di maksud dengan Lexical Scope adalah buku yang tidak di letakkan di rak manapun, melainkan di letakkan di dekat pintu masuk ruangan perpustakaan. Sehingga semua orang (yang berada di ruangan VIP atau ruangan reguler) bisa membaca buku tersebut.

Lexical Scope (Static Scope)

Lexical scope berarti bahwa lingkup (scope) variabel ditentukan oleh tempat di mana variabel tersebut dideklarasikan secara fisik dalam kode, yaitu pada waktu penulisan kode. Dalam lexical scope, saat kita membuat sebuah function di dalam function lain, function yang berada di dalam (nested) akan memiliki akses ke variabel yang dideklarasikan di dalam function induk (outer function).

Copycopy code to clipboard
function outerFunction() {
  var x = 10;

  function innerFunction() {
    console.log(x); // Output: 10 (variabel x diakses dari lexical scope)
  }

  innerFunction();
}

outerFunction();

Pada contoh kode di atas, variabel x dideklarasikan di dalam function outerFunction. Kemudian, function innerFunction yang berada di dalamnya memiliki akses ke variabel x karena variabel tersebut berada dalam lexical scope. Ketika kita memanggil innerFunction, variabel x dapat diakses dan dicetak di konsol.

Demikian pembahasan tentang Memahami Scope di Javascript. Semoga artikel ini bermanfaat untuk teman-teman yang ingin memahami scope lebih baik lagi. Sampai jumpa di artikel selanjutnya. Terima kasih :)