Scopes and Hoisting in JavaScript - Comprehensively Explained

Scopes in JavaScript

Scope in JavaScript means the area in your code where certain variables or functions can be used or seen. It defines where you have access to specific values or actions. There are mainly two types of scope in JavaScript:

1. Global Scope

2. Local Scope (Function and Block Scope)

Global Scope

When a variable is declared outside any function or block, it becomes part of the global scope. It can be accessed from anywhere in the code.

let globalVar = "I'm global";

function printGlobalVar() {
  console.log(globalVar); // Accessible here
}

printGlobalVar(); // Output: I'm global
console.log(globalVar); // Output: I'm global

In this example, globalVar is declared outside of any function, which makes it a global variable. This means it can be accessed anywhere in the code, both inside and outside of functions. When the printGlobalVar() function is called, it logs the value of globalVar because the function can access the global scope. After that, when we log globalVar directly outside the function, it still prints the same value because it is available throughout the program as a global variable. Essentially, the global scope allows this variable to be used and accessed anywhere in the code.

Local Scope (Function and Block Scope)

Variables defined within functions or blocks (like loops or if statements) are confined to that function or block. They are not accessible from outside that scope.

Function Scope: Variables declared inside a function are only accessible within that function.

function myFunction() {
  let localVar = "I'm local";
  console.log(localVar); // Output: I'm local
}

myFunction();
console.log(localVar); // Error: localVar is not defined

Block Scope: Introduced with let and const, block scope applies to variables declared inside a block ({}), such as loops, conditionals, and try-catch blocks. These variables can only be accessed within that block.

if (true) {
  let blockVar = "I'm block scoped";
  console.log(blockVar); // Output: I'm block scoped
}

console.log(blockVar); // Error: blockVar is not defined

In contrast, variables declared with var are function-scoped, meaning they are hoisted to the top of the function or globally, even if declared within a block.

Hoisting in JavaScript

Hoisting is JavaScript's default behavior of moving declarations to the top of their containing scope during the compilation phase. This means variables and function declarations are processed before any code is executed.

Hoisting of Variables

In the case of variable declarations using var, the variable is hoisted, but its initialization is not. This leads to the infamous "undefined" behavior if you try to access a variable before it's initialized.

console.log(myVar); // Output: undefined
var myVar = "Hello";
console.log(myVar); // Output: Hello

Behind the scenes, the JavaScript engine does this:

var myVar;
console.log(myVar); // Output: undefined
myVar = "Hello";
console.log(myVar); // Output: Hello

In this example, JavaScript hoists the var myVar declaration to the top, so the code behaves as if it were written on top. The first console.log outputs undefined because the variable is declared (hoisted) but not yet assigned a value. After the assignment, the second console.log outputs 5. This shows how hoisting works with var—the declaration is hoisted, but the value is assigned later.

For let and const, while the declaration is hoisted, they are not initialized until the code reaches that line, and trying to access them before declaration leads to a ReferenceError.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello";

Hoisting of Functions

Function declarations are fully hoisted, meaning you can call a function before its declaration.

greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}

The function is moved to the top, so it can be called before the declaration.

However, function expressions using var, let, or const are not hoisted in the same way as function declarations. They behave like regular variables in terms of hoisting, which means the function is only available after the assignment.

greet(); // Error: greet is not a function

var greet = function() {
  console.log("Hello!");
};

In the above example, greet is hoisted as a var variable but is initially undefined, so trying to call it before the assignment results in an error.

Scope and Hoisting in Practice

• Global scope variables are accessible throughout the entire script.

• Local scope variables are confined to the block or function where they are declared.

• Hoisting allows you to use functions and variables before their declaration, but with limitations for let, const, and function expressions.

These concepts are foundational to understanding how variables and functions behave in JavaScript, and mastering them is essential for writing clear and bug-free code.

Comments

[Jon Randy 🎖️]

You've missed Module scope?

[Abdul Ahad Abeer]

I think it's like you can say Module scope falls under Local scope with some small some differences.

Variables defined inside a module are not accessible globally, only within that module unless explicitly exported. Modules act as self-contained files.

In the simplest view, there are two overarching kinds of scope:

• Global Scope: Variables accessible from anywhere in the code.
• Local Scope: Variables that are confined to a specific context like a function, block, or module.

But with the introduction of modules, it's useful to acknowledge Module Scope separately.