Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript: How to remove the key-value pairs corresponding to the given keys from an object?
In JavaScript, objects store data as key-value pairs. You can access object data using dot notation (obj.key) or bracket notation (obj["key"]). Sometimes you need to remove specific key-value pairs from an object. Here are three effective methods to accomplish this.
Using the delete Operator
The delete operator is the most straightforward way to remove a property from an object. It permanently removes both the key and its value.
<!DOCTYPE html>
<html>
<head>
<title>Delete Operator Example</title>
</head>
<body>
<div id="result"></div>
<script>
let obj = { key1: "value1", key2: "value2", key3: "value3" };
console.log("Before deletion:", obj);
delete obj.key2;
console.log("After deletion:", obj);
document.getElementById("result").innerHTML = JSON.stringify(obj);
</script>
</body>
</html>
Before deletion: {key1: "value1", key2: "value2", key3: "value3"}
After deletion: {key1: "value1", key3: "value3"}
{"key1":"value1","key3":"value3"}
Using Object Destructuring (Modern Approach)
Object destructuring with the rest operator creates a new object without the specified key, leaving the original object unchanged.
<!DOCTYPE html>
<html>
<head>
<title>Destructuring Example</title>
</head>
<body>
<div id="result"></div>
<script>
let obj = { key1: "value1", key2: "value2", key3: "value3" };
console.log("Original object:", obj);
// Remove key2 using destructuring
const { key2, ...newObj } = obj;
console.log("New object:", newObj);
console.log("Original unchanged:", obj);
document.getElementById("result").innerHTML = JSON.stringify(newObj);
</script>
</body>
</html>
Original object: {key1: "value1", key2: "value2", key3: "value3"}
New object: {key1: "value1", key3: "value3"}
Original unchanged: {key1: "value1", key2: "value2", key3: "value3"}
{"key1":"value1","key3":"value3"}
Using Object.keys() with filter() and reduce()
This method creates a new object by filtering out unwanted keys. It's useful when removing multiple keys or when the key names are dynamic.
<!DOCTYPE html>
<html>
<head>
<title>Filter Method Example</title>
</head>
<body>
<div id="result"></div>
<script>
let obj = { key1: "value1", key2: "value2", key3: "value3" };
let keysToRemove = ["key2"];
let newObj = Object.keys(obj)
.filter(key => !keysToRemove.includes(key))
.reduce((acc, key) => {
acc[key] = obj[key];
return acc;
}, {});
console.log("Filtered object:", newObj);
document.getElementById("result").innerHTML = JSON.stringify(newObj);
</script>
</body>
</html>
Filtered object: {key1: "value1", key3: "value3"}
{"key1":"value1","key3":"value3"}
Comparison of Methods
| Method | Modifies Original? | Multiple Keys? | Performance |
|---|---|---|---|
delete operator |
Yes | One at a time | Fastest |
| Destructuring | No | Multiple supported | Fast |
| filter() + reduce() | No | Easy for arrays of keys | Slower for large objects |
Conclusion
Use the delete operator for simple, direct removal. Choose destructuring for immutable operations, and use the filter approach when removing multiple keys dynamically. Each method serves different use cases in JavaScript object manipulation.
12K+ Views
