Scope, Lexical Scope and Closure in JavaScript

When you start to learn a programing language is very important to know about the scope of variables and functions, no matter if you know others programing languages or not, I mean, the scope of variables and functions are the first thing that you need to know. In this article we want to discuss the concepts of “scope”, “lexical scope” and “closure” in JavaScript including examples.

The road

What’s Scope

Scope define where the variables and functions are available for use in your program. In javascript there are three scopes: Global Scope, Function Scope (Local Scope) and Block Scope.

1- Global Scope.

It is global scope when the variable or function is declared outside a function. This means that you can access and use this function or variable in any place in your program.

Example:

/*
 In this case the variable "message" and the 
 function "computer" have global scope because they 
 were declared outside a function.
*/
var message = 'Hi, I am a computer';
function computer() {
   console.log('RAM Capacity: 16gb');
}
/* 
 This meaning that I can access and use them in any
 place in my program. 
*/
function showData() {
   console.log(message);
   computer();
}
var myComputer = {
   sayMessage: message,
   ram: '16gb',
   hdd: '1tb'
};
showData();
console.log(`${myComputer.sayMessage} and I have RAM: ${myComputer.ram} and HDD: ${myComputer.hdd}.`);

2- Function Scope. (Local Scope)

It is function scope when the variable or function is declared inside a function. This means that you can access and use them only inside the function where they were declared and you can’t access or use them outside.

Example:

/*
 In this case the variable "ram", the function "message" and 
 "ramInfo" have function scope because they are declare inside a 
 function, in this case "computer". This meaning that you can 
 access and use them only inside the function computer and you 
 can't access them outside the computer function.
*/
function computer() { // global scope
   var ram = 24; // function scope
   function message() { // function scope
      return 'Hi my RAM capacity is: ';
   }
 
   function ramInfo() { // function scope
      console.log(`${message()} ${ram}gb.`);
   }
 
   ramInfo(); 
}
computer();
/* 
 If you try to access the variable and the functions outside the  
 function computer you go to get an error.
*/
console.log(ram); // Uncaught ReferenceError: ram is not defined
message(); // Uncaught ReferenceError: message is not defined

3- Block Scope.

When you use the keywords “let” or “const” for declare a variable, it is only exist in the block that it was declared, so you can access and use it only there.

Example:

/*
 You can access or use the variable only inside the block where it
 was declared. So, you can't access or use the variable outside the
 block where it was declared.
*/
{ 
   let message = 'Hello, I am here.'; // block scope
   console.log(message);
} // block limit for "message"
console.log(message); // Error: message is not defined
if(true) {
   const counter = 10;
  for(let i=0; i<counter; i++) { 
      console.log(i);
  }
} // block limit for "counter"
console.log(counter); // Error: counter is not defined

Lexical Scope

The lexical scope of function is the function scope of the outer function, if the function doesn’t have outer function, then its lexical scope is the global scope. That is the same:

function scope of outer function === lexical scope of inner function

Example:

/* 
 How the "computer" function doesn't have outer function then its 
 lexical scope is the global scope. So, global scope === lexical 
 scope of "computer" function.
*/
function computer() { // outer function
  var ram = '16gb';
  var hdd = '2tb';
 
   // computer function scope === lexical scope of showData function
   return function showData() { // inner function 
    console.log(`This computer has: RAM = ${ram} and HDD = ${hdd}`);
   }
}

Closure

When you know what is “Scope” and “Lexical Scope” in JavaScript, then is easy to understand what is Closure:

Closure is when a function can remember and access its Lexical Scope event when it’s invoked outside its Lexical Scope.

Easy ….truth?

Example:

/* 
 How the "computer" function doesn't have outer function then its 
 lexical scope is the global scope. So, global scope === lexical 
 scope of "computer" function.
*/
function computer() { // outer function
  var ram = '16gb';
  var hdd = '2tb';
 
   // computer function scope === lexical scope of showData function
   return function showData() { // inner function 
    console.log(`This computer has: RAM = ${ram} and HDD = ${hdd}`);
   }
}
var myComputer = computer();
// We invoke the showData function outside its lexical scope
myComputer();

Well, I hope that you see this post useful and help you to improve your JavaScript skills and understand this beautiful programing language.

Console.log(“ :-) Enjoy it ”);