Forem: NITESH GAIROLA

Closures in JavaScript: Why one should know about them !

NITESH GAIROLA — Sun, 11 May 2025 06:32:01 +0000

As a JavaScript developer, you've likely encountered the term closure. It might sound a bit abstract at first, but understanding closures in JavaScript is absolutely fundamental to writing efficient, maintainable, and powerful code. In this post, we'll demystify javascript closures, explore why they are so important, and see them in action.

What Are Closures in JavaScript?

How Closures Work Under the Hood

At its core, a closure is the combination of a function and the lexical environment in which it was defined. This allows the function to “remember” variables from its outer scope even after that outer scope has finished executing.
Let's illustrate this with a simple example:

function outerFunction(greeting) {
  function innerFunction(name) {
    console.log(`${greeting}, ${name}!`);
  }
  return innerFunction;
}

const sayHello = outerFunction("Hello");
sayHello("World"); // Output: Hello, World!

In this snippet, innerFunction forms a closure over the greeting variable from outerFunction. When outerFunction returns, the sayHello variable now holds a reference to innerFunction, which still "remembers" that greeting was "Hello". This is the magic of javascript closures in action!

Why you should know about closures in JavaScript?

Understanding closures isn't just an theoretical exercise; it's a practical necessity for several key reasons:

Data Encapsulation and Privacy in JavaScript: Closures allow you to create private variables within a function's scope. By returning inner functions that can access but not directly modify these variables, you achieve a form of data hiding, crucial for building robust javascript applications.

function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Output: 1
// You can't directly access or modify 'count' from outside

Maintaining State Across Function Calls: Javascript closures enable functions to "remember" their state between invocations. This is incredibly useful for scenarios like creating counters, managing user sessions, or implementing stateful logic.
Creating Flexible and Reusable JavaScript Functions:
Closures allow you to generate customized functions. In our initial example, outerFunction acted as a factory for creating greeting functions with different initial greetings. This promotes code reusability and flexibility in your javascript projects.
The Backbone of Asynchronous JavaScript: In the world of asynchronous javascript, closures are indispensable. Callback functions often need to access variables from their surrounding scope even after the asynchronous operation has completed. Promises and async/await under the hood also rely on the principles of closures.

function delayedLog(message, delay) {
  setTimeout(function() {
    console.log(message); // This inner function closes over 'message' and 'delay'
  }, delay);
}

delayedLog("Hello after 2 seconds", 2000);

Powering the Module Pattern in JavaScript: Closures are the foundation of the module pattern, a crucial design pattern for organizing javascript code into self-contained, reusable units, minimizing global namespace pollution and enhancing maintainability.

Common Mistakes with JavaScript Closures

The Loop and `var` Trap (Revisited with Emphasis):

As we touched upon earlier, the interaction between closures and loops using var is a classic pitfall. Because var has function scope, variables declared within a loop are not scoped to each iteration. When a closure inside the loop tries to access these var declared variables later, it will invariably see their final value after the loop has completed.

function createClickHandlersWithVar() {
  const buttons = [];
  for (var i = 0; i < 3; i++) {
    const button = document.createElement('button');
    button.innerText = `Button ${i}`;
    button.addEventListener('click', function() {
      console.log(`Button ${i} clicked`); // Oops! Will always log 'Button 3 clicked'
    });
    buttons.push(button);
  }
  document.body.appendChild(buttons[0]);
  document.body.appendChild(buttons[1]);
  document.body.appendChild(buttons[2]);
}

// Note: This example requires an HTML environment to run properly
// createClickHandlersWithVar();

The Fix: Embracing let (and Sometimes IIFEs):

As we discussed, using let solves this elegantly by creating a new binding for i in each iteration:

function createClickHandlersWithLet() {
  const buttons = [];
  for (let i = 0; i < 3; i++) {
    const button = document.createElement('button');
    button.innerText = `Button ${i}`;
    button.addEventListener('click', function() {
      console.log(`Button ${i} clicked`); // Works as expected!
    });
    buttons.push(button);
  }
  document.body.appendChild(buttons[0]);
  document.body.appendChild(buttons[1]);
  document.body.appendChild(buttons[2]);
}

// Note: This example requires an HTML environment to run properly
// createClickHandlersWithLet();

Closures and Memory Leaks

Closures can inadvertently lead to memory leaks if they retain references to large objects that are no longer needed elsewhere in your application. This happens when the outer scope of a closure contains variables holding these large objects, and the inner function (the closure) remains accessible (e.g., attached as an event listener that isn't properly removed).

function createManager() {
  const largeData = { /* ... a very large object ... */ };
  const processData = function(item) {
    console.log(`Processing: ${item} with ${largeData.someProperty}`);
  };
  return processData;
}

const dataProcessor = createManager();
// 'dataProcessor' now has a closure over 'largeData'.
// If 'dataProcessor' persists for a long time after 'largeData' is no longer needed,
// 'largeData' might not be garbage collected.

Advanced Use Cases of Closures

Creating Private Variables Using Closures

Closures in JavaScript let inner functions "remember" variables from their outer scope, even after the outer function finishes. We can leverage this to create private-like variables.

Here's the idea:

Declare variables within the scope of an outer function.
Define inner functions within that outer function that can access these variables.
Return these inner functions.

The outer function's variables are now only accessible through the returned inner functions. The outside world cannot directly access or modify them, effectively making them "private".

function createCounter() {
  let count = 0; // This variable is private

  return {
    increment: function() {
      count++;
    },
    getCount: function() {
      return count;
    }
  };
}

const myCounter = createCounter();
myCounter.increment();
console.log(myCounter.getCount()); // Output: 1
// console.log(myCounter.count); // Undefined - cannot access directly

Closures in Currying and Memoization

Currying

What is currying: Transforming a function that takes multiple arguments into a sequence of functions that each take a single argument.
How closures are used: Each intermediate function returned in the currying process closes over the arguments provided in the previous steps. This allows the function to "remember" these arguments until the final argument is provided and the original function can be executed.

function multiply(a, b, c) {
  return a * b * c;
}

function curryMultiply(a) {
  return function(b) {
    return function(c) {
      return multiply(a, b, c); // Inner functions close over 'a' and 'b'
    };
  };
}

const step1 = curryMultiply(2);
const step2 = step1(3); // step2 closes over 'a' (2) and 'b' (3)
const result = step2(4); // Executes multiply(2, 3, 4)
console.log(result); // Output: 24

Memoization

What is memoization: Optimizing functions by caching the results of expensive function calls and returning the cached result if the same inputs occur again.
How closures are used: A closure is typically used to create the cache (an object or map) within the memoizing function. The returned memoized function closes over this cache. This allows the memoized function to retain and access the cached results across multiple calls.

function memoize(func) {
  const cache = {}; // Cache is within the scope of the memoize function
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key]; // Return cached result
    }
    const result = func(...args);
    cache[key] = result; // Store result in the cache
    return result;
  };
}

function expensiveOperation(n) {
  console.log("Performing expensive operation for", n);
  return n * n;
}

const memoizedExpensive = memoize(expensiveOperation);
console.log(memoizedExpensive(5)); // Expensive operation performed, output: 25
console.log(memoizedExpensive(5)); // Cached result returned, output: 25

Resources to Learn More

MDN Docs on Closures

Your experiences and questions can help others learn too. Join the conversation! Leave a comment with your insights on JavaScript closures.

What Is Hoisting in JavaScript? Understanding TDZ and let/const Pitfalls

NITESH GAIROLA — Tue, 06 May 2025 17:16:25 +0000

Introduction

JavaScript, with its quirky behaviors and unique features, never ceases to surprise developers. Among these peculiarities, hoisting and the Temporal Dead Zone (TDZ) stand out as concepts that can make or break your code. If you've ever encountered unexpected undefined values or perplexing reference errors, understanding these mechanisms will finally help you make sense of JavaScript's behavior.

In my previous blog about JavaScript variables, we explored the basics of var, let, and const. Today, we'll dive deeper into how JavaScript processes these declarations behind the scenes and why timing matters when accessing your variables.

What is Hoisting in JavaScript?

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope during the compilation phase, before code execution. This creates the illusion that variables and functions are "lifted" or "hoisted" to the top of their containing scope.

But the reality is more nuanced than it seems at first glance.

How Hoisting Works with `var`

When you use var to declare variables, JavaScript hoists the declaration but not the initialization. This means you can access the variable before it appears in your code, but its value will be undefined until the execution reaches the actual initialization.


console.log(userName); // Output: undefined (not an error!)
var userName = "JavaScript Expert";
console.log(userName); // Output: "JavaScript Expert"

In the example above, behind the scenes, JavaScript processes it as:


var userName; // Declaration is hoisted
console.log(userName); // undefined
userName = "JavaScript Expert"; // Initialization remains in place
console.log(userName); // "JavaScript Expert"

This behavior can lead to subtle bugs, especially in larger codebases where variables might be declared far from where they're used.

Function Hoisting

Functions declared using function declarations (not function expressions) are completely hoisted with their definitions:


// This works thanks to hoisting
sayHello(); // Output: "Hello, world!"

function sayHello() {
  console.log("Hello, world!");
}

However, function expressions are not fully hoisted:


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

var tryMe = function() {
  console.log("This won't work!");
};

In this case, only the variable declaration var tryMe is hoisted, not the function assignment.

The Temporal Dead Zone (TDZ): Modern JavaScript's Safety Net

ES6 introduced let and const with a crucial difference from var: the Temporal Dead Zone.

The TDZ is the period between entering a scope where a variable is declared and the actual declaration being reached. During this zone, the variable exists but cannot be accessed or referenced in any way.

How `let` and `const` Handle Hoisting

While let and const declarations are technically hoisted, they behave differently from var:


console.log(modern); // ReferenceError: Cannot access 'modern' before initialization
let modern = "ES6 and beyond";

The variable modern is hoisted, but unlike var which would be initialized with undefined, it remains uninitialized. Any attempts to access it before the declaration line throw a ReferenceError.

This behavior is intentional and provides several benefits:

Prevents bugs by making it impossible to accidentally use variables before they're properly initialized.
Encourages better coding practices by forcing declarations before usage.
Makes code more predictable and easier to understand.

The TDZ in Action

The TDZ applies to both let and const, and it exists from the start of the block until the declaration is processed:


{
  // TDZ begins for userAge

  // This would throw a ReferenceError
  // console.log(userAge);

  // This would also throw a ReferenceError, even though typeof is normally safe
  // console.log(typeof userAge);

  let userAge = 30; // TDZ ends for userAge

  console.log(userAge); // 30 (works fine)
}

Practical Implications: When Hoisting and TDZ Matter

Understanding these concepts isn't just academic—they have real impacts on how you write and debug JavaScript code.

Debugging Unexpected `undefined` Values

If you're getting undefined when you expect a value, check if you might be accessing a var variable before its initialization.

Making Sense of "Cannot Access Before Initialization" Errors

This classic error appears when you violate the TDZ by trying to use a let or const variable too early.

Block Scope and TDZ Interactions

The TDZ becomes particularly important in block-scoped scenarios:


function demonstrateTDZ() {
  if (true) {
    // TDZ for blockScoped starts here
    console.log(blockScoped); // ReferenceError
    let blockScoped = "Inaccessible until declaration";
  }
}

Class Field Initializations

The TDZ also applies to class fields, which can create surprising errors:


class TDZExample {
  // This works fine
  normalField = "I'm fine";

  // This throws a ReferenceError because referencing problematicField in its own initialization
  problematicField = problematicField + "!";
}

// Will throw when instantiated
new TDZExample();

Best Practices to Avoid Hoisting and TDZ Pitfalls

To write more maintainable and error-free code:

Always declare variables at the top of their scope This practice, known as "hoisting manually," makes your code match JavaScript's behind-the-scenes behavior.
Use let and const by default Their stricter behavior helps catch potential issues early.
Initialize variables when declaring them This eliminates the risk of accessing uninitialized variables.
Be careful with complex initializations Especially when referencing other variables that might be in the TDZ.

Testing Your Understanding: Common Hoisting and TDZ Interview Questions

JavaScript interviews often test these concepts. Here are some examples to test your understanding:


// What will this output?
console.log(a);
var a = 5;

// What about this?
console.log(b);
let b = 5;

// And this complex example?
var c = 1;
function test() {
  console.log(c);
  var c = 2;
}
test();

(Answers: undefined, ReferenceError, undefined)

Conclusion: Mastering JavaScript's Memory Management

Hoisting and the Temporal Dead Zone represent JavaScript's approach to memory allocation and variable lifecycle management. By understanding these concepts, you not only avoid common bugs but also gain deeper insight into how the JavaScript engine processes your code.

While hoisting might seem like a quirk at first, it's a deliberate design decision that provides flexibility—though sometimes at the cost of intuitive behavior. The TDZ, on the other hand, represents JavaScript's evolution toward stricter and safer coding patterns.

As you continue your JavaScript journey, keep these concepts in mind when debugging unexpected behavior, and you'll find many mysterious errors suddenly making perfect sense.

JavaScript Variables Explained: var, let, and const for Beginners

NITESH GAIROLA — Mon, 05 May 2025 05:25:33 +0000

In JavaScript, a variable is a named storage location in the computer's memory that holds a value. They allow us to store, receive and manipulate data dynamically as our program runs.

Key uses of variables in JavaScript:

Storing Data: The primary use of variables is to hold different types of information that our program needs to work with.
Referencing Data: Instead of typing the same data repeatedly, we can use variable name.
Manipulating Data: Variables allow us to perform operations on the stored data (e.g. calculations, string modifications etc.)

Different ways to declare variables in JavaScript (var, let and const):

JavaScript provides three ways to declaring variables: var, let and const. While they all serve the purpose of creating variables, they have important differences in how they behave, particularly considering their scope and whether their values can be reassigned. Understanding these distinctions is key to write robust and maintainable code.

1. var: Function Scoped

var was the original way to declare variables in JavaScript. It has function scope (or global scope if declared outside any function) and allows for variable hoisting.
Variables declared with var can be re-declared and reassigned.

Key Characteristics :

Function Scope: Variables declared with var are scoped to the function in which they are declared. If declared outside a function, they have global scope.
Hoisting: Variable declaration (not initialization) are hoisted to the top of their scope. This means we can technically use a var variable before it's declaration in the code, but its value will be undefined.
Re-declaration: We can re-declare a variable with the same name using var within the same scope (not recommended to do so).
Reassignment: We can reassign the value of variable declared with var


var message = 'Hello';
console.log(message);  // output: Hello

message = 'World';  // Re-assignment
console.log(message);  // output: World

var message = 'Hello again';  // Re-declaration (not recommended)
console.log(message);  //Output: Hello again

2. let: Block Scoped

let was introduced in ECMAScript 2015 (ES6) as a more modern and preferred way to declare variables. It has block scope and does not allow re-declaration within the same scope. Variables declared with let can be reassigned.

Key Characteristics :

Block Scope: Variables declared with let are scoped to the block of code (defined by curly braces {}) in which they are declared (e.g., if statements, for loops, functions).
No Hoisting (Temporal Dead Zone): While let declarations are hoisted, we cannot access them before the point of declaration in the code. Doing so will result in a ReferenceError. This period between the start of the scope and the declaration is called the "temporal dead zone."
No Re-declaration: We cannot re-declare a variable with the same name using let within the same scope. This helps prevent accidental overwriting of variables.
Reassignment: We can change the value of a variable declared with let.

let count = 0;
console.log(count); // Output: 0

count = 1; // Reassignment
console.log(count); // Output: 1

// let count = 2; // Error: Identifier 'count' has already been declared

if (true) {
  let blockVar = "inside block";
  console.log(blockVar); // Output: inside block
}
// console.log(blockVar); // Error: blockVar is not defined outside the block

console.log(age); // Error: Cannot access 'age' before initialization
let age = 25;
console.log(age); // Output: 25

3. const: Block Scoped

const was also introduced in ES6 and is used to declare constants – variables whose values should not be reassigned after they are initialized. const also has block scope and exhibits the temporal dead zone behavior similar to let.

Block Scope: Similar to let, const variables are scoped to the block in which they are declared.
No Hoisting (Temporal Dead Zone): const declarations are hoisted but cannot be accessed before their declaration.
No Re-declaration: We cannot re-declare a variable with the same name using const within the same scope.
No Reassignment: Once a const variable is assigned a value, we cannot reassign a new value to it. However, if a const variable holds an object or an array, the contents of that object or array can be modified.
Initialization Required: We must assign a value to a const variable when you declare it.

const MAX_VALUE = 100;
console.log(MAX_VALUE); // Output: 100

// MAX_VALUE = 150; // Error: Assignment to constant variable.

// const MIN_VALUE; // Error: Missing initializer in const declaration

if (true) {
  const blockConst = "another constant";
  console.log(blockConst); // Output: another constant
}
// console.log(blockConst); // Error: blockConst is not defined outside the block

const user = { name: "Jane" };
user.age = 28; // This is allowed (modifying object properties)
console.log(user); // Output: { name: 'Jane', age: 28 }

// user = { city: "New York" }; // Error: Assignment to constant variable.

For modern JavaScript development, it's generally recommended to use let for variables that might be reassigned and const for variables whose values should remain constant. Avoid using var in new code due to its less predictable scoping behavior.

Lean more about

Hoisting and Temporal Dead Zone (TDZ)

Forem: NITESH GAIROLA

Closures in JavaScript: Why one should know about them !

What Are Closures in JavaScript?

How Closures Work Under the Hood

Why you should know about closures in JavaScript?

Common Mistakes with JavaScript Closures

The Loop and var Trap (Revisited with Emphasis):

The Fix: Embracing let (and Sometimes IIFEs):

Closures and Memory Leaks

Advanced Use Cases of Closures

Creating Private Variables Using Closures

Closures in Currying and Memoization

Currying

Memoization

Resources to Learn More

What Is Hoisting in JavaScript? Understanding TDZ and let/const Pitfalls

Introduction

What is Hoisting in JavaScript?

How Hoisting Works with var

Function Hoisting

The Temporal Dead Zone (TDZ): Modern JavaScript's Safety Net

How let and const Handle Hoisting

The TDZ in Action

Practical Implications: When Hoisting and TDZ Matter

Debugging Unexpected undefined Values

Making Sense of "Cannot Access Before Initialization" Errors

Block Scope and TDZ Interactions

Class Field Initializations

Best Practices to Avoid Hoisting and TDZ Pitfalls

Testing Your Understanding: Common Hoisting and TDZ Interview Questions

Conclusion: Mastering JavaScript's Memory Management

Further Reading and Resources

JavaScript Variables Explained: var, let, and const for Beginners

Key uses of variables in JavaScript:

Different ways to declare variables in JavaScript (var, let and const):

1. var: Function Scoped

Key Characteristics :

2. let: Block Scoped

Key Characteristics :

3. const: Block Scoped

Lean more about

The Loop and `var` Trap (Revisited with Emphasis):

How Hoisting Works with `var`

How `let` and `const` Handle Hoisting

Debugging Unexpected `undefined` Values