Javascript Scope (What is Scope?)

Sumber https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch1.md

Apa itu Scope?

Salah satu hal yang paling mendasar dari banyak bahasa pemrograman adalah kemampuan menyimpan value dalam variable, lalu megambil atau merubah value tersebut. Kemampuan untuk menyimpan value atau -mengambil value biasa disebut dengan state. Ada banyak pertanyaan tentang dimana variable-variable tersebut hidup atau dimana mereka disimpan. Dan yang terpenting bagaimana program menemukan mereka ketika dibutuhkan. Pertanyaan tersebut ada karena dibutuhkannya well-defined rules untuk menyimpan variable di beberapa lokasi, dan menemukannya ketika dibutuhkan. Aturan-aturan tersebut disebut dengan Scope. Tetapi dimana dan bagaimana aturan-aturan dalam Scope dibuat?

Compiler Theory

Banyak orang menyangka bahwa Javascript adalah dynamic atau interpreted language, tetapi faktanya javascript merupakan compiled language, memang tidak seperti traditional compiled language lainnya. Tetapi javascript engine menampilkan langkah-langkah yang sama seperti compiled language yang tradisional.

Pada proses compiled-language yang tradisional, suatu bagian dari source code akan melewati tiga langkah sebelum code tersebut dieksekusi atau biasa disebut “compilation”, yaitu:

1. Tokenizing/Lexing: memecah suatu string kedalam bagian-bagian yang disebut dengan token. Sebagai contoh pada code var a = 2 akan dipecah menjadi var, a, =, 2 dan ;. Spasi tidak dihitung.
2. Parsing: memroses sebuah kumpulan token dan merubahnya kedalam elemen nested tree yang menggambarkan struktur dari program. Tree ini disebut dengan “AST” ( Abstract Syntax Tree) (tulisan tentang AST.)
   Tree untuk var a =2 dimulai dari top-level node yang disebut VariableDeclaration, dengan child node yang disebut Identifier (dimana value nya adalah a), dan child node lain yang disebut AssignmentExpression dan mempunyai child node nya sendiri yang disebut NumericLiteral (yang value-nya adalah 2).
3. Code-Generation: Proses merubah AST menjadi executable code. Bagian ini sangat bergantung pada bahasa pemrograman dan platform yang digunakan.

Understanding Scope

Cara untuk mempelajari scope dengan membayangkan proses tersebut sebagai sebuah percakapan. tetapi siapakah yang melakukan percakapan ini?

The Cast

Mari kita bertemu dengan pelaku yang memroses program var a = 2, jadi kita akan mengerti percakapan yang terjadi:

1. Engine: bertanggung jawab pada saat mulai hingga selesai proses compile dan eksekusi dari program javascript yang kita buat.
2. Compiler: salah satu teman dari Engine, melakukan semua pekerjaan kotor seperti parsing dana code-generation.
3. Scope: teman lain dari Engine: mengumpulkan dan me-maintain kumpulan dari semua variable yang dideklarasikan dan menerapkan aturan-aturan .

Back & Forth

Ketika kita melihat program var a = 2; kita seringkali berpikir bahwa itu adalah satu statement. Tetapi temen baru kita yang bernama Engine tidak meilhatnya seperti itu. Engine meliatnya sebagai 2 buah statement yang berbeda, satu ketika Compiler akan meng-handle saat compilation, dan satu lagi ketika Engine men-handle saat eksekusi.

Jadi mari kita uraikan bagaimana Engine dan kawan-kawan memroses program var a = 2;

Hal pertama yang Compiler lakukan pada program ini adalah melakukan lexing untuk menguraikan program tersebut menjadi token-token, yang kemudian akan dirubah menjadi sebuah tree. Tetapi ketika Compiler mendapatkan sebuah code yang telah digenerate,Terkadang Compiler akan memperlakukan program tersebut berbeda dari apa yang telah diasumsikan

Asumsi yang masuk akal adalah Compiler akan membuat code berdasarkan dari pseudo-code ini: “Mengalokasikan memory untuk sebuah variable dan beri nama a. Kemudian memasukan nilai 2 kedalam variable tersebut. Tetapi sayang sekali hal ini tidak seluruhnya akurat.

Compiler akan melakukan proses seperti ini:

1. Ketika mendapatkan var a, Compiler akan bertanya pada Scope apakah terdapat variable a didalam scope tesebut. Apabila ada compiler akan mengabaikan declarasi tersebut dan melanjutkan proses. Apabila tidak ada compiler akan meminta scope untuk membuat sebuat variable baru bernama a didalam scope tersebut.
2. Kemudian compiler akan membuat code untuk dieksekusi oleh engine untuk meng-handle proses a = 2. Ketika proses dimulai code pada engine akan bertanya pada scope apakah ada variable a yang bisa diakses pada scope tersebut. Apabila ada, Engine akan menggunakan variable tersebut. Apabila tidak, Engine akan mencari ditempat lain. Apabila engine menemukan variable tersebut, engine akan meng-assign nilai 2 pada variable tersebut. Apabila tidak menemukan engine akan mengeluarkan error.

Nested Scope

Seperti yang kita bilang, Scope adalah aturan-aturan dalam mencari variable berdasarkan nama identifier-nya. Sama seperti block atau fungsi yang bisa terdapat dalam block, scope juga bisa ada didalam scope lainnya. Jadi, ketika sebuah variable tidak bisa ditemukan didalam sebuah scope. Engine akan berkonsultasi kepada scope selanjutnya diluar dari scope sebelumnya hingga ke scope terluar (global scope) atau sampai variable itu ditemukan.

function foo(a) {
	console.log( a + b );
}

var b = 2;

foo( 2 ); // 4

pada contoh diatas sebuah RHS (right hand side) untuk b tidak ditemukan didalam fungsi foo. Tetapi variable tersebut dapat ditemukan di scope yang mengelilinganya dalam contoh diatas berupa global scope. Penjelasan sederhananya adalah Engine mulai pada current excecuting scope mencari variable disana, apabila tidak ada, engine akan mencari scope diatasnya hingga ke global scope.

Kesimpulan

Scope adalah kumpulan aturan-aturan yang menetukan dimana dan bagaimana sebuah variable bisa ditemukan.