What is Variable Scope in JavaScript ?

Variable scope is the context of the program in which it can be accessed. In programming, a variable is a named storage location that holds data or a value. Think of it as a container that you can use to store and manipulate information in your code. Variables allow you to work with data in a flexible way, as the values they hold can change during the execution of a program.

In JavaScript, you can declare variables using the var, let, or const keywords. Here's a brief overview of each:

Now, let's delve into the concept of Variable Scope in JavaScript:

Variable Scope

Variable scope in JavaScript is the region of the code where a particular variable can be accessed or modified.

Types of Scopes in JavaScript: 

• Block scope
• Function scope
• Local scope
• Global scope

Block scope

Earlier JavaScript had only Global Scope and Function Scope. let and const are the two new important keywords that were introduced by the ES6 and these two keywords provide Block Scope in JavaScript. ECMAScript (ES6) 2015 was the second major revision to JavaScript. Variables that are declared inside a { } block cannot be accessed from outside the block.

Example: Below is the example of let keyword.

{
 let x = 2;
}
x cannot be used here

Example: Below is the example of var keyword.

{
 var x = 2;
}
x can be used here

Variables declared with the var keyword cannot have block scope and they can be declared inside a { } block and can be accessed from outside the block.

Example: Below is an example of Block scope.

function foo() {
    if (true) {
        var x = '1';    // Exist in function scope
        const y = '2';  // Exist in block scope
        let z = '3';    // Exist in block scope
    }
    console.log(x);
    console.log(y);
    console.log(z);
}foo();

Output (In Console):

1
y is not defined

Function scope

JavaScript has function scope and each function creates a new scope. Variables defined inside a function are not accessible from outside the function and variables declared with var, let and const are quite similar when declared inside a function.

Example: Below is an example of var keyword.

function myFunction() {
   var firstName = "Krishna";   // Function Scope
}

Example: Below is an example of let keyword.

function myFunction() {
  let firstName = "Krishna";   // Function Scope
}

Example: Below is an example of const keyword.

function myFunction() {
   const firstName = "Krishna";   // Function Scope
}

Local scope

Variables declared inside a function become local to the function. Local variables are created when a function starts and deleted when the function is executed. Local variables have Function Scope which means that they can only be accessed from within the function.

Example:

// This part of code cannot use firstName
function myFunction() {
 let firstName = "Krishna";
 // This part of code can use firstName
}
This part of code cannot use firstName

Example: Below is an example of Local scope.

function foo() {
    var x = '1';
    console.log('inside function: ', x);
}

foo();          // Inside function: 1
console.log(x); // Error: x is not defined

Output (In Console):

inside function: 1
x is not defined

Global scope

Variables declared Globally (outside of any function) have Global Scope and Global variables can be accessed from anywhere in a program. Similar to function scope variables declared with var, let and const are quite similar when declared outside a block.

let keyword:

let x = 2;       // Global scope

const keyword:

const x = 2;     // Global scope

var keyword:

var x = 2;       // Global scope

Example: Below is an example of Global scope.

// Global scope
var x = '1'
const y = '2'
let z = '3'

console.log(x);    // 1
console.log(y);    // 2
console.log(z);    // 3

function getNo() {
    console.log(x);   // x is accessible here
    console.log(y);   // y is accessible here
    console.log(z);   // z is accessible here
}
getNo();

1
2
3
1
2
3