July 9, 2020
How to Check if Variable is Object in Javascript
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.HTML & CSS
- We have 3 elements in the HTML file (
div
,button
, andh1
). Thediv
element is just a wrapper for the rest of the elements. - The inner text for the
button
element is“Check”
and for theh1
element is“Result”
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
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
andh1
using thedocument.querySelector()
method and stored them inbtnCheck
andresult
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 thebutton
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 theh1
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'; });