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
How to remove all blank objects from an Object in JavaScript?
In JavaScript, removing blank or empty values from an object is a common task when cleaning up data. This article explores different methods to filter out empty strings, null values, or undefined properties from objects.
Sample Object with Empty Values
Let's work with an object containing empty values that we want to remove:
<!DOCTYPE html>
<html>
<body>
<script>
const details = {
name: 'John',
age: '',
city: 'New York',
phone: '',
email: 'john@example.com'
};
console.log('Original object:', details);
</script>
</body>
</html>
Using Object.entries() with reduce()
The reduce() method processes array elements and returns a single accumulated result. Combined with Object.entries(), it effectively filters out empty values:
Syntax
Object.entries(obj).reduce((accumulator, [key, value]) => {
return condition ? accumulator : (accumulator[key] = value, accumulator);
}, {});
Example
<!DOCTYPE html>
<html>
<body>
<script>
let details = {
company: "Tutorialspoint",
school: '',
college: '',
address: "Kavuri Hills"
};
let result = Object.entries(details).reduce((acc, [key, value]) => {
return value === '' ? acc : (acc[key] = value, acc);
}, {});
console.log('Filtered object:', result);
</script>
</body>
</html>
Filtered object: {company: "Tutorialspoint", address: "Kavuri Hills"}
Using Object.keys() with forEach()
The forEach() method iterates through object keys, allowing us to delete empty properties using the delete operator:
Syntax
Object.keys(obj).forEach(key => {
if (!obj[key]) {
delete obj[key];
}
});
Example
<!DOCTYPE html>
<html>
<body>
<script>
const vehicles = {
car: 'BENZ',
bike: 'BMW',
truck: '',
bus: ''
};
Object.keys(vehicles).forEach(key => {
if (!vehicles[key]) {
delete vehicles[key];
}
});
console.log('After removing empty values:', vehicles);
</script>
</body>
</html>
After removing empty values: {car: "BENZ", bike: "BMW"}
Using Spread Syntax with forEach()
This approach creates a new object instead of modifying the original, using the spread operator to build the result:
<!DOCTYPE html>
<html>
<body>
<script>
let bikes = {
bike1: "Rx100",
bike2: '',
bike3: '',
bike4: "Vespa"
};
let filteredBikes = {};
Object.keys(bikes).forEach(key => {
const value = bikes[key];
filteredBikes = value ? { ...filteredBikes, [key]: value } : filteredBikes;
});
console.log('Filtered bikes:', filteredBikes);
</script>
</body>
</html>
Filtered bikes: {bike1: "Rx100", bike4: "Vespa"}
Comparison of Methods
| Method | Modifies Original? | Performance | Readability |
|---|---|---|---|
reduce() |
No | Good | Moderate |
forEach() + delete |
Yes | Best | High |
forEach() + spread |
No | Slower | High |
Conclusion
Use forEach() with delete for modifying objects in-place, or reduce() for creating filtered copies. Choose based on whether you need to preserve the original object.
3K+ Views
