DEV Community

Abdusanadzoda Abdulaziz
Abdusanadzoda Abdulaziz

Posted on

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

Latest comments (8)

Collapse
 
sardorbekweb profile image
Sardorbek Ergashev

thanks bro it was helpful for me

Collapse
 
moniqu3 profile image
Monique

Very helpful article !

Collapse
 
alysyedbilalhaider profile image
syed Bilal Haider

conlusion: scope mean boundery of variables ,accesbility of variable, and lexical environment mean inner function acess variables of outer function.

Collapse
 
cicada95 profile image
Rokas Simkus

The first example is wrong it will print undefined 2 1

Collapse
 
cicada95 profile image
Rokas Simkus

Ohh ok nevermind you wrote the answer in order the functions will be executed, I was reading it from top to bottom

Collapse
 
mostafaos21 profile image
Mostafa Osama

Thanks For This Great Explanation

Collapse
 
basim_nizar profile image
nizar

I like the detail ... thanks

Collapse
 
hamiecod profile image
Hargunbeer Singh

That was a great explanation. +1