Remove the Empty Objects from an Array in JavaScript

# Remove Empty Objects from an Array in JavaScript

To remove empty objects from an array:

1. Use the Array.filter() method to iterate over the array.
2. Use the Object.keys() method to check if each object isn't empty.
3. The filter() method will return a new array that doesn't contain empty objects.

Copied!
const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = arr.filter(element => {
  if (Object.keys(element).length !== 0) {
    return true;
  }

  return false;
});

// 👇️ [{id: 1}, {id: 2}]
console.log(results);

The function we passed to the Array.filter() method gets invoked with each element (object) in the array.

If the function returns a truthy value, the filter() method adds the element to the results array.

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

Copied!
console.log(Object.keys({})); // 👉️ []

console.log(Object.keys({id: 1})); // 👉️ ['id']

If the object has no key-value pairs, the method returns an empty array.

We only return true and add the object to the results array if it has at least 1 key-value pair.

Copied!
console.log(Object.keys(0).length); // 👉️ 0

console.log(Object.keys([]).length); // 👉️ 0

If your array contains types other than objects, use the following approach to remove only the empty objects from the array.

Copied!
const arr = [{}, {id: 1}, 'a', 0, {}, []];

const results = arr.filter(element => {
  if (
    typeof element === 'object' &&
    !Array.isArray(element) &&
    Object.keys(element).length === 0
  ) {
    return false;
  } else {
    return true;
  }
});

// 👇️ [{id: 1}, 'a', 0, []]
console.log(results);

We used the && (and) operator to specify that all conditions have to be met for the if block to run.

We first check if the element has a type of object, but this isn't sufficient because JavaScript arrays also have a type of object.

Copied!
console.log(typeof []) // 👉️ 'object'

Then we check that the element isn't an array and that the object is empty.

In all other cases, the array element isn't an empty object and gets added to the new array.

Most of the time it's an anti-pattern to store multiple different types in an array. If you need to store different types in the same array, chances are you're doing something wrong.

If you have to remove the empty objects from an array often, define a reusable function.

Copied!
function removeEmptyObjects(array) {
  const newArray = array.filter(element => {
    if (Object.keys(element).length !== 0) {
      return true;
    }

    return false;
  });

  return newArray;
}

const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = removeEmptyObjects(arr);

// 👇️ [{id: 1}, {id: 2}]
console.log(results);

The removeEmptyObjects() function takes an array as a parameter and removes the empty objects from the array.

Alternatively, you can use the Array.forEach() method to iterate over the array.

# Remove Empty Objects from an Array using Array.forEach()

This is a three-step process:

1. Use the Array.forEach() method to iterate over the array.
2. Use the Object.keys() method to check if each object isn't empty.
3. Push the matching elements into a new array.

Copied!
const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = [];

arr.forEach(element => {
  if (Object.keys(element).length !== 0) {
    results.push(element);
  }
});

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(results);

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

On each iteration, we use the Object.keys() method to check if the current object isn't empty.

If the condition is met, we push the object into the results array.

If you have to do this often, create a reusable function.

Copied!
function removeEmptyObjects(array) {
  const newArray = [];

  array.forEach(element => {
    if (Object.keys(element).length !== 0) {
      newArray.push(element);
    }
  });

  return newArray;
}

const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const result = removeEmptyObjects(arr);

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(result);

The removeEmptyObjects() function takes an array as a parameter and removes all empty objects from the array.

Here is an example that removes the null and undefined values and the empty objects from an array.

Copied!
function removeEmptyObjects(array) {
  const newArray = [];

  array.forEach(element => {
    if (
      element !== null &&
      element !== undefined &&
      Object.keys(element).length !== 0
    ) {
      newArray.push(element);
    }
  });

  return newArray;
}

const arr = [{}, null, {id: 1}, null, {}, {id: 2}, {}];

const result = removeEmptyObjects(arr);

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(result);

We used the logical AND (&&) operator, so for the if block to run, all 3 conditions have to be met.

The new array doesn't contain any null and undefined values and empty objects.

Alternatively, you can use a basic for loop.

# Remove Empty Objects from an Array using a for loop

This is a four-step process:

1. Declare a results variable and initialize it to an empty array.
2. Use a for loop to iterate over the original array.
3. Use the Object.keys() method to check if each object isn't empty.
4. Push the matching elements into the results array.

Copied!
const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = [];

for (let index = 0; index < arr.length; index++) {
  if (Object.keys(arr[index]).length !== 0) {
    results.push(arr[index]);
  }
}

// 👇️ [ { id: 1 }, { id: 2 } ]
console.log(results);

We used a for loop to iterate over the array of objects.

On each iteration, we check if the current object isn't empty using the Object.keys() method.

If the condition is met, we push the object into the results array.

Which approach you pick is a matter of personal preference. I'd use the Array.filter() method as I find it quite direct and intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Remove first or first N elements from Array in JavaScript
• Remove last or last N elements from an Array in JavaScript
• Remove Duplicates from an Array of Objects in JavaScript
• Remove Null or Undefined Values from an Array in Javascript
• How to skip over an Element or an Index in .map() in JS