Scope & Lexical Environment 🔥

Intro

Scope in Javascript is directly releated with lexical enviroment. I know it sounds a little complicated but its very classic concept in JavaScript.If you understand lexical environment it will be very easy for you to understand the scope, the scope chain it will also help us to understan the closure.

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.

The scope is where a variable is available in your code. Each block of code creates scope and a lexical environment.

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.

So we can say that whenever a context ececution is created along with it a lexical enviroment is created and each lexical enviroment have referece to its parent lexical enviroments which points to its memory allocation.

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.

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

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.