How to check whether an object exists in javascript ?
Last Updated :
24 Sep, 2024
Checking whether an object exists in JavaScript refers to determining if a variable or property has been declared and contains a valid value. This helps avoid errors when accessing or manipulating objects that may be undefined, null, or not initialized properly.
Here we have some common approaches to check whether an object exists in javascript:
Method 1: Using the typeof operator
The typeof operator in JavaScript returns the type of a variable as a string. If an object doesn't exist, typeof will return undefined. This approach helps determine if a variable or object has been declared without causing runtime errors.
Syntax:
if (typeof objectToBeTested != "undefined")
// object exists
else
// object does not exist Example: In this example, we checks if an object exists in JavaScript using the typeof operator. When the button is clicked, it verifies if both an existing and non-existing object are defined,
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Using the typeof operator</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>How to check whether an
object exists in javascript</b>
<p>Click on the button to
check if the object exists</p>
<p>Output for existing object:
<span class="outputExist"></span>
</p>
<p>Output for non existing object:
<span class="outputNonExist"></span>
</p>
<button onclick="checkObjectExists()">
Click here
</button>
<script type="text/javascript">
function checkObjectExists() {
// create an existing object for comparison
let existingObject = {};
if (typeof existingObject != "undefined") {
ans = true;
} else {
ans = false
}
document.querySelector(
'.outputExist').textContent = ans;
if (typeof nonExistingObject != "undefined") {
ans = true;
} else {
ans = false;
}
document.querySelector(
'.outputNonExist').textContent = ans;
}
</script>
</body>
</html>
Output:
Using the typeof operator to check whether an object existsMethod 2: Using try-catch to catch Reference error
The try-catch approach in JavaScript checks if an object exists by attempting to access its properties. If the object doesn't exist, a ReferenceError is thrown, which the catch block handles, allowing graceful detection of missing or undefined objects.
Syntax:
try {
objectToBeTested.prop;
// object exists
}
catch {
// object does not exist
}Example: In this example, we a try-catch block to check whether an object exists in JavaScript. When the button is clicked, it verifies both an existing and non-existing object,
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Using try-catch to catch Reference error</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>How to check whether an
object exists in javascript</b>
<p>Click on the button to check
if the object exists</p>
<p>Output for existing object:
<span class="outputExist"></span>
</p>
<p>Output for non existing object:
<span class="outputNonExist"></span>
</p>
<button onclick="checkObjectExists()">Click here</button>
<script type="text/javascript">
function checkObjectExists() {
// create an existing object for comparison
let existingObject = {};
try {
// accessing a random property
existingObject.prop;
ans = true;
} catch {
ans = false;
}
document.querySelector(
'.outputExist').textContent = ans;
try {
// accessing a random property
nonExistingObject.prop;
ans = true;
} catch {
ans = false;
}
document.querySelector(
'.outputNonExist').textContent = ans;
}
</script>
</body>
</html>
Output:
Using try-catch to catch Reference error to check whether an object exists