Remove Null or Undefined Values from Object in Javascript

# Table of Contents

1. Remove Null or Undefined Values from an Object
2. Remove the null and undefined values from a nested object
3. Remove the null and undefined values from an object using reduce()
4. Remove the null and undefined values from an object using a for...in loop

# Remove Null or Undefined Values from an Object

To remove all null values from an object:

1. Use the Object.keys() method to get an array of the object's keys.
2. Use the forEach() method to iterate over the array.
3. Check if each value is equal to null.
4. Delete the null values using the delete operator.

Copied!
// ✅ Remove null values from an object
const obj = {
  one: null,
  two: 2,
  three: null,
};

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

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

If you need to remove all null and undefined values from the object, use the loose equality (==) operator.

Copied!
// ✅ Remove null and undefined values from an object
const obj = {
  a: null,
  b: undefined,
  c: 'test',
};

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

console.log(obj); // 👉️ {c: 'test'}

The code sample above removes the null and undefined values from the object.

If you only need to remove the undefined values from the object, use undefined in the place of null.

Copied!
// ✅ Remove undefined values from an object
const obj = {
  a: undefined,
  b: 'test',
  c: undefined,
};

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

console.log(obj); // 👉️ {b: 'test'}

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

Copied!
const obj = {
  one: null,
  two: 2,
  three: null,
};

// 👇️ ['one', 'two', 'three']
console.log(Object.keys(obj));

The Array.forEach() method allows us to iterate over the array of keys.

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

Copied!
const obj = {
  one: null,
  two: 2,
  three: null,
};

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

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

We check if the value, associated with the current key is equal to null.

If the condition is met, we use the delete operator to delete the key-value pair.

If you need to remove the null values from a nested object, use a recursive function.

# Remove the null and undefined values from a nested object

To remove the null and undefined values from a nested object:

1. Use the Object.entries() method to get a two-dimensional array of key-value pairs.
2. Use the filter() method to remove all null or undefined values from the array.
3. Call the function recursively to remove any nested null or undefined values.

Copied!
// ✅ Remove all `null` and `undefined` values from a nested object
const obj = {
  one: null,
  two: 2,
  three: {
    four: 4,
    five: null,
    six: undefined,
  },
};

function removeNull(obj) {
  return Object.fromEntries(
    Object.entries(obj)
      .filter(([_, value]) => value != null)
      .map(([key, value]) => [
        key,
        value === Object(value) ? removeNull(value) : value,
      ]),
  );
}

const result = removeNull(obj);

// 👇️ { two: 2, three: { four: 4 } }
console.log(result);

Notice that we used loose not equals (!=) to remove both null and undefined values from the nested object.

The loose equality operators (== and !=) cover both null and undefined because null and undefined are equal when compared loosely.

Copied!
console.log(null == undefined); // 👉️ true

console.log(null === undefined); // 👉️ false

The Object.entries() method returns a two-dimensional array of the object's key-value pairs.

Copied!
const obj = {
  one: null,
  two: 2,
  three: {
    four: 4,
    five: null,
    six: undefined,
  },
};

// [
//   [ 'one', null ],
//   [ 'two', 2 ],
//   [ 'three', { four: 4, five: null, six: undefined } ]
// ]
console.log(Object.entries(obj));

We used the Array.filter() method to remove the null values from the array and then used the Array.map() method to call the removeNull() function with the value if the value is an object.

The removeNull() function removes all null values from the nested object.

Alternatively, you can use the Array.reduce() method.

# Remove the null and undefined values from an object using reduce()

This is a three-step process:

1. Iterate over the object's keys using Array.reduce().
2. Check if the current key doesn't have a value of null or undefined.
3. If the condition is met, assign the key-value pair to the accumulator variable.

Copied!
const obj = {
  one: null,
  two: 2,
  three: null,
  four: null,
  five: 5,
  six: undefined,
};

const newObj = Object.keys(obj).reduce((accumulator, key) => {
  if (obj[key] != null) {
    accumulator[key] = obj[key];
  }

  return accumulator;
}, {});

// 👇️ { two: 2, five: 5 }
console.log(newObj);

We used the Object.keys() method to get an array of the object's keys and used the Array.reduce() method to iterate over the array.

On each iteration, we check if the current key doesn't have a value of null or undefined.

If the condition is met, we assign the key-value pair to the accumulator variable.

Alternatively, you can use a for...in loop.

# Remove the null and undefined values from an object using a for...in loop

This is a three-step process:

1. Use the for...in loop to iterate over the object.
2. On each iteration, check if the value is equal to null or undefined.
3. Use the delete operator to delete each null or undefined value.

Copied!
const obj = {
  one: null,
  two: 2,
  three: null,
  four: undefined,
};

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

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

The for...in loop allows us to iterate over the object's properties.

We check if the value of the current property is equal to null or undefined.

If the condition is met, we delete the key-value pair using the delete operator.

Which approach you pick is a matter of personal preference. I'd use the Object.keys() and Array.forEach() methods as I find the approach quite direct and intuitive.

# Additional Resources

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

• Remove Property from all Objects in Array in JavaScript
• Remove Object from an Array by its Value in JavaScript
• Remove Duplicates from an Array of Objects in JavaScript
• Remove the Empty Objects from an Array in JavaScript