#9 JavaScript Code Snippets: Scope, Lexical Environment and Scope Chain

let score = 100;

function showScore() {
    console.log(score);
}

showScore();

The function accesses a variable from the global scope.

let count = 1;

function update() {
    count = 5;
}

update();

console.log(count);

Functions can modify variables from outer scopes.

function test() {
    let age = 25;
}

test();

console.log(age);

Variables declared inside a function are not accessible outside it.

let city = "Delhi";

function test() {
    let city = "Mumbai";

    console.log(city);
}

test();

The local variable shadows the outer variable.

let role = "User";

function show(role) {
    console.log(role);
}

show("Admin");

Parameters create local bindings and shadow outer variables.

let language = "JavaScript";

function outer() {
    function inner() {
        console.log(language);
    }

    inner();
}

outer();

The inner function resolves variables through lexical scope.

let name = "Global";

function first() {
    let name = "Local";

    return second;
}

function second() {
    console.log(name);
}

first()();

Scope depends on where a function is defined, not where it is called.

let value = 1;

function test() {
    let value = 2;

    function inner() {
        console.log(value);
    }

    inner();
}

test();

The nearest variable in the scope chain is used.

let a = 1;

function first() {
    let b = 2;

    function second() {
        let c = 3;

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

    second();
}

first();

Variables can be resolved through multiple levels of scope.

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

test();

The variable cannot be found in any available scope.

let amount = 100;

function test() {
    let amount = 200;

    return amount;
}

console.log(test());
console.log(amount);

Local variables do not affect variables in outer scopes.

let count = 1;

function update() {
    count++;

    console.log(count);
}

update();

The function updates the outer variable.

let status = "Active";

function show(status) {
    status = "Inactive";

    console.log(status);
}

show("Pending");

The parameter variable is updated locally.

let a = 10;

function one() {
    let b = 20;

    function two() {
        let c = 30;

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

        three();
    }

    two();
}

one();

The innermost function can access all parent lexical environments.

let value = "Global";

function first() {
    let value = "First";

    function second() {
        let value = "Second";

        console.log(value);
    }

    second();
}

first();

When multiple variables have the same name, the closest scope wins.

{
    let a = 10;
}

console.log(typeof a);

The variable exists only inside the block. typeof on an undeclared identifier returns "undefined".

{
    const a = 20;

    console.log(a);
}

const is block scoped.

{
    var a = 30;
}

console.log(a);

var does not create block scope.

let a = 10;

{
    let b = 20;

    console.log(a);
}

A child block can access variables from outer scopes.

{
    let a = 10;
}

{
    console.log(a);
}

Sibling blocks cannot access each other's variables.

function test() {
    if (true) {
        let a = 10;
    }

    console.log(a);
}

test();

The variable is limited to the if block.

function test() {
    if (true) {
        var a = 10;
    }

    console.log(a);
}

test();

var is scoped to the function, not the if block.

let a = 1;

{
    let a = 2;

    {
        console.log(a);
    }
}

The nearest available variable is selected.

let a = 1;

{
    let b = 2;

    {
        let c = 3;

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

Variables are resolved through nested block scopes.

let value = "Outer";

{
    let value = "Inner";
}

console.log(value);

The inner variable disappears after the block ends.

let a = 10;

{
    const a = 20;

    console.log(a);
}

console.log(a);

Both variables belong to different scopes.

function test(value) {
    {
        let value = 100;

        console.log(value);
    }
}

test(50);

The block variable shadows the parameter.

let a = 1;

function test() {
    let a = 2;

    {
        console.log(a);
    }
}

test();

The block uses the nearest parent scope.

var a = 1;

function test() {
    if (true) {
        var a = 2;
    }

    console.log(a);
}

test();

console.log(a);

The inner var belongs to the function scope and does not affect the global variable.

let a = 1;

{
    let a = 2;

    {
        let a = 3;

        console.log(a);
    }
}

The closest declaration always takes priority during scope resolution.

let a = 10;

function outer() {
    let a = 20;

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

const fn = outer();

fn();

The returned function uses the lexical environment where it was created.

let value = 100;

function first() {
    function second() {
        console.log(value);
    }

    return second;
}

const fn = first();

value = 200;

fn();

Scope lookup resolves the current value of the variable, not a copied value.

let a = "Global";

function first() {
    let a = "First";

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

    return second;
}

const fn = first();

fn();

The nearest lexical binding is preserved.

let a = 1;

function one() {
    let a = 2;

    function two() {
        let a = 3;

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

    return two();
}

one()();

The returned function closes over the closest available variable.

let a = 10;

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

    if (true) {
        let a = 20;
    }
}

test();

The block variable does not affect lookups before entering the block.

let a = 1;

function test() {
    {
        let a = 2;
    }

    console.log(a);
}

test();

The block-scoped variable is unavailable outside its block.

let a = 10;

function outer() {
    let b = 20;

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

    return inner;
}

const fn = outer();

fn();

The function resolves variables through multiple lexical environments.

let name = "Global";

function outer() {
    let name = "Outer";

    return function(name) {
        console.log(name);
    };
}

outer()("Parameter");

Parameters have the highest lookup priority within their function scope.

let count = 0;

function create() {
    return function() {
        count++;
    };
}

const fn = create();

fn();
fn();

console.log(count);

The returned function updates the global variable through scope lookup.

let a = 1;

function first() {
    let b = 2;

    return function() {
        let c = 3;

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

first()();

The scope chain includes all parent lexical environments.

let a = 1;

function test() {
    return function() {
        let a = 2;

        console.log(a);
    };
}

test()();

A local variable shadows any outer variable.

let x = 10;

function one() {
    function two() {
        function three() {
            console.log(x);
        }

        three();
    }

    two();
}

one();

Lookup continues outward until a matching variable is found.

let value = 10;

function outer() {
    return function() {
        value = 50;
    };
}

outer()();

console.log(value);

The function updates the variable found through scope resolution.

let a = "Global";

function outer() {
    let a = "Outer";

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

    return inner;
}

const fn = outer();

let a2 = "New";

fn();

The lexical environment used by inner() does not depend on where it is called later.

let total = 100;

function first() {
    let total = 200;

    function second() {
        let total = 300;

        function third() {
            console.log(total);
        }

        return third;
    }

    return second();
}

first()();

The deepest available binding is selected during variable resolution.