#8 JavaScript Code Snippets: Execution Context, Call Stack and Hoisting

var a = 1;

function test() {
    console.log(a);

    var a = 2;
}

test();

The local var declaration is hoisted inside the function and shadows the global variable.

foo();

function foo() {
    console.log("A");
}

function foo() {
    console.log("B");
}

When multiple function declarations exist, the later declaration wins during hoisting.

var a = 10;

function a() {}

console.log(typeof a);

The function is hoisted first, but the later assignment stores 10 in a.

console.log(foo);

function foo() {}

foo = 100;

console.log(typeof foo);

The function exists initially, then gets replaced by a number.

function test() {
    console.log(foo);

    function foo() {}
}

test();

Function declarations are fully available inside their scope before execution.

var foo = function() {
    return "A";
};

console.log(foo());

foo = function() {
    return "B";
};

console.log(foo());

Function expressions behave like normal variable assignments.

console.log(typeof foo);

var foo = function() {};

Only the variable declaration is hoisted.

var a = 1;

function test() {
    console.log(a);

    a = 5;

    console.log(a);
}

test();

console.log(a);

No local declaration exists, so the global variable is updated.

var a = 1;

function test() {
    a = 5;

    var a;

    console.log(a);
}

test();

console.log(a);

The local var is hoisted, so a=5 affects the local variable, not the global one.

function test() {
    return foo();

    function foo() {
        return "JS";
    }
}

console.log(test());

The function declaration is available throughout the scope.

console.log(foo);

var foo;

function foo() {}

Function declarations take precedence over var declarations.

function foo() {
    console.log("A");
}

var foo;

foo();

The var declaration does not overwrite the function.

var foo = 1;

function test() {
    console.log(foo);

    function foo() {}
}

test();

The local function declaration shadows the global variable.

function test() {
    console.log(typeof foo);

    var foo = 100;
}

test();

The local variable exists as undefined before assignment.

function foo() {
    return 1;
}

function foo() {
    return 2;
}

console.log(foo());

The last function declaration overrides earlier ones during hoisting.

let a = 10;

{
    console.log(a);

    let a = 20;
}

The inner variable creates a Temporal Dead Zone for the entire block.

let a = 1;

{
    let a = a + 1;
}

The inner a is still in its TDZ while the initializer is evaluated.

const a = 10;

{
    console.log(a);

    const b = 20;
}

The block can access variables from outer scopes.

{
    console.log(typeof x);

    let x = 5;
}

typeof does not bypass the TDZ.

let x = 10;

function test() {
    console.log(x);

    let x = 20;
}

test();

The local x shadows the outer x and remains in TDZ.

const user = {
    name: "John"
};

user.name = "Peter";

console.log(user.name);

const prevents reassignment, not object mutation.

const arr = [1];

arr.push(2);

console.log(arr.length);

The array contents can still be modified.

let a = 10;

{
    console.log(a);

    {
        let a = 20;
    }
}

The inner declaration belongs to a different block and does not affect the outer lookup.

{
    let a = 10;

    {
        console.log(a);
    }
}

Nested blocks can access parent block variables.

let a = 10;

{
    let b = 20;

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

Scope resolution travels outward through nested blocks.

{
    function foo() {
        return "JS";
    }

    console.log(foo());
}

The function is available within the block where it is declared.

let a = 5;

function test(a) {
    console.log(a);
}

test(10);

Function parameters create local bindings that shadow outer variables.

function test(a) {
    console.log(a);

    let b = 20;
}

test();

Missing arguments receive undefined.

let x = 1;

function test() {
    {
        console.log(x);
    }

    let x = 2;
}

test();

The function-level x is in TDZ throughout the block before initialization.

let a = 1;

function test() {
    return function inner() {
        return a;
    };
}

console.log(test()());

The returned function resolves variables through its lexical environment.

function first() {
    console.log("A");
}

function second() {
    console.log("B");

    first();

    console.log("C");
}

second();

Execution enters second(), pauses while first() runs, then resumes.

function one() {
    console.log("1");
}

function two() {
    one();

    console.log("2");
}

function three() {
    two();

    console.log("3");
}

three();

The call stack becomes three → two → one and then unwinds.

function test() {
    console.log("A");

    return "B";
}

console.log(test());

The function executes first and its return value is then logged.

function test() {
    console.log("A");

    return;

    console.log("B");
}

test();

Execution stops immediately after return.

function sum(a, b) {
    return a + b;
}

function display() {
    return sum(2, 3);
}

console.log(display());

The return value travels back through the call stack.

function count(n) {
    if (n === 0) {
        return;
    }

    console.log(n);

    count(n - 1);
}

count(3);

The log occurs before the recursive call.

function count(n) {
    if (n === 0) {
        return;
    }

    count(n - 1);

    console.log(n);
}

count(3);

The logs occur while recursive calls are removed from the stack.

function outer() {
    console.log("A");

    function inner() {
        console.log("B");
    }

    inner();

    console.log("C");
}

outer();

inner() completes before execution continues.

function first() {
    return second();
}

function second() {
    return "JS";
}

console.log(first());

The returned value moves back through all active execution contexts.

function test() {
    console.log("A");

    return "B";
}

const result = test();

console.log(result);

The function executes first, then the stored result is logged.

function multiply(a, b) {
    return a * b;
}

console.log(
    multiply(
        multiply(2, 2),
        3
    )
);

The inner function call completes before the outer call can execute.

function test() {
    return;
}

console.log(test());

A function without a return value returns undefined.

function a() {
    console.log("A");
}

function b() {
    console.log("B");

    a();
}

b();

a();

After b() completes, the separate a() call executes.

function test(n) {
    if (n === 1) {
        return 1;
    }

    return n + test(n - 1);
}

console.log(test(3));

The stack evaluates: 3 + test(2) 2 + test(1) 1 Then unwinds to produce 6.

function first() {
    console.log("1");

    second();

    console.log("2");
}

function second() {
    console.log("3");
}

first();

Execution pauses at second(), then resumes after it finishes.