Scope in JavaScript: Function, Block, Lexical, Global

A scope defines the lifetime visibility of a variable. Variables are not visible outside the scope in which they are declared.

Types of Scope in JavaScript

• Module Scope
• Function Scope
• Block Scope
• Lexical Scope
• Global Scope

Module Scope

A variable declared outside any function fall in the global scope. In a module, when a variable is declared, it is hidden and not available to other modules unless it's exported.

// A random no. between 1 -100
const randomNumber = Math.floor(Math.random() * 100); 

//This variable is not exported 
const alpha = 432; 

// Look carefully as Variable alpha is not exported. 
// ES5 Export Statement
module.exports = randomNumber; 

Filename = ModuleOne.js


// ES5 Import Statement
const moduleTwo = require("./moduleTwo")

console.log(moduleTwo)
// 44

Only the exported variables are logged into the console. The variables which are not exported remain inaccessible for the ModouleOne.js unless explicitly exported from ModuleTwo.js

Function Scope

Variables and Parameters declared inside a function are accessible inside the function but not outside the function.

function scoped(number) {
    const incrementedNumber = number + 4; 

    console.log(number); 
    //42
    console.log(incrementedNumber); 
    // 46
}

scoped(42); 

console.log(number)
// ReferenceError: number is not defined

The variable number and incrementedNumber are functions scoped and thus they throw an error when someone tries to access them.

Block Scope

Block Scope is defined with curly braces. It is separated by { and }.

//  Oustside Block
let x = 55; 
{
    // Inside Block
    ket x = 33; 
    console.log("Inside Block: ", x)
}
console.log("Outside Block: ",x)

// Inside Block: 33
// Outside Blocl: 55

Lexical Scope

Lexical Scope means that in a nested group (function within a function) of function, the inner functions have to access to the variables and other resources of their parent scope.

This means that the child functions are lexically bound to the execution context of their parents. Lexical scope is sometimes also referred to as Static Scope.

function outer() {
    let a = 323; 
    function inner() {
        console.log(a); 
    }
    inner()
}

outer(); 

// 323

First off, JavaScript has lexical scoping with function scope. In other words, even though JavaScript looks like it should have block scope because it uses curly braces { }, a new scope is created only when you create a new function.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Even though there are no variables names an inside of an inner function, the inner function doesn't throw an error.

The inner function looks for an in its scope but there is no variable there. So, it looks for an in the outer function.

Global Scope

Variables defined outside any function, block, or module scope have global scope. Variables in the global scope can be accessed from everywhere on the application.

var x = 33; 

function func() { 
    // Function Scope
    consolelog(x) 
    function inner() {
        //Lexical Scope
        console.log(x)
    }
    inner(); 
}

func(); 

{
    // Block Scope
    console.log(x)
}

// 33
// 33
// 33

😎 Thank For Reading | Happy Coding ⚡