Memahami Cakupan Kode pada Javascript (Code Scope)

Diperbarui: 25 December 2021

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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var greeting = "Halo rekan-rekan"

function printConsole() {
  console.log(greeting)
}
printConsole()
// Output : Halo rekan-rekan

function printMessage(param) {
  console.log(param)
}
printMessage(greeting)
// Output : Halo rekan-rekan

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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function printConsole() {
  var greeting = "Halo rekan-rekan"
  console.log(greeting)
}
printConsole()
// Output : Halo rekan-rekan

function printMessage(param) {
  console.log(param)
}
printMessage(greeting)
// Output: error: Uncaught ReferenceError: greeting is not defined

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 :

1
2
3
4
5
6
7
8

var printConsole = function () {
  if (true) {
    var greeting = "Hello Guys"
  }
  console.log(greeting)
}
printConsole()
// Output: Hello Guys

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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var printConsole = function () {
  // ini adalah contoh local scope
  if (true) {
    let greeting = "Hello Guys"
    console.log(greeting)
  }
  console.log(greeting)
}
printConsole()

// output:
// Hello Guys
// error: Uncaught ReferenceError: greeting is not defined

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

let a = 1
const function1 = function () {
  console.log(a)
  a = 2
}
a = 3
const function2 = function () {
  console.log(a)
}
function1()
function2()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

let a = 10
const fungsi = function () {
  let a = 11
  if (true) {
    let a = 12
    console.log(a)
  }
  console.log(a)
}

fungsi()
console.log(a)

Manfaat Memahami Scope

Manfaat dari memahami scope atau cakupan kode Javascript antara lain:

1. Memudahkan pembacaan kode
2. Menghindari duplikat variabel, nama variabel dalam satu scope harus unik
3. 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function sayHello(name) { // buat fungsi bernama sayHello dengan parameter name
  var text = 'Hello, ' + name; // buat variabel text
  return function () { // kembalikan nilai yang berupa fungsi
    console.log(text); // untuk menampilkan text pada console log
  };
};

/*
*  return dari fungsi sayHello adalah fungsi lain.
*  variabel fahru di bawah ini nilainya berupa fungsi
*/
var fahru = sayHello("Fahru")

// oleh karenanya, kita perlu memanggil fungsi fahru
fahru() // console: Hello, Fahru

Dari contoh di atas, closure terjadi ketika variabel text dipanggil di console log yang merupakan isi fungsi children dari sayHello.