How Javascript Is Interpreted

When you work with Javascript you learn that, unlike Ruby, a function in JS can “see” and alter variables declared outside its scope. This is because of how scoping works in Javascript. An inner function could overwrite a variable declared in the outside scope, or you could redclare a local variable to give it new meaning. Seems pretty straightforward. Then I read this piece of code:

Looking at this I thought, oh, well, the variable foo is defined in the main scope, so the if block inside the function bar() will never execute when bar() is called, since bar is able to read a from the main scope. Therefore the program writes 1 to the console.

Except no, it does not. It definitely writes 10 to the console. What the &%$#^?

Here is another JS mind twister.

Now 10 should definitely log to the console, right? Nope, it’s 1. So what is going on?

This is where it turns out to be important to have some idea of how Javascript’s interpreter works, and how scoping, variable definition, and function declaration/expression all come into play. It’s kind of nonintuitive and more intertwined than I realized.

The question comes down to this: how do names actually come into scope in Javascript? It turns out it’s through a well-defined order:

Language-defined
First, JS will apply language defined names to the scope. For example, all scopes within Javascript have the keywords this. Note that only functions create scope within Javascript. Thus, if you call a function within different functional contexts, the meaning of 'this' will change.
Formal parameters
Functions can have parameters formally defined on them. JS will read these next.
Function declarations
A function declaration looks like this:
Declared(); //This will work as long as the function definition is declared in scope function Declared(){ //Some stuff here; }
Declaration are "hoisted" to the top of the scope, so that you can effective call the function from anywhere within a function.
Variable declarations*
Note that these are the last thing to be defined by the interpreter, and the assignment is then *hoisted. However, the assignment still happens at the line of code where you declared it. This variable declaration rule also applies to function expressions (as opposed to function declarations, as in above).
a(); //This will result in an error because the variable hasn't been assigned yet var a = function() { //Some stuff here. };

//1. Language-defined console.log(this); //This will print stuff out function languageKeywordsDefinedFirst(){ console.log(this); //This will also print stuff out } //2. Formal parameters function parametersDefinedNext(name) { //First this/other language keywords defined //Then parameters like name console.log(name); } //3. Function declarations function funcDeclarationsNext(string) { //First this/other language keywords defined //Then parameters like string //Then function declarations like aFuncDeclaration function aFuncDeclaration(){ console.log("I'm after language keywords and parameters"); } } //4. Variable declarations var a = 1; function variablesLast(name){ //First language keywords //Then parameters like name //Then function declarations like aDeclaration //Then variable declarations...which are hoisted!! var b = 2; function aDeclaration(){ } }

An overview of the order in which Javascript interprets code.

With our new found knowledge we can then explain how our gnarly original Javascript brain teasers are working:

var foo = 1; function bar() { //var foo; --> JS sees a local variable declaration of var foo within the function bar() //At this point foo is undefined if (!foo) { var foo = 10; //Thus, this line of code executes } console.log(foo); //foo is not equal to 10, and so 10 is logged to the console } bar(); //This prints 10

var a = 1; function b() { //var a; --> JS sees a local variable declaration of var a due to the function expression on line 6 a = 10; //Thus, the function b() assigns the local variable a to 10....and not the outer variable a. return; function a() {} } b(); console.log(a); //This statement reads from the outer variable a, which remains 1. Thus it prints 1.

Sources:

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

Lia.Skalkos

Life in code.

How Javascript Is Interpreted