How to Filter an Object Based on Keys in JavaScript

Filtering an object based on its keys is a common task when you need to extract or exclude specific properties. JavaScript offers several methods to accomplish this efficiently, depending on your use case.

let obj = { name: "Alice", age: 25, location: "Wonderland" };
let filteredObj = Object.keys(obj)
  .filter(key => key !== "age")
  .reduce((result, key) => {
    result[key] = obj[key];
    return result;
  }, {});

console.log(filteredObj); // { name: "Alice", location: "Wonderland" }

• Purpose: Filter an object to include or exclude certain keys.
• Common Methods: Object.keys(), Object.entries(), Object.fromEntries(), and reduce().

In JavaScript, objects are fundamental data structures that store key-value pairs. Often, you may need to filter an object to create a new one that includes or excludes certain keys. This is useful for tasks such as preparing data for APIs, managing state in applications, or transforming data.

Filtering Using Object.keys()

Object.keys() returns an array of an object’s own property names, which can be filtered and then used to construct a new object.

Example 1: Excluding Specific Keys

let obj = { name: "Alice", age: 25, location: "Wonderland" };
let filteredObj = Object.keys(obj)
  .filter(key => key !== "age")
  .reduce((result, key) => {
    result[key] = obj[key];
    return result;
  }, {});

console.log(filteredObj); // { name: "Alice", location: "Wonderland" }

Explanation:

• Object.keys(obj): Retrieves the keys of the obj object as an array.
• .filter(key => key !== "age"): Filters out the key "age" from the array.
• .reduce((result, key) => { ... }, {}): Constructs a new object from the filtered keys by adding back the corresponding key-value pairs from obj.

Filtering Using Object.entries() and Object.fromEntries()

Object.entries() returns an array of an object’s own enumerable property [key, value] pairs, which can be filtered and then converted back into an object using Object.fromEntries().

Example 2: Including Specific Keys

let obj = { name: "Alice", age: 25, location: "Wonderland" };
let allowedKeys = ["name", "location"];
let filteredObj = Object.fromEntries(
  Object.entries(obj).filter(([key]) => allowedKeys.includes(key))
);

console.log(filteredObj); // { name: "Alice", location: "Wonderland" }

Explanation:

• Object.entries(obj): Converts obj into an array of [key, value] pairs.
• .filter(([key]) => allowedKeys.includes(key)): Filters the entries based on whether the key is in the allowedKeys array.
• Object.fromEntries(): Converts the filtered array of entries back into an object.

Filtering Using reduce()

reduce() is a versatile method that can be used to apply custom filtering logic while constructing a new object.

Example 3: Custom Filtering Logic

let obj = { name: "Alice", age: 25, location: "Wonderland", status: "active" };
let filteredObj = Object.keys(obj).reduce((result, key) => {
  if (key.startsWith("l")) {
    result[key] = obj[key];
  }
  return result;
}, {});

console.log(filteredObj); // { location: "Wonderland" }

Explanation:

• .reduce((result, key) => { ... }, {}): Iterates over each key and adds it to the result object only if it meets a certain condition (in this case, if the key starts with the letter “l”).

Using Lodash for Key Filtering

Lodash is a utility library that provides convenient methods for manipulating objects, including key filtering.

Example 4: Using Lodash _.pick() and _.omit()

let obj = { name: "Alice", age: 25, location: "Wonderland" };

// Using _.pick() to include specific keys
let pickedObj = _.pick(obj, ["name", "location"]);
console.log(pickedObj); // { name: "Alice", location: "Wonderland" }

// Using _.omit() to exclude specific keys
let omittedObj = _.omit(obj, ["age"]);
console.log(omittedObj); // { name: "Alice", location: "Wonderland" }

Explanation:

• _.pick(obj, ["name", "location"]): Creates a new object that includes only the specified keys.
• _.omit(obj, ["age"]): Creates a new object that excludes the specified keys.

Conclusion

Filtering an object based on its keys in JavaScript is a powerful technique that allows you to create new objects with desired properties. Whether using native JavaScript methods like Object.keys(), Object.entries(), and reduce(), or leveraging utility libraries like Lodash, these approaches offer flexibility for various use cases.

By mastering these techniques, you can efficiently manage and transform data in your JavaScript applications, making your code more robust and maintainable.