Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Remove Key-Value Pairs from JavaScript Object
In JavaScript, objects can be created to store data as key-value pairs. The data in an object can be accessed using the dot notation (obj.key) or the bracket notation (obj["key"]). See the below example
let obj = { key1: "value1", key2: "value2", key3: "value" };
We can remove the key-value pairs corresponding to the given keys from an object but in this tutorial, we are going to look at 3 methods.
Using the delete operator
The delete operator is used to delete a property of an object. The delete operator will not delete the variable itself, but only the value of the variable.
Example
See the below example
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
let obj = { key1: "value1", key2: "value2", key3: "value3" };
delete obj.key2;
document.getElementById("result").innerHTML = JSON.stringify(obj);
console.log(obj)
</script>
</body>
</html>
As you can see from the above example, the delete operator only deletes the value of the key and not the key itself.
Below is the line by line explanation of the above code
let obj = { key1: "value1", key2: "value2", key3: "value3" };
We have created an object with 3 key-value pairs.
delete obj.key2;
The delete operator is used to delete the key-value pair where the key is “key2”.
console.log(obj);
The output of the above code in the console will be: { key1: "value1", key3: "value3" }. As you can see, the key-value pair with the key “key2” is deleted from the object.
Using the filter() method
The filter() method is used to create a new array from an existing array. See the below example:
Example
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
let obj = { key1: "value1", key2: "value2", key3: "value3" };
let newObj = Object.keys(obj)
.filter(key => key != "key2")
.reduce((acc, key) => {
acc[key] = obj[key];
return acc;
}, {});
document.getElementById("result").innerHTML =
JSON.stringify(newObj);
console.log(newObj)
</script>
</body>
</html>
As you can see from the above example, the filter() method only deletes the value of the key and not the key itself.
Below is the line by line explanation of the above code:
let obj = { key1: "value1", key2: "value2", key3: "value3" };
We have created an object with 3 key-value pairs.
let newObj = Object.keys(obj)
.filter(key => key != "key2")
.reduce((acc, key) => {
acc[key] = obj[key];
return acc;
}, {});
The Object.keys() method is used to create an array of the keys of the object. The filter() method is used to create a new array from the existing array. The key is compared with “key2”. If it is not equal, then the key-value pair is added to the new array. The reduce() method is used to reduce the array to an object.
console.log(newObj);
The output of the above code will be: { key1: "value1", key3: "value3" }. As you can see, the key-value pair with the key “key2” is deleted from the object.
Using the for…in loop
The for…in loop is used to iterate over the properties of an object.
Example
See the below example
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
let obj = { key1: "value1", key2: "value2", key3: "value3" };
for (let key in obj) {
if (key == "key2") {
delete obj[key];
}
}
document.getElementById("result").innerHTML =
JSON.stringify(obj);
console.log(obj)
</script>
</body>
</html>
As you can see from the above example, the for…in loop only deletes the value of the key and not the key itself.
Below line by-line explanation of the above code:
let obj = {key1: "value1", key2: "value2", key3: "value3"};
We have created an object with 3 key-value pairs.
for (let key in obj) {
if (key == "key2") {
delete obj[key];
}
}
The for…in loop is used to iterate over the properties of an object. The key variable is used to store the key of the object. If the key is “key2”, then the key-value pair is deleted from the object.
console.log(obj);
The output of the above code will be: { key1: "value1", key3: "value3" }. As you can see, the key-value pair with the key “key2” is deleted from the object.
Conclusion
In this tutorial, we looked at 3 methods to remove the key-value pairs corresponding to the given keys from an object. The delete operator, the for…in loop and the filter() method.
11K+ Views
