Javascript Scope- Part 2

When you hear “Javascript is a very flexible language”, know that same flexibility brings some complexity. Scope in Javascript is one of those complex subjects. If you don’t understand the concept of Scope in Javascript, sometimes your code will generate unexpected results.

What is the SCOPE in Javascript?

It is a context which your current code is running. There are 2 types of scope: Global Scope and Local Scope.

Global Scope: Your code starts its journey in the global scope. Anything you define first is defined in the Global Scope.

Local Scope: There is 1 Global Scope. Variables and methods defined in the object or functions are Locally Scoped.

/* variables 'number1', 'number2' and 'myAPI' are all defined in the Global Scope
   'number3' is defined in the Local Scope
*/
var number1 = 20, number2 = 5;
var myAPI = {
  number3 : 10,
  add :      function() {
      return number1 + number2 + this.number3; 
  },
  subtract : function() {
      return number1 - this.number3 - number2;
  },
  divide :   function() {
      return (number1/this.number3)/number2;
  },
  multiply : function() {
      return number1 * number2 * this.number3;
  }
}
myAPI.add();
myAPI.subtract();
myAPI.divide();
myAPI.multiply();

number3;
/* you will get 'number3 is not defined' error. It is defined but not in the global scope. 'number3' is locally scoped. That is why, you cannot access it in the global scope.
*/
/* one more thing: replace 'this.number3' with 'number3' above and try to re-run */

What is a NAMESPACE in Javascript?

It is basically a variable which represents your API/library in the global scope. It is more like a top level scope.

// myAPI here is your namespace in the global scope
myAPI = {
  add :      function() {},
  subtract : function() {},
  divide :   function() {},
  multiply : function() {}
}

What is Function Scope?

If we have a look at the ECMAScript 5.1 Spec, we can see that Object Internal Property [[Scope]] is implemented only by function Objects:

Of the standard built-in ECMAScript objects, only Function objects implement [[Scope]].

// global scope
function A() {
  //scope A
  var myName = "Max",
  B = function() {
    //scope B
    return function C() {
     //scope C 
     console.log(myName);
    }
}
return B();
}
A()();

What is a Lexical Scoping?

In nested functions, inner function context is bound to outer function or parent function context. This inner and outer function binding is called a Lexical Scope. It is also called a Static Scope. In our example above, Scope C is statically bound to Scope B. Scope B is statically bound to Scope A. Any function defined in the Global Scope is bound to a global context.

What is a Scope Chain?

According to ES6 spec, Function Declaration, Block Statement and try-catch statement will generate a new scope. Resolving variables in Javascript starts from the the most inner scope and goes up to the most outer scope. So, we can say that scopes are chained together, like stacking cups, each scope is contained by another scope. In my last blog article I wrote about an Execution Context. Each execution context has a scope chain object which contains stack of all accessible scopes.

Reference:

Before I list the source, I would like to mention that few terminology changes from ES3 to ES5 and ES6. If you want to learn about Scopes in Javascript, you will definitely have to learn/understand few scope-related terminologies. OK, here is the list:

Variable Object (VO): If you read blog articles on Scopes in Javascript, you will come across this phrase a lot. Variable Object in ES3 is Lexical Environments in ES5 and ES6.