Skip to main content

How to Clear an Object in JavaScript

When working with objects, you sometimes need to "clear" them, meaning to remove all of their properties. There are two fundamentally different ways to achieve this, and the correct choice depends on a critical distinction: are you mutating the original object, or are you reassigning the variable that points to it?

This guide will explain the difference between these two approaches and teach you the modern, standard methods for each.

The Core Distinction: Mutation vs. Reassignment​

This is the most important concept to understand:

  • Reassignment (Immutable approach): You make your variable point to a new, empty object. The original object is left untouched and will be garbage-collected if no other variables are referencing it. This is generally the safest and recommended approach.

  • Mutation (Destructive approach): You directly delete the properties from the original object. The object itself remains the same in memory, but it becomes empty. This is necessary only when other parts of your code hold a reference to the exact same object and need to see that change.

For example:

let myObject = { a: 1, b: 2 };

const referenceToObject = myObject; // Another variable now points to the SAME object

// --- Reassignment ---
myObject = {};
console.log(myObject);              // Output: {}
console.log(referenceToObject);     // Output: { a: 1, b: 2 } (The original object is unchanged!)

// --- Mutation ---
myObject = { a: 1, b: 2 };          // Reset for the next example
for (const key in myObject) {
  delete myObject[key];
}
console.log(myObject);              // Output: {}
console.log(referenceToObject);     // Output: {} (The original object itself was changed!)

As you can see, the two methods have very different outcomes for other parts of your code that might be referencing the object.

For the vast majority of use cases, the simplest, fastest, and safest way to "clear" an object is to reassign its variable to a new, empty object literal.

For example, we have an object and we want the variable to hold an empty object instead.

// Problem: How to make this variable an empty object?
let data = { a: 1, b: 2 };

Solution:

let data = { a: 1, b: 2 };

// Simply reassign it.
data = {};

console.log(data); // Output: {}
note

Important: This only works if the variable was declared with let or var. You cannot reassign a variable declared with const.

Method 2: Mutating the Original Object​

If you need to modify the original object so that all references to it see the change, you must delete its properties.

For example, we want to empty an object without changing the reference to it.

The for...in loop is a reliable way to iterate over an object's enumerable keys.

const data = { a: 1, b: 2 };

for (const key in data) {
  // Use hasOwnProperty for safety, though often not strictly necessary
  if (Object.prototype.hasOwnProperty.call(data, key)) {
    delete data[key];
  }
}

console.log(data); // Output: {}

An Alternative Solution(Functional Style)​

You can also use Object.keys() with forEach() to achieve the same result.

const data = { a: 1, b: 2 };

Object.keys(data).forEach(key => {
  delete data[key];
});

console.log(data); // Output: {}

Conclusion: Which Method Should You Use?​

Choosing the right method is simple once you understand the difference.

  • Use reassignment (myObject = {};) for 99% of cases. It is the simplest, fastest, and safest method. It follows the principles of immutability, which leads to more predictable code.
  • Use mutation (a for...in loop with delete) only when you have a specific and intentional reason to modify the original object in place, such as when other parts of your application must react to the change on that specific object reference.

Table of Contents