Skip to content
Related Articles

Related Articles

Improve Article

What is Variable Scope in JavaScript ?

  • Last Updated : 25 Aug, 2021

In this article, we are going to learn about the scope of JavaScript. The scope manages the availability of variables or we can also say that it determines the accessibility of variables.

Types of Scopes in JavaScript: 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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.



 

  • let keyword:

    Example: x cannot be used here

    {
     let x = 2;
    }
  • var keyword:

    Example: x can be used here

    {
     var x = 2;
    }

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:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <script>
        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();
    </script>
</body>
  
</html>

Output (In Console):



1
y is not defined

Function scope: JavaScript has a 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.

  • var keyword:

    Example: 

    function myFunction() {
       var firstName = "Krishna";   // Function Scope
    }
  • let keyword:

    Example:

    function myFunction() {
      let firstName = "Krishna";   // Function Scope
    }
  • const keyword:

    Example:

    function myFunction() {
       let 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

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
  
    <script>
        function foo() {
            var x = '1';
            console.log('inside function: ', x);
        }
  
        foo();          // Inside function: 1
        console.log(x); // Error: x is not defined 
    </script>
</body>
  
</html>

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:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <script>
  
        // 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
    </script>
</body>
  
</html>

Output (In Console):

 1
 2
 3
 1
 2
 3



My Personal Notes arrow_drop_up
Recommended Articles
Page :