In this blog, we are going to delve into the fascinating world of scope in JavaScript. Scope determines the visibility and accessibility of variables within your code, and in JavaScript, there are four main types of scope: global scope, function scope, block scope, and lexical scope.

Let us discuss these scopes in detail.

1 . Global Scope

Variables declared outside of any function or block have global scope. They can be accessed from anywhere in your code, including within functions and blocks.

Let's see an example of a global scope variable.

var globalVar = "I'm a global variable";

function foo() {
  console.log(globalVar); // Output: I'm a global variable
}
foo();

Global variables can be accessed and modified from any part of your code, including within functions or blocks.

However, it is generally considered good practice to limit the use of global variables, as they can lead to naming conflicts and make it harder to reason about your code.

2 . Local Scope (Function Scope)

Variables declared inside a function have local scope, meaning they are only accessible within that function.

This means that variables defined within a function are only accessible within that function, including any nested functions or blocks within it.

Let's see an example of a global scope variable.

function bar() {
  var localVar = "I'm a local variable";
  console.log(localVar); // Output: I'm a local variable
}
bar();
console.log(localVar); // Error: localVar is not defined

Function parameters and variables declared within the function using the var, let, or const keywords have function scope.

3 . Block Scope (ES6+)

Block Scope With the introduction of ES6 (ECMAScript 2015), the let and const keywords allow for the declaration of block-scoped variables. Variables declared using let and const are only accessible within the block in which they are defined.

Let's see an example of a global scope variable.

if (true) {
  let blockVar = "I'm a block-scoped variable";
  console.log(blockVar); // Output: I'm a block-scoped variable
}
console.log(blockVar); // Error: blockVar is not defined

4 . Lexical Scope (Closure)

Lexical scope refers to the ability of inner functions to access variables from their outer functions. This behavior forms closures, enabling functions to retain access to variables even after the outer function has finished executing.

Let's see an example of a global scope variable.

function outer() {
  var outerVar = "I'm an outer variable";
  function inner() {
    console.log(outerVar); // Output: I'm an outer variable
  }
  inner();
}
outer();

Keep learning and keep exploring 🔥