JavaScript Scopes.

What is Scope?

A set of well defined rules for storing variables in any programming language is termed as scope.

Now we know what is scope, take a pause and read the above line again, can you tell why do we need variables in programming language, we use variables everyday after writing hello world program, but why? Life was pretty simple without variables, why do we need this complexity?

One of the most important paradigms of all programming languages is the ability of declaring variables, and later retrieve and modify those values, This ability gives a state to our program.

To understand scope, lets first see how compiler works.

Compiler Theory.

JavaScript is an interpreted language, not a compiled language. A program such as C++ or Java needs to be compiled before it is run. The source code is passed through a program called a compiler, which translates it into bytecode that the machine understands and can execute. In contrast, JavaScript has no compilation step. Instead, an interpreter in the browser reads over the JavaScript code, interprets each line, and runs it. More modern browsers use a technology known as Just-In-Time (JIT) compilation, which compiles JavaScript to executable bytecode just as it is about to run.

Consider this statement:

var x = 100;

For running a JavaScript code these components play important role

1. Engine - Responsible for start to finish compilation and execution
2. Compiler- Handles the work of parsing and code generation.
3. Scope - Maintains a lookup list of all declared identifiers.

var x =100; Compiler will perform lexing to breakdoen into tokens which will then parse into a tree.
compiler will proceed as:

• Encountering var x, compiler will ask scope to check if variables already exist in that particular scope, if so compiler ignores this declaration, Otherwise compiler will ask to declare a new variable called x for that scope.
• Compiler then generates code for engine, later execute the assignment x =100.
• The Engine runs the code generated by compiler and ask the scope if there is a variable x accessible in current scope, if so engine uses the variable and assigns 100 to it. If not then engine will look into a scope above current scope. If engine eventually do not find any variable x then it will yell out an error!

Knowing about engine

While executing the code Engine has to lookup for x in the scope to see whether it is declared or not. In this case Engine will perform LHS LOOKUP and when engine has to assign 100 to x it preforms RHS LOOKUP
for more clarity lets consider an example

function PrintX(x){
console.log(x);
}
PrintX(100);

When this code will we executed by engine the following steps will happen

1. Engine will tell scope that it has a RHS reference to PrintX ,
2. Scope will answer that exist in the scope and it is a function
3. Engine will execute the function PrintX(), again Engine will ask compiler that it has a LHS reference for x with value 100.
4. scope will say that compiler declared a formal parameter to the function PrintX.
5. Engine will assign 100 to x.
6. Engine will again ask scope that it has a RHS look for X.
7. Scope will say it has a variable x.
8. Then the console.log(x) will be executed and result 100.

Nested scope

if scope is unable to find a variable/identifier in current scope then it moves upward a scope and checks there and this continues till it reaches the global scope and still if it didn't get that particular identifier it will yell an error!

to visualize the process of nested scope resolution consider a multistorey building the ground floor is where the current scope lives now suppose the LHS/RHS lookup happens and the identifier is not found, taking the elevator to next floor and searching it there. The topmost floor is where the global state lives.

if the engine is doing a LHS lookup and it didn't find the and arrives into global store it will end up creating a global scope variable. to avoid this we use "strict mode".

Thanks for bearing!