Remove an Entry by Key in a JavaScript Object

In JavaScript, objects store data as key-value pairs. You can remove a property from an object by specifying its key.

• The delete operator removes a property directly from an object.
• Object.keys() and filter() can create a new object without the specified key.
• Object destructuring can exclude a property while keeping the remaining properties.
• Object.entries() and Object.fromEntries() can be used to filter object properties without modifying the original object.

The following approaches can be used to remove an entry by key from a JavaScript object.

Approach 1: Using the delete Operator

The delete operator removes a property directly from an object. This approach is useful when you want to modify the existing object.

const user = {
    name: "Ryan",
    age: 30,
    role: "Web Developer",
    company: "GeeksforGeeks"
};

delete user.company;

console.log(user);

{ name: 'Ryan', age: 30, role: 'Web Developer' }

• delete user.company removes the company property.
• The original object is modified.
• Bracket notation can also be used when the key is stored in a variable.

Syntax:

delete objectName.keyName;

// Or

delete objectName[keyName];

Example: Removing Multiple Keys

When multiple keys need to be removed, they can be stored in an array and deleted using a loop.

function removeKeys(obj, keys) {
    for (const key of keys) {
        delete obj[key];
    }

    return obj;
}

const user = {
    name: "Ryan",
    age: 30,
    role: "Web Developer",
    experience: 6,
    company: "GeeksforGeeks"
};

const keysToRemove = ["role", "experience", "company"];

console.log(removeKeys(user, keysToRemove));

{ name: 'Ryan', age: 30 }

Approach 2: Using filter() with Object.keys()

The Object.keys() method returns an array containing the object's property names. The filter() method can then be used to exclude the key that should be removed.

const user = {
    name: "Joey",
    age: 30,
    gender: "Male"
};

const newUser = Object.keys(user)
    .filter(key => key !== "name")
    .reduce((result, key) => {
        result[key] = user[key];
        return result;
    }, {});

console.log(newUser);

{ age: 30, gender: 'Male' }

• Object.keys(user) gets all property names.
• filter() removes "name" from the list of keys.
• reduce() creates a new object using the remaining keys.
• The original object remains unchanged.

Approach 3: Using Object Destructuring

Object destructuring can be used with the rest (...) syntax to exclude a specific property and collect the remaining properties into a new object.

const user = {
    name: "Ryan",
    age: 30,
    role: "Web Developer",
    company: "GeeksforGeeks"
};

const { company, ...updatedUser } = user;

console.log(updatedUser);

{ name: 'Ryan', age: 30, role: 'Web Developer' }

• company extracts the property that should be excluded.
• ...updatedUser collects all remaining properties.
• A new object is created without modifying the original object.

Removing a Dynamic Key

When the key is stored in a variable, computed property names can be used with destructuring.

function removeKey(obj, keyToRemove) {
    const { [keyToRemove]: removed, ...rest } = obj;
    return rest;
}

const user = {
    name: "Ryan",
    age: 30,
    role: "Web Developer",
    company: "GeeksforGeeks"
};

const updatedUser = removeKey(user, "company");

console.log(updatedUser);

{ name: 'Ryan', age: 30, role: 'Web Developer' }

Approach 4: Using Object.entries() and Object.fromEntries()

Object.entries() converts an object into an array of key-value pairs. We can filter out the unwanted entry and use Object.fromEntries() to convert the remaining entries back into an object.

const user = {
    name: "Ryan",
    age: 30,
    role: "Web Developer",
    company: "GeeksforGeeks"
};

function removeKey(obj, keyToRemove) {
    return Object.fromEntries(
        Object.entries(obj)
            .filter(([key]) => key !== keyToRemove)
    );
}

const updatedUser = removeKey(user, "company");

console.log(updatedUser);

{ name: 'Ryan', age: 30, role: 'Web Developer' }

• Object.entries() converts the object into key-value pairs.
• filter() removes the specified key.
• Object.fromEntries() creates a new object from the remaining pairs.
• The original object is not modified.

Syntax:

const newObject = Object.fromEntries(
    Object.entries(object)
        .filter(([key]) => key !== keyToRemove)
);

Note: Use delete when you want to modify the existing object. Use destructuring or Object.fromEntries() when you want to create a new object while keeping the original unchanged.