DEV Community

loading...
Cover image for What is Scope in JavaScript?

What is Scope in JavaScript?

rahxuls profile image Rahul ・2 min read

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; 
Enter fullscreen mode Exit fullscreen mode
Filename = ModuleOne.js


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

console.log(moduleTwo)
// 44
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
    let x = 33; 
    console.log("Inside Block: ", x)
}
console.log("Outside Block: ",x)

// Inside Block: 33
// Outside Blocl: 55
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

😎 Thank For Reading | Happy Coding ⚡

Discussion (3)

pic
Editor guide
Collapse
harshilparmar profile image
Harshil Parmar

Nice !!!
Suggestion : let is misspelled as ket in block scope snippet.

Collapse
rahxuls profile image
Rahul Author

Thank You so much . I'm using my phone to blog so it just becomes hard.

Collapse
designeranna1 profile image
Designer Anna

Nicely Explained. :)
Keep coding, keep growing.! ☕️