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

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

-> 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

-> 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

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();

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

-> 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.