Scope & Closures Chapter 1

YDKJSY Scope & Closures

Chapter 1 : What is Scope?

JavaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you do. ― Dmitry Baranovskiy

Where do variables live? Where are they stored? And how does our program find them when it needs them?

Click to view full text

Compiler Theory

Our code undergoes three steps before being executed:

Tokenizing

breaks up a string of code characters into meaningful chunks, called tokens.

Parsing

takes a stream of tokens and turns it into a tree of nested elements. This tree is called an "AST" (Abstract Syntax Tree).

Code-Generation

takes the AST and turns it into a set of machine instructions to actually create a variable.

Understanding Scope

The Cast

Engine

responsible for start-to-finish compilation and execution.

Compiler

handles parsing and code-generation.

Scope

maintains a look-up list of all the declared variables.

Back & Forth

For example: var a = 2;looks like a single statement, but Engine sees two distinct statements, one which Compiler will handle during compilation, and one which Engine will handle during execution.

The first thing Compiler will do with this program is perform lexing to break it down into tokens, which it will then parse into a tree.

When compiler gets to code-generation :

Compiler asks Scope to see if a variable a already exists for that scope. Otherwise, Compiler to declares a new variable called a.
Compiler then produces code for Engine to handle the a = 2 assignment.

Two distinct actions are taken for a variable assignment:

Compiler checks Scope to declare a variable.
Engine looks up the variable in Scope and assigns to it.

Compiler Speak

When Engine executes the code that Compiler produced it has to look-up the variable to see if it has been declared, and this look-up is called consulting Scope. But the type of look-up Engine performs affects the outcome of the look-up.

Engine performs one of two types of look-up:

LHS

(Left-hand-side)

looks-up the variable container, so that it can assign it a value.
a = 2;

looks-up the target of the assignment.

RHS

(right-hand-side)

looks-up the value already assigned to the variable.
console.log (a);

looks-up the source of the assignment.

consider

function foo(a) {
console.log( a ); // 2
}

foo( 2 );

LHS look - up: for the parameter a in function foo(..) The value 2 is then assigned to a.
RHS look - up: for the value of a, passed to function foo (), and that resulting value is passed to console.log(..).

Nested Scope

If a variable cannot be found in the immediate scope, Engine consults the next outer containing scope, continuing until found or until the outermost, Global, scope has been reached.

consider

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

var b = 2;

foo( 2 ); // 4

The RHS reference for b cannot be resolved inside the function foo, but it can be resolved in the Scope surrounding it (in this case, the global scope).

Errors

Why does it matter whether we call it LHS or RHS?

Because these two types of look-ups behave differently in the circumstance where the variable has not yet been declared.

consider

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

foo( 2 );

When the RHS look-up occurs for b the first time, it will not be found. This is said to be an "undeclared" variable, because it is not found in the scope. This results in a ReferenceError being thrown by the Engine.

lf the Engine is performing a LHS look-up and arrives at the global Scope without finding it, and if the program is not running in "Strict Mode", then the global Scope will automatically create a new global variable.

In "Strict Mode" the Engine would throw a ReferenceError.

If a variable is found for a RHS look-up, but you try to do something with its value that is illegal, such as trying to execute-as-function a non-function value, then Engine throws a different kind of error, called a TypeError.

ReferenceError is Scope resolution-failure related, whereas TypeError implies that Scope resolution was successful, but that there was an illegal action attempted against the result.

YDKJSY Scope & Closures Chapter 1 What is Scope?