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:

Do 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