Lexical scope in JavaScript

JavaScript Lexical scope is the ability of a function scope to access variables from the parent scope. That means variables defined outside a function can be accessible inside another function defined after the variable declaration.

Lexical Scoping defines how variable names are resolved in nested functions: inner functions contain the scope of parent functions even if the parent function has returned.

Lexical scope in JavaScript

A simple example of lexical scoping (also called static scope) defines the scope of a variable by the position of that variable declared in the source code.

<!DOCTYPE html>
<html>
<body>
  <script>    
  var a = 10; // variable a assigned to 10

  var func = function (){ // outermost function
    var b = 20;

    console.log("a and b is accessible (outer):", a, b);

      var innerFunc= function (){ // innermost function
        var c = 30;
        console.log("a and b and c is accessible (innner):", a, b, c);
      }
      innerFunc();
      return;
    }
    
    func(); // invoke function func 
    console.log("only a is accessible (global):", a);
  </script>  

</body>
</html>

Output:

Here’s a brief overview of how lexical scope works in JavaScript:

Global Scope: Variables declared outside any function or block have a global scope. They can be accessed from anywhere in the code.

var globalVar = "I am global";

function exampleFunction() {
    console.log(globalVar); // Accessible inside the function
}

Function Scope: Variables declared inside a function have function scope. They are accessible only within that function.

function exampleFunction() {
    var localVar = "I am local";
    console.log(localVar); // Accessible inside the function
}

console.log(localVar); // Error, localVar is not defined outside the function

Block Scope (with let and const): Variables declared with let and const have block scope. This means they are only accessible within the block (inside curly braces {}) where they are defined.

function exampleFunction() {
    if (true) {
        let blockVar = "I am in a block";
        console.log(blockVar); // Accessible inside the block
    }

    console.log(blockVar); // Error, blockVar is not defined here
}

Lexical Scope: When a function is declared inside another function, it forms a lexical scope. The inner function has access to its own variables and variables from its parent (outer) functions.

function outerFunction() {
    var outerVar = "I am outer";

    function innerFunction() {
        console.log(outerVar); // Access outerVar from the outer function
    }

    innerFunction();
}

outerFunction();

In the example above, innerFunction can access the outerVar variable declared in its parent function (outerFunction), demonstrating lexical scope.

Comment if you have any doubts or suggestions on this JS scope topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

Lexical scope in JavaScript | Basics