Scope in JavaScript

By scope, we refer to the part of our program in which variables, objects, and functions are visible and can be used. If we try to access these variables, objects, or functions outside their particular scope we will get a ReferenceError.

In general, there are two kinds of scope in JavaScript - global scope and local scope.

Global scope

This is the outermost scope in our application. Variables declared outside of any function or code block ({}) have global scope. These variables are called global variables. We can access and modify global variables from any part of our application.

When you load a JavaScript file in your HTML, the topmost scope of the file is a global scope:

<script src="app.js"></script>

// app.js
var message = "Hello from global scope";
let secondMessage = "I'm also a global variable";

Local scope

The local scope is created by functions and code blocks (if, for, while, {}). Variables defined inside a local scope are available to that scope only.

In JavaScript, there are two types of local scope: function scope and block scope.

Function scope

Every function creates a local scope in JavaScript. Any variables declared using var, let and const are locally scoped inside a function and are not accessible outside of the scope.

// app.js
function func() {
    var localVar = "I'm only visible in this function";
    const localConst = "Hey I'm constant available in this function";
}

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

Block scope

Block scope is defined with curly braces { and }. A code block in JavaScript defines a local scope for variables declared using let and const. These variables can only be accessed in the block in which they are defined.

if (true) {
    const blockConst = "I'm available only in this block";
    var localVar = "I can be accessed outside this block";
}
console.log(localVar); // "I can be accessed outside this block"
console.log(blockConst); // Uncaught ReferenceError: blockConst is not defined

A code block does not create a scope for var variables.

Lexical scope

Every function creates its own local scope. But how does scope works when a function is declared inside another function?

When functions are nested, the inner function has access to the scope of the outer function, but the opposite is not true. The parent function cannot access variables declared inside the inner functions. This behavior is called lexical scoping.

function outerFunction() {
    const outerConst = "I'm available inside all nested functions.";

    function innerFunction() {
        const localConst = "I will be available only in innerFunction";
        console.log(outerConst); // "I'm available inside all nested functions."
    }

    innerFunction();
    console.log(localConst); // Uncaught ReferenceError: localConst is not defined
}

outerFunction();

Conclusion

Variables declared in the global scope are called global variables. These variables are available everywhere within the application.

A function creates its own scope. When you declare a variable in a function, you can only access it inside the function.

Variables declared with let and const also have block scope. Variables declared with var ignore block scope.

When you define a function within another function, the inner function has access to the scope of the parent function.