Javascript Scope Hoisting And Closures Complete Guide

JavaScript Scope

Scope in JavaScript defines where variables and functions are accessible. There are two main types of scope: Global Scope and Local Scope.

Example 1: Global Scope

// Declare a variable in the global scope
let username = "JohnDoe";

function printUsername() {
    console.log(username); // Accessing global variable inside function
}

printUsername(); // Output: JohnDoe
console.log(username); // Output: JohnDoe -> Accessing global variable outside function

In this example, username is declared outside any function, making it globally accessible from anywhere in the code, including within the printUsername function.

Example 2: Local Scope

function greetUser() {
    let message = "Hello, User!";
    console.log(message); // Accessing local variable inside function
}

greetUser(); // Output: Hello, User!
console.log(message); // Error: Uncaught ReferenceError: message is not defined
// The 'message' variable cannot be accessed here because it's locally scoped.

In this example, message is declared within the greetUser function and thus only accessible within that function.

Nested Scopes:

Variables in an outer (parent) function can be accessed by inner functions.

function createUser() {
    let name = "Alice";
    
    function displayName() {
        console.log(name); // Accessing parent's variable name
    }

    displayName(); // Output: Alice
}

createUser();
console.log(name); // Error: Uncaught ReferenceError: name is not defined
// The 'name' variable is not accessible here because it's in the createUser function's local scope.

JavaScript Hoisting

Hoisting refers to the default behavior of moving all declarations to the top of the current scope before code execution. Variable declarations and function declarations are hoisted, but not initializations.

Example 1: Hoisting with Variables

console.log(x); // Output: undefined
var x = 5;
console.log(x); // Output: 5

// Equivalent hoisting
var x;
console.log(x); // Output: undefined
x = 5;
console.log(x); // Output: 5

Here, the declaration var x; is moved to the top of the script, even though technically it was declared later. That’s why we get undefined when printing x immediately after logging it before assigning its value.

Example 2: Hoisting with Functions

Functions are hoisted entirely in JavaScript.

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

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

// Equivalent hoisting
function helloWorld() {
    console.log("Hello, World!");
}
helloWorld(); // Output: Hello, World!

The entire function helloWorld is hoisted to the top, allowing us to call it even before its definition in the code.

Hoisting with let, const, and class:

• let and const declarations are hoisted but accessing variables before initialization within their block scope will result in a ReferenceError. This phenomenon is called the temporal dead zone (TDZ).
• class declarations have similar behavior to let and const - you cannot access them before they've been declared.

// Using let
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // Output: 10

// Using const
console.log(z); // ReferenceError: Cannot access 'z' before initialization
const z = 20;
console.log(z); // Output: 20

// Using class
console.log(MyClass); // ReferenceError: Cannot access 'MyClass' before initialization
class MyClass {}
console.log(MyClass); // [Function: MyClass]

JavaScript Closures

A closure is a function having access to the parent scope, even after the parent function has closed. It “closes over” the variables available to it at the time of its creation.

Example 1: Basic Closure

function makeCounter() {
    let count = 0; // Parent function scope variable

    function counter() {
        // Increment parent function's variable and return it.
        count += 1;
        return count;
    }
    
    return counter; // Returning the inner (child) function
}

const myCounter = makeCounter(); 
console.log(myCounter()); // Output: 1
console.log(myCounter()); // Output: 2
console.log(myCounter()); // Output: 3

// Even after the makeCounter() execution completes,
// myCounter holds the reference to the 'count' variable from parent function's scope.

Example 2: Practical Use of Closure (Private Data)

function createEmployee(name) {
    let privateSalary = 0;

    return {
        setName: function(newName){
            name = newName;
        },

        getName: function(){
            return name;
        },

        getSalary: function(){
            return privateSalary;
        },

        setSalary: function(salary){
            privateSalary = salary;
        },

        calculateAnnualBonus: function(bonusPercentage){
            return (privateSalary * bonusPercentage) / 100;
        }
    };
}

const emp = createEmployee('Bob');
emp.setSalary(50000);
console.log(emp.getSalary()); // Output: 50000
console.log(emp.calculateAnnualBonus(10)); // Output: 5000

emp.privateSalary = 75000; // Trying to directly manipulate private data
console.log(emp.getSalary()); // Still Output: 50000 -> Private data remains unchanged.

In this example, createEmployee returns an object with some public methods (setName, getName, setSalary, getSalary, calculateAnnualBonus). These methods can manipulate the private name and privateSalary variables from the createEmployee function's scope even after createEmployee itself is no longer running.

Summary

• Scope: Determines where variables and functions can be accessed; global or local.
• Hoisting: Moves variable and function declarations to the top of their scope before execution; initializations stay in place.
• Closures: A function remembers and retains access to variables from its containing (outer/parent) scope, even after it leaves the scope in which it was declared.