DEV Community: Ansh Sheladiya

JavaScript Memory Management: Garbage Collection, Leaks, and Best Practices

Ansh Sheladiya — Thu, 01 Oct 2026 06:30:00 +0000

JavaScript developers rarely manage memory manually, but understanding what happens behind the scenes is essential for building reliable applications. Every object, array, function, and closure consumes memory while it remains reachable by the application.

JavaScript engines automatically reclaim memory through garbage collection, but automatic cleanup does not mean memory leaks are impossible. Poorly managed references, event listeners, timers, caches, and closures can keep objects alive much longer than expected.

This article explains how JavaScript memory management works, how garbage collection identifies unused objects, and how common coding patterns can accidentally retain memory. We will also build a runnable example that demonstrates object allocation, references, cleanup, and practical techniques for reducing unnecessary memory usage.

Understanding JavaScript Memory Management and Garbage Collection

JavaScript memory management can be understood through three fundamental stages: allocation, usage, and release. When you create an object, array, function, or other reference type, the JavaScript engine allocates memory for it automatically. Primitive values are also stored and managed by the engine, although their representation and storage strategy can vary between JavaScript engines.

The important concept is reachability. Modern JavaScript engines use garbage collectors that determine whether allocated objects can still be reached from active references, such as variables, global objects, closures, and other reachable objects. When an object is no longer reachable, the garbage collector can reclaim its memory.

Consider an object assigned to a variable called user. While user references the object, that object remains reachable and cannot normally be collected. If the variable is reassigned or goes out of scope, the object may become unreachable and eventually eligible for garbage collection.

Memory leaks occur when an application unintentionally maintains references to objects that it no longer needs. Common causes include global variables, growing arrays used as caches, forgotten event listeners, active timers, closures retaining large objects, and data structures that are never cleared.

A useful strategy is to manage object lifetimes intentionally. Remove unnecessary references, clean up timers and listeners, limit cache sizes, avoid accidental globals, and use structures such as WeakMap and WeakSet when you need associations that should not prevent garbage collection. Remember that setting a variable to null does not immediately free memory; it only removes one reference, and actual reclamation happens when the garbage collector runs.

console.log("=== JavaScript Memory Management Demo ===");
console.log("Step 1: Understanding object allocation and references\n");

function createUser(id) {
  // Every object created here requires memory allocation.
  return {
    id,
    name: `User ${id}`,
    preferences: {
      theme: "dark",
      notifications: true
    }
  };
}

let user = createUser(101);
console.log("Created user:", user);
console.log("The variable 'user' currently keeps the object reachable.\n");

console.log("Step 2: Creating multiple objects");
const users = [];

for (let i = 1; i <= 5; i++) {
  users.push(createUser(i));
}

console.log("Users stored in array:", users.length);
console.log("The array maintains references to all five objects.\n");

console.log("Step 3: Removing a reference");
user = null;
console.log("The original user reference was removed.");
console.log("If no other reference exists, that object is now eligible for garbage collection.\n");

console.log("Step 4: Removing objects from an array");
users.length = 0;
console.log("Users array length after cleanup:", users.length);
console.log("The objects previously referenced only by this array may now be collectible.\n");

console.log("Step 5: Demonstrating a potential memory leak");
const cache = [];

function addToCache(item) {
  // This cache grows forever if nothing removes old entries.
  cache.push(item);
}

for (let i = 0; i < 1000; i++) {
  addToCache({
    id: i,
    data: new Array(100).fill(`data-${i}`)
  });
}

console.log("Cache entries:", cache.length);
console.log("An unlimited cache can continuously increase memory usage.\n");

console.log("Step 6: Cleaning the cache");
cache.length = 0;
console.log("Cache entries after cleanup:", cache.length);
console.log("Removing references allows eligible objects to be reclaimed later.\n");

console.log("Step 7: Using WeakMap for object associations");
const metadata = new WeakMap();
let session = { id: "session-001" };

metadata.set(session, {
  createdAt: Date.now(),
  permissions: ["read", "write"]
});

console.log("Metadata stored for session:", metadata.get(session));
console.log("WeakMap keys do not keep their objects alive by themselves.\n");

console.log("Step 8: Removing the final strong reference");
session = null;
console.log("The session object no longer has our strong reference.");
console.log("Its WeakMap association can become collectible when the object is otherwise unreachable.\n");

console.log("Step 9: Inspecting Node.js memory usage");
const memory = process.memoryUsage();

console.log("Heap used:", `${(memory.heapUsed / 1024 / 1024).toFixed(2)} MB`);
console.log("Heap total:", `${(memory.heapTotal / 1024 / 1024).toFixed(2)} MB`);
console.log("External memory:", `${(memory.external / 1024 / 1024).toFixed(2)} MB`);

console.log("\n=== Demo Complete ===");
console.log("Key lesson: garbage collection handles reclamation, but developers control object lifetimes through references.");

Conclusion

JavaScript garbage collection removes much of the manual memory-management burden from developers, but it does not eliminate the need to think about memory. The key idea is reachability: objects that remain reachable through active references can remain in memory even when the application no longer needs them.

For production applications, watch carefully for unbounded caches, long-lived closures, forgotten timers, event listeners, and accidental global references. In Node.js applications, tools such as process.memoryUsage(), heap snapshots, and profiling tools can help identify unusual memory growth.

Good memory management is primarily about controlling object lifetimes and unnecessary references. By understanding reachability and using cleanup patterns deliberately, you can build JavaScript applications that remain stable and efficient as their workload grows.

Mastering Async Await in JavaScript: Practical Patterns for Modern Apps

Ansh Sheladiya — Thu, 01 Oct 2026 02:30:00 +0000

Asynchronous JavaScript is everywhere: API requests, database operations, file handling, timers, and background tasks all depend on non-blocking execution. The challenge is writing asynchronous code that remains readable, predictable, and easy to debug as applications grow.

Promises solved many problems around asynchronous workflows, but deeply chained .then() calls can still become difficult to follow. async and await provide a cleaner syntax that lets asynchronous code read almost like synchronous code while preserving JavaScript's non-blocking behavior.

Mastering async/await is not just about knowing the syntax. It means understanding promise behavior, error handling, parallel execution, sequential workflows, and when Promise.all() is a better choice.

Understanding Async Await in Real-World JavaScript

An async function always returns a Promise, even when it appears to return a normal value. The await keyword pauses execution inside that async function until the awaited Promise settles, without blocking the JavaScript event loop.

A common mistake is using await for independent operations that could run simultaneously. If two API requests do not depend on each other, starting both promises first and then awaiting them with Promise.all() can significantly reduce total waiting time.

Error handling is another important part of async/await. A try...catch block can handle rejected promises using familiar synchronous-looking control flow, while finally is useful for cleanup tasks that should happen regardless of success or failure.

The following example simulates a realistic order-processing workflow. It demonstrates sequential operations, parallel asynchronous tasks, structured error handling, artificial network delays, and detailed console output so you can observe exactly how the workflow progresses.

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// Simulate fetching a user from an API.
async function fetchUser(userId) {
  console.log(`[1] Fetching user ${userId}...`);
  await delay(700);

  console.log(`[2] User ${userId} fetched successfully.`);
  return {
    id: userId,
    name: "Ansh",
    email: "ansh@example.com"
  };
}

// Simulate fetching products independently from another service.
async function fetchProducts() {
  console.log("[3] Fetching products...");
  await delay(900);

  console.log("[4] Products fetched successfully.");
  return [
    { id: 101, name: "Keyboard", price: 2500 },
    { id: 102, name: "Mouse", price: 1200 },
    { id: 103, name: "Monitor", price: 15000 }
  ];
}

// Simulate fetching account preferences.
async function fetchPreferences(userId) {
  console.log(`[5] Fetching preferences for user ${userId}...`);
  await delay(600);

  console.log("[6] Preferences fetched successfully.");
  return {
    currency: "INR",
    notifications: true
  };
}

// Simulate creating an order through an external service.
async function createOrder(user, product, preferences) {
  console.log(`[7] Creating order for ${user.name}...`);
  await delay(800);

  const total = product.price;

  console.log("[8] Order created successfully.");
  return {
    orderId: `ORD-${Date.now()}`,
    customer: user.name,
    product: product.name,
    total,
    currency: preferences.currency
  };
}

// Main workflow demonstrates practical async/await patterns.
async function processOrder() {
  console.log("--- Async/Await workflow started ---");

  try {
    // Step 1: Fetch the user first because later operations need user data.
    const user = await fetchUser(42);

    // These requests are independent, so start them together.
    console.log("[9] Starting independent requests in parallel...");
    const productsPromise = fetchProducts();
    const preferencesPromise = fetchPreferences(user.id);

    // Wait for both operations at the same time.
    const [products, preferences] = await Promise.all([
      productsPromise,
      preferencesPromise
    ]);

    console.log("[10] Parallel requests completed.");

    // Select the first product for this demonstration.
    const selectedProduct = products[0];
    console.log(`[11] Selected product: ${selectedProduct.name}`);

    // Create the order after all required data is available.
    const order = await createOrder(
      user,
      selectedProduct,
      preferences
    );

    console.log("[12] Final order details:");
    console.log(JSON.stringify(order, null, 2));
    console.log("--- Workflow completed successfully ---");
  } catch (error) {
    // Any rejected Promise inside the try block reaches this handler.
    console.error("Order processing failed:", error.message);
  } finally {
    // Cleanup or logging can happen regardless of success or failure.
    console.log("--- Async workflow finished ---");
  }
}

// Execute the asynchronous workflow.
processOrder();

Conclusion

The key to mastering async/await is understanding what happens underneath the clean syntax. Promises still power the workflow, while async and await make asynchronous control flow easier to read and maintain.

For sequential dependencies, await keeps the code straightforward. For independent operations, start the promises together and use Promise.all() to avoid unnecessary waiting; combine that with try...catch for reliable error handling.

Once these patterns become familiar, async JavaScript becomes much easier to structure. The goal is not simply to replace .then() chains, but to design asynchronous workflows that are readable, efficient, resilient, and easy for other developers to maintain.

Understanding JavaScript Closures: How They Work and Why They Matter

Ansh Sheladiya — Wed, 30 Sep 2026 06:30:00 +0000

JavaScript closures are one of the most important concepts for understanding how functions work beyond their immediate scope. They allow a function to remember and access variables from the scope where it was created, even after that outer function has finished executing.

Closures appear throughout modern JavaScript, including callbacks, event handlers, factory functions, modules, and asynchronous code. Once you understand how lexical scope and closures work together, many JavaScript patterns become easier to read, design, and debug.

How JavaScript Closures Work

A closure is created when a function is defined inside another function and keeps access to variables from its surrounding lexical scope. The inner function does not copy those variables; instead, it maintains access to the environment where those variables were originally defined.

This behavior is useful for creating private state without exposing variables directly. In the example below, createCounter returns an object whose methods form closures over the private count variable, so the value can only be changed through the provided methods.

Closures are also useful when creating multiple independent instances of state. Each call to createCounter creates a new lexical environment, meaning one counter can be updated without affecting another counter.

The same principle applies to asynchronous callbacks and event handlers. JavaScript preserves the required lexical environment so that a callback can still access variables that existed when the callback was created.

function createCounter(start = 0) {
  let count = start;

  function increment() {
    count += 1;
    return count;
  }

  function decrement() {
    count -= 1;
    return count;
  }

  function getValue() {
    return count;
  }

  return {
    increment,
    decrement,
    getValue
  };
}

const firstCounter = createCounter(10);
const secondCounter = createCounter(100);

console.log(firstCounter.getValue());
console.log(firstCounter.increment());
console.log(firstCounter.increment());
console.log(firstCounter.decrement());

console.log(secondCounter.getValue());
console.log(secondCounter.increment());

function createGreeter(name) {
  const message = `Hello, ${name}!`;

  return function greet() {
    return message;
  };
}

const greetAnsh = createGreeter("Ansh");
console.log(greetAnsh());

Conclusion

Closures give JavaScript functions the ability to retain access to variables from their original lexical environment. This makes them especially valuable for encapsulating state, building reusable functions, and controlling how data can be accessed or modified.

A strong understanding of closures also helps explain common JavaScript behavior involving callbacks, asynchronous operations, and function factories. Rather than treating closures as a complicated language feature, think of them as functions carrying access to the scope they were created in.

When writing JavaScript, use closures deliberately when private state or preserved context makes the design clearer. Understanding their behavior will make it easier to work with both everyday JavaScript code and larger applications built around functional patterns.

Modern JavaScript Features Every Developer Should Know in 2026

Ansh Sheladiya — Wed, 30 Sep 2026 02:30:00 +0000

JavaScript has evolved far beyond callbacks, var declarations, and manual object manipulation. Modern JavaScript provides cleaner syntax, safer data handling, powerful asynchronous patterns, and language features that make everyday application code easier to maintain.

Features such as optional chaining, nullish coalescing, destructuring, spread syntax, async/await, private class fields, and modern array methods are now practical tools for frontend and backend development. Understanding them helps developers write code that is shorter without sacrificing readability.

This article explores several modern JavaScript features through practical examples. The goal is not just to learn syntax, but to understand where these features can improve real-world applications.

Modern JavaScript Features for Cleaner and More Maintainable Code

Optional chaining makes it safer to access deeply nested properties without repeatedly checking whether each parent object exists. Nullish coalescing complements it by providing fallback values only when a value is null or undefined, which prevents valid values such as 0 or false from being accidentally replaced.

Destructuring, spread syntax, and modern array methods make data transformation much more expressive. Instead of manually copying properties or writing verbose loops, developers can clearly describe what data they need and how collections should be transformed.

Modern asynchronous JavaScript also benefits from async/await, Promise.all, and Promise.allSettled. These APIs make asynchronous workflows easier to read while allowing independent operations to run concurrently when appropriate.

The example below combines these features in a small Node.js-compatible program. It demonstrates safe property access, default values, object and array transformations, private class fields, asynchronous operations, and modern collection methods in one runnable example.

const users = [
  {
    id: 1,
    name: "Ansh",
    profile: { city: "Surat", preferences: { theme: "dark" } },
    skills: ["JavaScript", "React", "Node.js"]
  },
  {
    id: 2,
    name: "Priya",
    profile: { city: "Mumbai" },
    skills: ["JavaScript", "Next.js"]
  },
  {
    id: 3,
    name: "Rahul",
    profile: null,
    skills: ["Node.js", "MongoDB"]
  }
];

const getUserCity = (user) => user.profile?.city ?? "Unknown";

const summaries = users.map(({ id, name, skills, profile }) => ({
  id,
  name,
  city: profile?.city ?? "Unknown",
  primarySkill: skills.at(0) ?? "No skill"
}));

const allSkills = [...new Set(users.flatMap((user) => user.skills))];

const activeUsers = users.filter(({ skills }) => skills.includes("JavaScript"));

const userMap = Object.fromEntries(
  users.map((user) => [user.id, user.name])
);

class UserCounter {
  #count = 0;

  add() {
    this.#count += 1;
    return this.#count;
  }

  get count() {
    return this.#count;
  }
}

const delay = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));

async function loadData() {
  const results = await Promise.all([
    delay(100, "users loaded"),
    delay(150, "settings loaded")
  ]);

  const settled = await Promise.allSettled([
    delay(50, "analytics loaded"),
    Promise.reject(new Error("optional service unavailable"))
  ]);

  console.log("Cities:", users.map(getUserCity));
  console.log("Summaries:", summaries);
  console.log("All skills:", allSkills);
  console.log("Active users:", activeUsers);
  console.log("User map:", userMap);
  console.log("Parallel results:", results);
  console.log("Settled results:", settled);

  const counter = new UserCounter();
  counter.add();
  counter.add();
  console.log("Private counter:", counter.count);
}

loadData().catch((error) => {
  console.error("Application error:", error.message);
});

Conclusion

Modern JavaScript features are valuable because they solve common problems with less boilerplate and clearer intent. Optional chaining and nullish coalescing improve defensive data access, while destructuring, spread syntax, Set, and modern array methods simplify data manipulation.

For asynchronous applications, async/await combined with Promise utilities provides a readable way to coordinate independent operations and handle partial failures. Private class fields also provide stronger encapsulation when classes are appropriate for the design.

The most effective approach is to learn these features through everyday use rather than memorizing syntax in isolation. As modern JavaScript becomes the foundation of both browser and Node.js applications, these patterns can help developers build code that is easier to read, test, maintain, and extend.

JavaScript Event Loop Explained: Call Stack, Microtasks, and Async Execution

Ansh Sheladiya — Wed, 30 Sep 2026 02:30:00 +0000

JavaScript is often described as a single-threaded language, yet it can handle timers, network requests, promises, and user interactions without freezing the application. The key to understanding this behavior is the event loop, which coordinates synchronous code, asynchronous callbacks, and queued tasks.

The event loop becomes especially important when working with Promises, async/await, setTimeout, and Node.js APIs. Once you understand how the call stack, microtask queue, and task queue interact, many confusing JavaScript execution-order problems become predictable.

In this article, we will trace asynchronous JavaScript step by step using a runnable example. You will see exactly why synchronous logs execute first, why Promise callbacks can run before timers, and how the event loop keeps processing work.

How the JavaScript Event Loop Coordinates Async Execution

JavaScript starts executing synchronous statements on the call stack. A function is pushed onto the stack when it starts running and removed when it finishes, so synchronous operations follow a predictable last-in, first-out execution model.

Asynchronous operations such as timers and I/O are handled outside the call stack by the host environment. When their callbacks become ready, they are placed into appropriate queues instead of interrupting the currently running synchronous code.

Promise callbacks use the microtask queue, while timer callbacks such as setTimeout are generally scheduled as tasks. After the current synchronous stack becomes empty, JavaScript processes pending microtasks before moving on to the next task, which explains why a resolved Promise callback commonly executes before a zero-delay timer.

The following example demonstrates the complete flow with numbered console messages. It uses synchronous code, Promise callbacks, queueMicrotask, setTimeout, and async/await so you can observe how different pieces of the event loop interact in a real Node.js process.

console.log("1. Script starts");

// This function represents ordinary synchronous work.
function synchronousWork() {
  console.log("2. Synchronous function starts");
  console.log("3. Synchronous function finishes");
}

synchronousWork();

// setTimeout schedules a task for a later event-loop turn.
setTimeout(() => {
  console.log("8. setTimeout callback runs");
}, 0);

// Promise callbacks are placed into the microtask queue.
Promise.resolve().then(() => {
  console.log("5. Promise.then microtask runs");
});

// queueMicrotask also schedules work in the microtask queue.
queueMicrotask(() => {
  console.log("6. queueMicrotask callback runs");
});

// This async function executes synchronously until its first await.
async function demonstrateAsyncAwait() {
  console.log("4. async function starts");

  // await pauses this function and schedules its continuation
  // as a Promise microtask after the awaited Promise settles.
  await Promise.resolve();

  console.log("7. async function continues after await");
}

demonstrateAsyncAwait();

// This log still executes synchronously because no queued callback
// can interrupt the currently running JavaScript stack.
console.log("9. Script finishes");

// A second timer demonstrates that timers run after queued microtasks
// have had an opportunity to execute.
setTimeout(() => {
  console.log("10. Second timer callback runs");
}, 0);

// The expected high-level execution order is:
// 1. Synchronous script starts.
// 2. synchronousWork executes immediately.
// 3. Timers are registered for later execution.
// 4. Promise and queueMicrotask callbacks are queued as microtasks.
// 5. async function runs until await.
// 6. The remaining synchronous script finishes.
// 7. Microtasks are processed before timer tasks.
// 8. Timer callbacks execute afterward.

console.log("11. Main script has completed scheduling work");

Conclusion

The event loop is the coordination mechanism that allows JavaScript to remain responsive while asynchronous work is being scheduled. The most important mental model is to separate the current call stack from queued asynchronous work and then remember that microtasks receive priority before the next task is processed.

Promises and async/await are therefore not magically creating additional JavaScript threads. Instead, they schedule continuations that the runtime executes when the current synchronous work has finished, while the surrounding environment handles operations such as timers and I/O.

Understanding this execution model makes debugging asynchronous JavaScript much easier. It also helps you write more predictable Node.js and browser applications because you can reason about exactly when callbacks become eligible to run.