How to remove a key-value pair from JavaScript object?

In JavaScript, objects store data in key-value pairs. Sometimes, it is necessary to remove a specific key and its associated value from an object to update, clean, or manipulate data dynamically.

Methods to Remove a Key-Value Pair from an Object

There are several methods that can be used to remove a key from a JavaScript object:

1. Using the delete Operator

The delete operator removes a specified key-value pair from a JavaScript object. It directly deletes the property and its value from the object, modifying the original object. This method is simple and commonly used when you need to remove properties dynamically.

Syntax

delete objectName.propertyName;

const details = {
    name: 'Ajay',
    age: 30,
    country: 'India'
};

console.log('Original Object:', details);
delete details.age;
console.log('Object after deleting age key:', details);

Original Object: { name: 'Ajay', age: 30, country: 'India' }
Object after deleting age key: { name: 'Ajay', country: 'India' }

2. Using Destructuring with the Rest Operator

Destructuring with the rest operator removes a key-value pair from a JavaScript object by creating a new object without the specified key. You can separate the unwanted key and retain the remaining properties in a new object.

Syntax

const { propertyToRemove, ...rest } = objectName;

const details = {
    name: 'Ajay',
    age: 30,
    country: 'Idia'
};

console.log('orignal object', details)

// After using destructuring and rest operator 
const { age, ...rest } = details;
console.log(rest);

orignal object { name: 'Ajay', age: 30, country: 'Idia' }
{ name: 'Ajay', country: 'Idia' }

3.Using Object.fromEntries() and Object.entries() Methods

The Object.fromEntries() and Object.entries() methods remove a key-value pair by converting the object into an array of entries, filtering out the unwanted key, and then reconstructing the object. This approach creates a new object without modifying the original one.

const obj = {
  name: 'Jiya',
  age: 30,
  city: 'New Delhi'
};

const updatedObj = Object.fromEntries(
  Object.entries(obj).filter(([key]) => key !== 'age')
);

console.log(updatedObj); 

{ name: 'Jiya', city: 'New Delhi' }

4. Using Underscore.js _.omit() to Remove a Key from Object

The Underscore.js _.omit() method creates a new object by excluding specified keys from the original object. This approach allows you to remove one or more key-value pairs without mutating the original object, returning a modified copy instead.

Syntax:

objName = _.omit(objName, 'ketToRemove');

// Ensure Underscore.js is included
// You would typically include Underscore.js in your HTML or project setup

let details = {
    name: 'Alia',
    age: 30,
    country: 'Delhi'
};

console.log("Object before removal:", details);

details = _.omit(details, 'age');

console.log("Object after removal:", details);

Output:

{ name: 'Alia', country: 'Delhi' }

5. Removing Keys from an Object Using filter()

While the filter() method works directly on arrays, objects in JavaScript are not directly filterable like arrays. However, we can convert an object’s keys or entries into an array and then apply the filter() method to remove unwanted key-value pairs.

Syntax

let filteredArray = array.filter(callback(element, index, array));

function removeKeys(obj, keysToRemove) {
    return Object.keys(obj)
        .filter(key => !keysToRemove.includes(key))
        .reduce((newObj, key) => {
            newObj[key] = obj[key];
            return newObj;
        }, {});
}

const user = {
    name: "Alia",
    age: 30,
    city: "Delhi",
    country: "India"
};

const updatedUser = removeKeys(user, ["age", "city"]);
console.log(updatedUser);

{ name: 'Alia', country: 'India' }

Conclusion

In JavaScript, key-value pairs can be removed using methods like the delete operator, destructuring with the rest operator, Object.fromEntries(), Underscore.js _.omit(), utility functions, and filter(). Each method offers different approaches depending on whether the original object is modified or a new one is created, providing flexibility in object manipulation.