🠗 Skip reading – scroll down to solution 🠗
Table of Contents
Why it is so important to verify if variable is an object or array?
In JavaScript it is easy to be fooled. The same is with objects and arrays. Often we must check if some variable is object or array. Short example – we receive some data from REST API via AJAX call, and we suppose this is an object, we can use its properties like:
response.data
but response object can be not an object but e.g. string “nothing found”. And the result will be “undefined” as string does not contain “data” property. Worse case would be if we want to dig deeper in that variable (which is supposed to be an object), e.g.:
response.data.employees
With that we will get Type Error:
Uncaught TypeError: Cannot read property 'employees' of undefined
Even worse it is with arrays – we can try to run Array prototype methods like “map” on variable received from AJAX request, like on code below:
const employees = response.data.map((item, i) => {
return `Employee number: ${i} - ${item}`
});But… “response.data” from AJAX call is in reality not a ARRAY, but… STRING! And you will get next Type Error:
Uncaught TypeError: x.map is not a function
So above examples shows very well that in JavaScript it is very important to check if variable is object or array.
How to be sure in js that variable is object or array?
You can think now:
WTF? To check if it is array our object just use operator “typeof”!
Yes… but it is not so easy and not so clear with JavaScript. Of course, you can check type of variable which is supposed to be an object, but this is a little tricky thing in JavaScript, because, generally, in JavaScript… everything is an object. And type “object” is not reserved for this what we, developers, treat as object like “{…}”.
Wanna example? Press F12 here, open the developers tools and open console window and put there code below – you will see that examples below are objects, but not seems to be an objects in general meaning.
console.log(typeof null); // object
console.log(typeof []);Â //Â object
console.log(typeof {});Â //Â objectInteresting? It shows why we need to check unknown variables if it is array or object, not just assume that.
So in our example with REST API ajax request, when it would return “null” or “array” but we expect object, then writing only, e.g.: if(typeof response.data) would be far to less.
JavaScript solution: check if variable is object or array
To check if variable is array or object we need to do a few steps:
- Check if variable is null.
- For identifying objects: check if variable is not an array.
- For identifying arrays: check if variable is an array.
- Check if variable type is “object”.
Solution code below, you can just copy-paste and reuse that in your project:
const isNull = (val) => (!val && typeof val === "object"); const isObject = (data) => !Array.isArray(data) && ( typeof data === "object") && !isNull(data); const isArray = (data) => Array.isArray(data) && ( typeof data === "object") && !isNull(data);
And that’s all. It is always good to keep this 3 basic methods somewhere in our project and use it often, mostly when we receive data (like from AJAX request in example above) in our JavaScript code which content might be unexpected – and it needs to be checked if variable is array, object, null or string.
