JavaScript Variable Scope

In this tutorial, you learn out about variable scope in JavaScript with the assistance of examples.

Scope in JavaScript characterizes accessibility of variables, objects and functions.

Scope refers to the accessibility of variables and functions in specific pieces of the code.

In JavaScript, a variable has two types of scope:

1. Global Scope
2. Local Scope

---

Global Scope

A variable proclaimed at the highest point of a program or outside of a function is considered a global scope variable.

We should see an example of a global scope variable.

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

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

greet(); // hello

In the above program, variable a is declared at the highest point of a program and is a global variable. It implies the variable a can be used anyplace in the program.

---

The value of a global variable can be changed inside a function. For example,

// 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

In the above program, variable a is a global variable. The value of a is hello. At that point, the variable a is accessed inside a function, and the worth changes to 3.

Hence, the value of a changes after changing it inside the function.

Note: It is a decent practice to try not to use global variables on the grounds that the value of a global variable can change in various areas in the program. It can introduce unknown results in the program.

---

In JavaScript, a variable can likewise be used without declaring it. If a variable is used without pronouncing it, that variable consequently turns into a global variable.

For instance,

function greet() {
    a = "hello"
}

greet();

console.log(a); // hello

In the above program, variable a is a global variable.

If the variable was proclaimed using let a = “hello”, the program would toss a mistake.

Note: In JavaScript, there is “strict mode”; in which a variable can’t be used without proclaiming it.

---

Local Scope

A variable can also have a local scope, i.e it can only be accessed within a function.

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

In the above program, variable a is a global variable and variable b is a local variable. The variable b can be accessed just inside the function greet. Thus, when we attempt to access variable b outside of the function, a mistake happens.

---

let is Block Scoped

The let keyword is block-scoped (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 x cannot be accessed here
    console.log(a + ' ' + b + ' ' + c);
}

greet();

Output

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

In the above program, variable

• a is a global variable. It can be accessed anywhere in the program.
• b is a local variable. It can be accessed only inside the function greet.
• c is a block-scoped variable. It can be accessed only inside the if statement block.

Henceforth, in the above program, the initial two console.log() work with no issue.

Be that as it may, we are attempting to access the block-scoped variable c outside of the block in the third console.log(). This will toss an error.

---

Note: In JavaScript, var is function scoped and let is block-scoped. If you try to use var c = ‘hello’; inside the if statement in the above program, the whole program works, as c is treated as a local variable.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Functions