JavaScript Variable Scope

In JavaScript, the scope of a variable determines where it can be accessed within the code.

Variables can be declared in different scopes:

• Global Scope
• Local (Function) Scope
• Block-Level Scope

For example,

function addNumbers() {
    var sum = 5 + 4;
}

Here, the sum variable is created inside the addNumbers() function.

So, it's accessible only within that function (local or function scope). This kind of variable is known as a local variable.

JavaScript Local Variables

When variables are declared inside a function, they have a local scope and are accessible only within that function.

These types of variables are called local variables. For example,

function greet() {

    // local variable
    var message = "Hello";
    
    console.log(`Local: ${message}`);
}

greet();

// try to access message variable
// outside the greet() function
console.log(`Global: ${message}`);

Output

Local: Hello
ERROR!
... ... ...
ReferenceError: message is not defined

Here, the message variable is local to the greet() function. So, it can only be accessed within that function.

That's why we get an error when we try to access it outside the greet() function.

To fix this issue, we can make the message variable global.

JavaScript Global Variables

In JavaScript, a variable declared outside any function or in the global scope is known as a global variable.

A global variable can be accessed both inside and outside of functions. For example,

// declare global variable
var message = "Hello";

function greet() {
    console.log(`Local: ${message}`);
}

greet();

console.log(`Global: ${message}`);

Output

Local: Hello
Global: Hello

Here, we can access the message variable from outside of the greet() function.

This is possible because we have created the message variable in the global scope (outside the function).

Thus, message will be accessible from any scope (region) of the program.

// Program to show the change in global variable

let a = "hello";

function greet() {
    // change value of global variable a
    a = 3;
}

// before the function call
console.log(a);
// Output: hello

greet();

//after the function call
console.log(a); 
// Output: 3

function greet() {
    a = "hello"
}

greet();

console.log(a); // hello

JavaScript Block-Level Variables

JavaScript ES6 introduced block-level scoping with the let and const keywords.

Block-level variables are accessible only within the block {} they are defined in, which can be smaller than a function's scope. For example,

function display_scopes() {
    // declare variable in local scope
    let message = "local";

    if (true) {

        // declare block-level variable
        let message = "block-level";

        console.log(`inner scope: ${message}`);
    }

    console.log(`outer scope: ${message}`);
}

display_scopes();

Output

inner: block-level
outer: local

In this example, we have created two separate message variables:

• Block-Level: The variable inside the if block (visible only there).
• Local-Level: The variable inside the display_scopes() function.

// Program showing block-scoped concept

// global variable
let a = "Hello";

function greet() {

    // local variable
    let b = "World";

    console.log(a + " " + b);

    if (b == "World") {

        // block-scoped variable
        let c = "hello";

        console.log(a + " " + b + " " + c);
    }

    // variable c cannot be accessed here
    console.log(a + " " + b + " " + c);
}

greet();

Hello World
Hello World hello
ERROR!
... ... ...
ReferenceError: c is not defined

Also Read:

• JavaScript Variables and Constants
• JavaScript Function and Function Expressions