JavaScript Variable Scope with Example

With the help of examples, you will learn about JavaScript Variable Scope in this tutorial.

Variable scope, one of the most crucial ideas in computer programming, will be covered in this session.

The location of a variable in our program and whether we can access or alter it are both determined by its scope. Please take the time to comprehend this crucial idea. Scope issues can result in a lot of bugs and code that just plain doesn’t work.

You will have several opportunities to handle these faults and gain first-hand knowledge of the scope.

The term “scope” describes the variables and functions that are accessible in particular areas of the code.

We will discover more about the application of JavaScript in this essay. The scope controls the accessibility of variables, or we might also say that it manages their availability.

A variable in JavaScript has two different scopes:

Global Scope

Local Scope

Contents

Global Scope

Global scope variables are defined at the beginning of a program or outside of a function.

Global variables can be accessed from anywhere in a program since they are defined globally (outside of any function).

All code and functions can access variables defined outside of functions because they have global scope. They are at a program’s “highest level.”

When defined outside of a block, let and const are quite similar to function scope variables expressed with var.

Here is an illustration of a global scope variable.

// program to print a text 
let a = "hello";

function greet () {
    console.log(a);
}

greet(); // hello

Variable and is a global variable declared at the top of the program in the example above. It implies that the variable may be used wherever in the program it is needed.

Within a function, a global variable’s value can be modified. For instance,

// program to show the change in global variable
let a = "hello";

function greet() {
    a = 3;
}

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

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

Variable and is a global variable in the aforementioned application. A has the value of “hello.” The value of the variable a then changes to 3 when it is retrieved within a function.

As a result, after updating it inside the function, a’s value changes.

Note: Observation: It is wise to steer clear of utilizing global variables since they can alter in different parts of the program. It may cause the program to provide unexpected results.

A variable can also be utilized in JavaScript without being declared. A variable immediately becomes a global variable if it is utilized without being declared.

For instance,

function greet() {
    a = "hello"
}

greet();

console.log(a); // hello

Variable an is a global variable in the aforementioned application.

The program would crash if the variable had been declared with let a = “hello.”

A variable cannot be used in JavaScript’s “strict mode” without first declaring it. Visit JavaScript Strict to learn more about strict.

Local Scope

A variable can also have a local scope, which restricts access to the function in which it is defined.

a variable is declared inside of a function, it becomes specific to that function only. When a function begins, local variables are generated, and they are removed when the function is finished. Local variables are only accessible from within the function since they have Function Scope.

Example 1: Local Scope Variable

// program showing local scope of a variable
let a = "hello";

function greet() {
    let b = "World"
    console.log(a + b);
}

greet();
console.log(a + b); // error

Output

helloWorld
Uncaught ReferenceError: b is not defined

Variable is a global variable and variable b is a local variable in the aforementioned application. Only the function greet can access the variable b. As a result, an error occurs when we attempt to access variable b outside of the function.

allow block scope

Let is a block-scoped keyword (variable can be accessed only in the immediate block).

Example 2: block-scoped Variable

// 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();

Output

Hello World
Hello World hello
Uncaught ReferenceError: c is not defined

the program mentioned above, variable

A is an international variable. It is accessible from any point in the application.

A local variable is b. It is only accessible from within the function greet.

C is a variable with block scope. It is only accessible from within the if statement block.

Thus, the first two console.log() calls in the aforementioned program execute without error.

However, in the third console.log, we are attempting to access the block-scoped variable c outside of the block (). An error will result from this.

Note that let is block-scoped in JavaScript while var is function-scoped. In the example above, if you try to use var c = ‘hello’; inside the if statement, the entire program runs since c is treated as a local variable.

JavaScript Variable Scope with Example JavaScript Variable Scope with Example JavaScript Variable Scope with Example JavaScript Variable Scope JavaScript Variable Scope JavaScript Variable Scope with Example JavaScript Variable Scope with Example JavaScript Variable Scope with Example JavaScript Variable Scope with Example JavaScript Variable Scope with Example