How to Remove Undefined Values from Objects in JavaScript

I’ve often found myself working with data that contains undefined values. These values can cause issues with data manipulation and can lead to unexpected behavior in your code. In this article, I’ll show you a few different ways to remove undefined values from an object in JavaScript.

First, let’s start by creating an object that contains some undefined values:

const data = {
  name: 'John',
  age: undefined,
  address: {
    city: 'New York',
    state: undefined
  },
  hobbies: [
    'reading',
    undefined,
    'traveling'
  ]
};

Method 1: Using the Object.entries() and filter() methods

One way to remove undefined values from an object is to use the Object.entries() method to get an array of key-value pairs, and then use the filter() method to remove any pairs where the value is undefined. Here's an example:

const cleanData = Object.entries(data)
  .filter(([key, value]) => value !== undefined)
  .reduce((obj, [key, value]) => {
    obj[key] = value;
    return obj;
  }, {});

console.log(cleanData);

This will give you a new object with all the key-value pairs where the value is not undefined.

Method 2: Using the for...in loop

Another way is to remove undefined values from an object is to use a for...in loop. This method will iterate over the object's properties and check if the value is undefined, if it's undefined it will delete it.

for (let key in data) {
  if (data[key] === undefined) {
    delete data[key];
  }
}
console.log(data);

Method 3: Using a Function with Object.keys() and forEach()

Another way to remove undefined values from an object in JavaScript is to use a function like the one you’ve described, which uses the Object.keys() method to get an array of the object's keys, and then iterates over that array with a forEach() loop. The function checks if the value of each key is undefined, and if it is, it uses the delete operator to remove that key-value pair from the object. Here's an example of how you could use this function

const removeUndefinedValuesFromObject = <T>(obj: T): T => {
  Object.keys(obj).forEach((key) => obj[key] === undefined && delete obj[key]);
  return obj;
};

const data = {
  name: 'John',
  age: undefined,
  address: {
    city: 'New York',
    state: undefined
  },
  hobbies: [
    'reading',
    undefined,
    'traveling'
  ]
};

const cleanData = removeUndefinedValuesFromObject(data);
console.log(cleanData);

This will give you a new object with all the key-value pairs where the value is not undefined. This method is similar to the for…in loop method but it’s a little more readable and maintainable.

We’re diving into different ways to remove those pesky undefined values from an object in JavaScript. We covered three methods in total, including using the Object.entries() and filter() methods, a for...in loop, and a function with Object.keys() and forEach(). Each method has its own set of benefits and use cases, so it's important to choose the one that best fits your specific needs. But don't just take my word for it! Try it out, and I would love to hear about other ways if you know any.

Thanks for taking the time to read this article and I hope you liked it! If so, please help support me by hitting that clap button.

If you’d like to catch up with me sometime, follow me on Twitter | LinkedIn, or simply visit my website.

P.S.: First, you should get my posts in your inbox. Do that here!

Secondly, if you like to experience Medium yourself, consider supporting me and thousands of other writers by signing up for a membership. It only costs $5 per month, it supports us, writers, greatly, and you have the chance to make money with your writing as well and reach 1000s of people with your writings. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.