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:

Table of Content

Using the typeof operator
Using try-catch to catch Reference error

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:

How to check whether an object exists in javascript ? — Using the typeof operator to check whether an object exists

Method 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>