An object holds a set of properties. Within an object, there exists a connection between a name (referred to as a key) and a value, forming key-value pairs.
However, in the case of small applications, it does not necessitate an external dependency. Utilizing pure JavaScript is the most optimal approach for verifying the emptiness of an Object. Checking whether an Object is empty or not is a fundamental and commonly performed task. Despite this, there exist multiple techniques for ascertaining the emptiness of an Object.
Type 1:
By utilizing the Object.keys(Object) function in JavaScript:
The Object.keys(Object) method retrieves the keys from an Object provided as an argument. To determine the count of keys, the length property is utilized on the result. An Object is considered empty if the length property indicates that it contains 0 keys.
Syntax:
Object.keys(object).length === 0
Example:
<!DOCTYPE html>
<html>
//header section start--------------------
<head>
//title of the webpage-----------
<title>
Using javascript how we can check the empty Object.
</title>
</head>
<body>
<h1 style= "color: blue">
Example
</h1>
<b>
Using javascript how we can check the empty Object.
</b>
<p>
If the Object is empty click the button to check it
</p>
<p>this is the required output for an empty object:
<span class="opEmpty"></span>
</p>
<p>this is the required output for non empty Object:
<span class="opNonEmpty"></span>
</p>
<button onclick="checkObject()">
Click here
</button>
<script type= "text/javascript">
function checkObject() {
let emptyObj = {}
let nonEmptyObj = {
title: 'Title 1',
info: 'Sample Info'
}
ans1 = (Object.keys(emptyObj).length === 0)
document.querySelector('.opEmpty').textContent
= ans1;
ans2 = (Object.keys(nonEmptyObj).length === 0)
document.querySelector('.opNonEmpty').textContent
= ans2;
}
</script>
</body>
</html>
Output:
1) It is the output of before clicking button:
2) This is the output for after clicking button:
Type 2:
Object loop using Object.hasOwnProperty(key):
When iterating over an object, a function is generated to utilize the Object.hasOwnProperty method to verify the presence of the 'key' property within it. If no keys are identified during the iteration, the function will yield true, indicating that the object is empty. However, if a key is detected, the iteration stops, and false is returned.
Syntax:
function isEmptyObject(object) {
for (var key in Object) {
if (object.hasOwnProperty(key)) {
return false;
}
}
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Using javascript how we can check the empty Object.
</title>
</head>
<body>
<h1 style= "color: blue">
Example
</h1>
<b>
Using javascript how we can check the empty Object.
</b>
<p>
If the Object is empty click the button to check it
</p>
<p>
this is the required output for an empty object:
<span class="opEmpty"></span>
</p>
<p>
this is the required output for non empty Object
<span class="opNonEmpty"></span>
</p>
<button onclick="checkObject()">
Click here
</button>
<script type= "text/javascript">
function checkObject() {
let emptyObject = {}
let nonEmptyObject = {
title: 'Title 1',
info: 'Sample Info'
}
ans1 = isEmptyObject(emptyObject);
document.querySelector('.opEmpty').textContent
= ans1;
ans2 = isEmptyObject(nonEmptyObject);
document.querySelector('.opNonEmpty').textContent
= ans2;
}
function isEmptyObject(object) {
for (var key in Object) {
if (object.hasOwnProperty(key)) {
return false;
}
}
return true;
}
</script>
</body>
</html>
Output:
1) It is the output of before clicking button:
2) This is the output for after clicking button: