DEV Community

Akash Yadav
Akash Yadav

Posted on

Types of Scope in JavaScript

1. Global Scope:
-> Variables or functions declared outside of any function or block have global scope.
-> They can be accessed from anywhere in the code, including inside -> functions or blocks.
-> Global variables can create issues, especially in large programs, as they are accessible everywhere and can be overwritten.

var globalVar = "I'm a global variable"; function displayGlobalVar() { console.log(globalVar); // Accessible here } displayGlobalVar(); // Output: I'm a global variable
Enter fullscreen mode Exit fullscreen mode

2. Function Scope:
-> Variables declared within a function are scoped to that function.
They are not accessible outside the function in which they are defined

function myFunction() { var functionVar = "I'm a function variable"; console.log(functionVar); // Accessible here } myFunction(); console.log(functionVar); // Error: functionVar is not defined
Enter fullscreen mode Exit fullscreen mode

-> In the example above, functionVar is not accessible outside of myFunction().

3. Block Scope (introduced in ES6):
-> Variables declared using let and const are block-scoped.
They are only accessible within the block (e.g., { }) in which they are defined.

if (true) { let blockVar = "I'm a block variable"; console.log(blockVar); // Accessible here } console.log(blockVar); // Error: blockVar is not defined
Enter fullscreen mode Exit fullscreen mode

-> Variables declared with var, however, are not block-scoped; they are function-scoped.

if (true) { var notBlockVar = "I'm not block-scoped"; } console.log(notBlockVar); // Output: I'm not block-scoped
Enter fullscreen mode Exit fullscreen mode

4. Lexical Scope:
-> Lexical scope (also known as static scope) refers to the fact that a function's scope is determined by where it is defined in the code, not where it is called.
-> Inner functions have access to variables of outer functions.

function outerFunction() { var outerVar = "I'm an outer variable"; function innerFunction() { console.log(outerVar); // Accessible here } innerFunction(); // Output: I'm an outer variable } outerFunction();
Enter fullscreen mode Exit fullscreen mode

5. Closures:
-> A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope.
-> Closures allow a function to access variables from an outer function even after the outer function has returned.

function outerFunction() { var outerVar = "I'm an outer variable"; return function innerFunction() { console.log(outerVar); // Still accessible here }; } var closureFunction = outerFunction(); closureFunction(); // Output: I'm an outer variable
Enter fullscreen mode Exit fullscreen mode

-> In the example above, innerFunction forms a closure that allows it to access outerVar even after outerFunction has finished executing.

Summary:

  1. Global Scope: Accessible from anywhere in the code.
  2. **Function Scope: **Accessible only within the function where defined.
  3. Block Scope: Accessible only within the block where defined (let, const).
  4. Lexical Scope: Functions have access to variables in the scope where they were defined.
  5. Closures: Functions that "remember" their lexical scope even after the outer function has finished.

-> Understanding scope is crucial for managing variable lifetimes and ensuring that your code behaves as expected.

Top comments (0)