Javascript Fundamental — Scope : Part 2 [Bahasa Indonesia]

“Javascript Fundamental — Scope adalah series yang akan membahas scope di Javascript sedikit lebih mendalam. Saya membaginya dalam beberapa bagian, dan series ini masih dalam proses pengerjaan. Oleh karena itu, bagian-bagian selanjutnya dari series ini akan saya publish secepat mungkin. Saya juga menyarankan anda untuk membaca series ini secara berurutan.“

1. Bagian 1 : Konsep LHS & RHS look-up, proses Engine memproses variable, konsep Scope & Nested Scope.
2. Bagian 2 : Lexical Scope & Shadowing Variable
3. Bagian 3 : Function scope, Global Namespace, IIFE, dan Block Scope

Lexical Scope

Di bagian pertama kita telah berkenalan dengan Engine, Compiler, Scope yang berperan sebagai aktor untuk memproses variabel. Kita juga sudah mengenal metode yang digunakan Scope untuk mencari eksistensi sebuah identifier/variabel, yaitu LHS look-up dan RHS look-up.

Kali ini kita akan berkenalan dengan Lexical Scope. Sebenarnya tidak ada yang baru, Lexical Scope hanya apa yang kita sudah lihat berulang kali sebelumnya.

Gampangnya, Lexical Scope adalah scope dimana variabel tertentu didefinisikan/ditulis. Sebagai contoh :

function foo(a) {
  var b = a * 2;
  
  function bar(c) {
    console.log( a, b, c );
  }
  bar(b * 3);  
}
foo(2); // 2 4 12

Pada kode di atas, terdapat 3 scope bersarang. Pikirkan scope di atas seperti gelembung di dalam gelembung.

1. Gelembung 1 : global scope, punya satu identifier. Yaitu : foo
2. Gelembung 2 : scope milik foo , yang mempunyai 3 identifier. Yaitu a, b, dan bar.
3. Gelembung 3 : scope milik bar, yang mempunyai 1 identifier. Yaitu c.

Masing-masing scope/gelembung diciptakan berdasarkan dimana ia ditulis. Setiap function menciptakan sebuah gelembung baru miliknya sendiri.

bubble scope

Mungkin saja kamu penasaran, “kenapa harus ada istilah Lexical Scope? Padahal ya intinya scope biasa, kan?”

Jawabannya karena pada dasarnya Lexical Scope itu bersifat static, yang artinya scope tersebut berada tepat dimana blok kode itu ditulis, dan BUKAN dimana function itu dipanggil.

Selain itu, ada scope lain di Javascript yang bersifat dynamic yaitu keyword this, yang mana scope nya tergantung bagaimana kita memanggil function tersebut. Tapi tentu kita tidak akan bahas this sekarang, karena pembahasannya cukup panjang dan out of topic.

Pencarian variabel (look-ups)

function foo(a) {
  var b = a * 2;
  
  function bar(c) {
    console.log( a, b, c );
  }
  bar(b * 3);  
}

Pada kode di atas, ketika Engine mengeksekusi console.log(..) di dalam blok function bar(..), aktor Scope akan membantu Engine mencari referensi dari variabel a, b, dan c (dengan metode RHS look-ups tentunya 😉) .

Scope akan mencari masing-masing variabel a, b, dan c di dalam blok bar(..) . Dalam kasus variabel a, karena variabel a tidak ditemukan disana, maka pencarian dilakukan di scope luarnya yaitu di dalam blok foo(..). Variabel a ketemu, maka Scope berhenti mencari variabel a. Hal yang sama berlaku untuk variabel b, dan c.

Shadowing

Pada contoh di atas, katakanlah jika ternyata variabel a berada di dalam blok bar(..) dan blok foo(..), maka yang akan dipakai adalah yang berada di dalam blok bar(..).

Hal ini disebut dengan istilah Shadowing (Kondisi dimana variabel dengan nama yang sama di dalam sebuah scope membayangi variabel dengan nama yang sama di scope luarnya).

Scope berhenti mencari referensi variabel setelah variabel tersebut ketemu.

Contoh lain Shadowing Variable :

var a = 1;
function foo() {
  var a = 5;
  var b = 6;
  
  console.log(a); // 5
  function bar(b) {
    console.log(b);
  }
  
  console.log(b); // 6
  bar(10); // 10
}
foo();
console.log(a); // 1

There is no new things under the sun. Tulisan ini diadaptasi dan terinpirasi dari buku Kyle Simpson berjudul You Don’t Know JS: Scope & Closures https://www.amazon.com/gp/product/1449335586

✍ Jika ada penulisan yang salah atau pertanyaan silahkan kirim respon/komentar