Master JavaScript Scope & Context: From Basics to Advanced Patterns

JavaScript implements scope and context in a unique way, forming the basis of many powerful design patterns while often confusing developers.

Context and Scope

Context and scope are distinct concepts: scope is function‑based, while context is object‑based and represented by the this keyword.

Variable Scope

Variables can be declared in global or local scope. Before ES6 JavaScript lacked block scope; the let keyword introduced in ES6 provides block‑level scope.

function func() {
    if (true) {
        var tmp = 123; // var is function‑scoped
        console.log(tmp); // 123
    }
}

function func() {
    if (true) {
        let tmp = 123; // let is block‑scoped
        console.log(tmp); // 123
    }
    // console.log(tmp); // ReferenceError
}

Execution Context

When the JavaScript engine starts, it creates a global execution context. Each function call pushes a new execution context onto the call stack, which is popped when the function returns.

An execution context has two phases: creation (where a variable object and the scope chain are set up, and this is bound) and execution (where the code runs).

The Scope Chain

The scope chain links the variable objects of all active execution contexts, allowing identifier resolution to walk from the innermost scope outward to the global scope.

var color = "blue";
function changeColor(){
    var anotherColor = "red";
    function swapColors(){
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColors();
    console.log("Color is now " + color);
}
changeColor();

Closures

A closure is a function that retains access to variables from its outer (enclosing) function even after that outer function has returned.

function foo(){
    var localVariable = 'private variable';
    return function bar(){
        return localVariable;
    };
}
var getLocalVariable = foo();
console.log(getLocalVariable()); // private variable

The module pattern uses a closure to expose public members while keeping private data hidden.

var Module = (function(){
    var privateProperty = 'foo';
    function privateMethod(){ /* do something */ }
    return {
        publicProperty: '',
        publicMethod: function(){ /* do something */ },
        privilegedMethod: function(){ return privateMethod(); }
    };
})();

Immediately‑Invoked Function Expressions (IIFE)

An IIFE is a function that runs as soon as it is defined, creating a private scope.

(function(window){
    var foo, bar;
    function private(){ /* do something */ }
    window.Module = { public: function(){ /* do something */ } };
})(this);

Call, Apply and Bind

call

and apply invoke a function with an explicit this value; call takes arguments individually, while apply takes an array.

var o = {};
function f(a,b){ return a+b; }
console.log(f.call(o,1,2)); // 3
console.log(f.apply(o,[1,2])); // 3

bind

creates a new function permanently bound to a given this value, useful for event handlers and object‑method callbacks.

function MyClass(){
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.onClick.bind(this), false);
}
MyClass.prototype.onClick = function(e){ /* handle click */ };

ES6 Arrow Functions

Arrow functions do not have their own this; they inherit it from the surrounding lexical scope, making them a concise alternative to bind.

var obj = {
    addAll: function(pieces){
        pieces.each(piece => this.add(piece));
    }
};

Summary

Understanding scope, context, execution contexts, the scope chain, and closures is essential before tackling advanced JavaScript design patterns. These concepts are the foundation of object‑oriented patterns, inheritance, and module systems in modern JavaScript.

References

Understanding Scope and Context in JavaScript

JavaScript高级程序设计, section 4.2

Arrow functions vs. bind()

Understanding and Using Callbacks in JavaScript