How to Clear an Object in JavaScript

# Table of Contents

1. Clear an Object in JavaScript
2. Only clearing a nested object
3. Clear an Object by reassigning its variable in JavaScript
4. Clearing an object using getOwnPropertyNames
5. Clear an Object using Object.keys() and forEach()
6. Clear an Object using Object.keys() and for...of

# Clear an Object in JavaScript

Use a for..in loop to clear an object and delete all its properties. The loop will iterate over all the enumerable properties in the object.

On each iteration, use the delete operator to delete the current property.

Copied!
const obj = {a: 'one', b: 'two'};

for (const key in obj) {
  delete obj[key];
}

console.log(obj); // 👉️ {}

The for...in loop iterates over all of an object's enumerable properties.

Properties assigned to the object using the Object.defineProperty() method are non-enumerable by default and are not iterated over in a for...in loop.

The Object.defineProperty() method is mostly used by third-party library creators and not in day-to-day code, so chances are the for...in loop covers all of your object's properties.

# Only clearing a nested object

The same approach can be used if you only need to clear a nested object.

Copied!
const obj = {
  a: 'one',
  b: 'two',
  address: {c: 'three', d: 'four'},
};

for (const key in obj.address) {
  delete obj.address[key];
}

console.log(obj); // 👉️ { a: 'one', b: 'two', address: {} }

We used a for...in loop to iterate over the obj.address nested object.

On each iteration, we delete the current key-value pair.

If you need to clear an entire object, it would be much more performant to reassign the variable.

# Clear an Object by reassigning its variable in JavaScript

This is a two-step process:

1. Declare the variable that stores the object using the let keyword.
2. Reassign the variable to an empty object.

Copied!
let obj = {a: 'one', b: 'two'};

obj = {};

console.log(obj); // 👉️ {}

It is much more performant to reassign the variable that stores the object, setting it to an empty object.

This is only possible if you used the let or var keywords to declare the variable.

Notice that we used the let keyword when declaring the obj variable.

# Clearing an object using getOwnPropertyNames

In the extremely unlikely scenario that your object contains non-enumerable properties, you can use the following approach to clear an object.

Copied!
let obj = {a: 'one', b: 'two'};

Object.defineProperty(obj, 'color', {
  value: 'red',
  enumerable: false, // 👈️ defaults to false
  configurable: true,
  writable: true,
});

const allProperties = Object.getOwnPropertyNames(obj);
console.log(allProperties); // 👉️ ['a', 'b', 'color']

allProperties.forEach(property => {
  delete obj[property];
});

console.log(Object.getOwnPropertyNames(obj)); // []

We used the Object.getOwnPropertyNames() method to get an array of the enumerable and non-enumerable properties of the object.

We used the Array.forEach method to iterate over the array and then we cleared each property using the delete operator.

Another simple way to clear an object is to use the Object.keys() and Array.forEach() methods.

# Clear an Object using Object.keys() and forEach()

This is a three-step process:

1. Use the Object.keys() method to get an array of the object's keys.
2. Use the Array.forEach() method to iterate over the array of keys.
3. Use the delete operator to delete each key from the object.

Copied!
const obj = {a: 'one', b: 'two', c: 'three'};

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

console.log(obj); // 👉️ {}

The Object.keys() method returns an array of the object's keys.

Copied!
const obj = {a: 'one', b: 'two', c: 'three'};

// 👇️ [ 'a', 'b', 'c' ]
console.log(Object.keys(obj));

The function we passed to the Array.forEach() method gets called with each element of the array.

Copied!
const obj = {a: 'one', b: 'two', c: 'three'};

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

console.log(obj); // 👉️ {}

On each iteration, we use the delete statement to delete the current key.

After the last iteration, the object is empty.

# Clear an Object using Object.keys() and for...of

The same approach can be used to clear an object using a for...of loop.

Copied!
const obj = {a: 'one', b: 'two', c: 'three'};

for (const key of Object.keys(obj)) {
  delete obj[key];
}

console.log(obj); // 👉️ {}

We used the Object.keys() method to get an array of the object's keys.

The next step is to use a for...of loop to iterate over the array, removing each key.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.