← Back to all posts

How JavaScript Objects Work: A Practical Guide to Memory Management

Defining an Object

In JavaScript, an object is a collection of properties, created using curly braces:

let user = { name: "Alice", age: 25 };

Here, user is an object with two properties: name mapped to "Alice" and age mapped to 25. These key-value pairs are the building blocks of data storage, but how does JavaScript handle them behind the scenes?

Memory Allocation: Stack and Heap

When you create an object, JavaScript allocates memory in two distinct regions: the stack and the heap.

  • Stack: This is a fast, structured area of memory where the variable user is stored. However, user doesn’t hold the object itself—it holds a reference (a memory address) pointing to where the object resides.
  • Heap: The heap is a larger, dynamic region where the actual object data { name: "Alice", age: 25 } is stored. This separation allows JavaScript to efficiently manage complex data structures.

In short, the stack tracks the variable, while the heap stores the object’s contents. This split is key to understanding how objects behave.

References and Shared Memory

JavaScript objects are passed by reference, meaning variables point to the same memory location rather than duplicating data. Consider this example:

let user = { name: "Alice" };
let reference = user;
reference.name = "Bob";
console.log(user.name); // "Bob"

When reference = user is executed, reference doesn’t create a new object, it shares the same heap memory as user. Modifying reference.name updates the original object, demonstrating how references link to a single data instance. This behavior optimizes memory usage but requires careful handling to avoid unintended side effects.

Property Storage

Inside the heap, an object’s properties are stored as key-value pairs. The exact implementation depends on the JavaScript engine (e.g., V8 in Chrome or Node.js):

  • Property names (keys) like "name" are typically strings or Symbols.
  • Values can be primitives (e.g., strings, numbers) or references to other objects.

Engines like V8 optimize this storage using techniques such as hidden classes and inline caching, ensuring fast property access. For developers, this abstraction means you can focus on coding while the engine handles performance.

Garbage Collection

Memory management in JavaScript relies on a mark-and-sweep garbage collector. When an object is no longer referenced, it’s flagged for cleanup:

let user = { name: "Alice" };
user = null; // No references remain

Here, setting user to null removes the last reference to the object. The garbage collector periodically scans memory, identifies unreferenced data, and frees it from the heap. This automatic process prevents memory leaks, a common concern in lower-level languages.

Dynamic Property Management

Objects in JavaScript are dynamic—you can add or remove properties after creation:

let user = { name: "Alice" };
user.age = 30; // Adds a new property
delete user.name; // Removes a property

Each operation adjusts the object’s memory layout in the heap. Adding a property allocates additional space, while deleting one marks that data as unused, eventually reclaimed by the garbage collector. This flexibility makes objects powerful for prototyping and runtime modifications.

Why It Matters

Understanding how JavaScript objects interact with memory unlocks deeper control over your code. Efficient reference handling prevents bugs like unintended mutations, while awareness of garbage collection helps optimize resource usage. Whether you’re building small scripts or large applications, this knowledge strengthens your ability to write performant, reliable JavaScript.

Test Your Understanding

Try this example to see memory and references in action:

let data = { value: 10 };
let copy = data;
copy.value = 20;
console.log(data.value); // 20
data = null; // Breaks the reference

Experiment with adding properties or setting variables to null. Observe how changes ripple through references and how memory cleanup works.