March 20, 2022

How to Check if Variable is Object and Not Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check if variable is object and not array in javascript. Javascript object is a collection of properties where each property consists of key-value pair.

Almost in every programming language, objects are of reference type and the same goes for javascript. This means that it contains a reference to the data allocated in memory rather than holding the actual data. Two objects with the same sort of properties are never equal since they are holding 2 completely different references.

Before accessing any property in an object, you must make sure that you are dealing with an object since the data type of a javascript variable is not guaranteed to remain consistent during its lifecycle. This is why javascript is considered a weakly typed language. The value can be of type string, integer, boolean, object, undefined, null, or array.

In the following example, we have one global variable user and we just want to verify if it holds an object as its value or not. Depending upon the result of the check, we will get a Boolean value and we will display it inside the h1 element. Please have a look over the code example and steps given below.

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Check” and for the h1 element is “Result”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Check</button>
        <h1>Result</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected 2 elements button and h1 using the document.querySelector() method and stored them in btnCheck and result variables respectively.
We have a global variable user and it holds an empty object as its value.
We have attached the click event listener to the button element.
In the event handler function, we are using typeof keyword to check if the user is an object or not. Point to be noted here is that null and arrays are also considered as an object. That’s why we are using the logical AND (&&) operator and performing 3 checks to get the correct result.
The first check is to make sure that the user is an object.
The second check is to make sure that the user is not equal to null.
The third check is to make sure that the user is not an array.
After these 3 checks, we will get True in return and we will display it in the h1 element.

let btnCheck = document.querySelector('button');
let result = document.querySelector('h1');

let user = {};

btnCheck.addEventListener('click', () => {
    result.innerText = typeof user == 'object' && user != null && !Array.isArray(user) ? 'True' : 'False';
});

You May Also Like: