Lexical Environment in JavaScript

Lexical Environment is one of the under the hood topics in JavaScript. When we talk about execution context, execution environment, variable environment or lexical environment all of these things ultimately defining what’s called scope.

JS: Lexical Environment

The scope is where a variable is available in your code. Each block of code creates scope and a lexical environment. The outermost context where a variable is the lexical environment of that variable irrespective of order or sequence.

JavaScript cares about the lexical environment when you ask for a variable while running a line of code inside any particular execution context if it can’t find that variable in its block it will go at the outer reference or block and look for variables there. And that outer reference is where the function sits lexically is its outer environment.

And sometimes it has to do with it is if it’s really the same variable or a new copy like if you called the same function twice it each gets its own execution context and though it looks like the same variable, it’s actually two different variables in memory.

Look at the below example and try to predict the output:

function two(){
  var a;
  console.log(a);
}
function one(){
  var a=2;
  console.log(a);
  two();
}
var a=1;
console.log(a);
one();

Output for the above code is 1 2 undefined because we have not given any value to variable a in function two and in javascript default value assigned to a variable is undefined.

Now have a look at this code below and try to predict output:

function two(){
  console.log(a);
}
function one(){
  var a=2;
  console.log(a);
  two();
}
var a=1;
console.log(a);
one();

Output for the above code is 1 2 1 because when we do something with a variable, javascript does more than just looking in the variable environment of the currently executing context. Remember that each execution context has some special things that get created for you like the variable this. Every execution context has a reference to its outer environment, and that outer environment is called Lexical Environment.

In the above example in the case of function two, its outer lexical environment is the global execution context and also for function one, the outer lexical environment is the global execution context.

Execution stack showing the lexical environment for function one and function two.

When javascript asked for the value of var a in function two’s execution context it couldn’t find it so it moved down and searched in its outer lexical environment i.e. global execution context.

var a is not defined in function two so it searched in its lexical environment i.e. global execution context

One more code below I have changed lexical environment for function two now try to predict the output:

function one(){
  
  function two(){
   console.log(a);
  }
  
  var a=2;
  console.log(a);
  two();
}
var a=1;
console.log(a);
one();

Output for the above code is 1 2 2

var a is not defined in function two so it searched in its lexical environment i.e. function one

In the above example in the case of function two, its outer lexical environment is function one’s execution context and for function one, the outer lexical environment is the global execution context.

When javascript asked for the value of var a in function two’s execution context it couldn’t find it so it moved down and searched it in its outer lexical environment i.e. function one in this case.

One more example below predict the output:

function one(){
 
 function two(){
  console.log(a);
 }
 
 console.log(a);
 two();
}
var a=1;
console.log(a);
one();

Output for the above code is 1 1 1

function two’s lexical environment is function one and function one’s lexical environment is the global execution context

In the above example in the case of function two, its outer lexical environment is function one’s execution context and for function one, the outer lexical environment is the global execution context.

When javascript asked for the value of var a in function two’s execution context it couldn’t find it so it moved down and searched for it in the function one’s execution context but there also it couldn’t find it went more down and found in function one’s outer lexical environment i.e. global execution context.

This execution stack can get longer and might be variable a is at very below in the stack so JavaScript will search for its values one by one in the lexical environments of lexical environment until finds the value of variable a, this entire act of searching this chain of references to outer environments is called Scope Chain.

I have tried my best to explain about the Lexical environment. Hope it was useful.

Reading is good but reading with implementation is great!

Suggestions and critics about the article are most welcome.