Scope In JavaScript: Block, Function, Local, and Global

The scope is the most fundamental concept in programming, it defines the current context of a program, i.e., where the variables can be accessed.

For Example, a variable defined inside a function can’t access outside it. So its scope is Function scope as it can only be accessed inside the function.

Also Read: JavaScript Strict Mode: What it Does and Doesn’t Allow

Types of scopes in JavaScript

In JavaScript, we have four types of scopes.

Block Scope
Function Scope
Local Scope
Global Scope

Let’s see them one by one.

Block Scope

Block Scope is presented in ECMAScript 2015, where it introduces two new keywords let and const, both keywords can be used to store values and have different uses. Whenever we use any of them inside curly braces {}, their scope is considered to block scope.

Block Scope means that the variable declared using the let or const keyword inside curly braces {} is not accessible outside of it.

Example 1: let keyword

if(true){
    let msg = "Hello World"; // msg is only available in this block
}

console.log(msg); // ReferenceError: msg is not defined

Output:

console.log(msg); // ReferenceError: msg is not defined
            ^

ReferenceError: msg is not defined
    at Object.<anonymous> (C:\Users\ag290\OneDrive\Desktop\scope\app.js:5:13)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
    at internal/main/run_main_module.js:17:11

Here, you can see that JavaScript threw an error when accessing the variable outside the curly braces {} which was declared inside using the let keyword.

In this example, we have used the if…else statement, if you find it confusing, we have covered this in another tutorial JavaScript if…else Conditional Statement.

Example 2: const keyword

if(true){
    const msg = "Hello World"; // msg is only available in this block
}

console.log(msg); // ReferenceError: msg is not defined

Output:

console.log(msg); // ReferenceError: msg is not defined
            ^

ReferenceError: msg is not defined
    at Object.<anonymous> (C:\Users\ag290\OneDrive\Desktop\scope\app.js:5:13)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
    at internal/main/run_main_module.js:17:11

Here, you can see that JavaScript also threw an error for the variable declared using the const keyword.

Example 3: var keyword

if(true){
    var msg = "Hello World"; // msg is only available in this block
}

console.log(msg); // ReferenceError: msg is not defined

Output:

Hello World

Here you can see that the variable defined using the var keyword accessed outside of a block, hence only let and const can have block scope.

Function Scope

Function in JavaScript creates its own scope. Whenever the variables are declared using any of the var, const, or let keywords inside a function, their scope is considered to be Function Scope.

Function Scope means that the variable declared inside a function is not accessible outside of it.

Example 1:

function Hello(){
    var msg = "Hello World";
}

console.log(msg); // ReferenceError: msg is not defined

Output:

console.log(msg); // ReferenceError: msg is not defined
            ^

ReferenceError: msg is not defined
    at Object.<anonymous> (C:\Users\ag290\OneDrive\Desktop\scope\app.js:5:13)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
    at internal/main/run_main_module.js:17:11

Here, you can see that JavaScript throws an error when trying to access the variable outside of the function.

Local Scope

The variable declared inside a block such as functions block, if-else block, for loop, and while loop tends to have a local scope.

Local scope means that the variable declared inside a block is local to it, and it is only accessible inside that block in which it is defined.

Example:

let i = 0;

while(i < 1){
    console.log(i);
    i++;
    let msg = "Hello World";
}

console.log(msg);

Output:

console.log(msg);
            ^

ReferenceError: msg is not defined
    at Object.<anonymous> (C:\Users\ag290\OneDrive\Desktop\scope\app.js:9:13)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
    at internal/main/run_main_module.js:17:11

Note: The variable having local scope can’t access outside, which means JavaScript considers them as undefined, which means you can use another variable having the same name as the variable declared inside a block, and they are considered to be different.

if(true){
    let a = 10;
    console.log(a);
}

let a = 20;
console.log(a);

Output:

10
20

Global Scope

A variable declared outside of a function and a curly brace {} is accessible anywhere, which means they have global scope.

Global scope means that the variables declared outside a function, or not having a block scope is accessible anywhere in the program.

Example:

let msg = "Hello World";
console.log(msg); // msg is accessible inside the file

if(true){
    console.log(msg); // msg is accessible inside the block
}

function sayHello(){
    console.log(msg); // msg is accessible inside the function
}

sayHello();

Output:

Hello World
Hello World

Here you can see that the variable defined can access anywhere even inside the function which means it has global scope.

Summary

Variables in JavaScript can have four types of scope, block scope means only accessed inside the block in which they are created, function scope means only accessible inside the function in which they are declared, local scope means accessible only to local block, and global means it can be accessed anywhere in the program.

Hope this tutorial helps you to understand the concept of scope in JavaScript.