In this tutorial, let’s look at the different ways to check if a JavaScript value is an array. We’re not just stopping at the usual ‘typeof’ operator. We’re going to go deeper than that.
Using the typeof operator
In JavaScript, if you’d like to find the type of any value, the typeof operator is the go-to method. So, let’s start with that first.
As you know, the typeof operator returns a string with the type (be it ‘string’, ‘number’, ‘boolean’, ‘object’). Why don’t we check the type of an empty array and an empty object?
console.log(typeof []); //object
console.log(typeof {}); //object
As you can see above, both arrays and objects return the same type ‘object’. So, how do we differentiate between them? Let’s look at that next.
How does the length property work with arrays vs objects?
The main differentiating factor between an array and an object is the ‘length’ property.
As you know, we can use the ‘length’ property on arrays to get back an integer number that refers to the number of elements in it.
Look at the code snippet below:
console.log([1,2,3].length); //3
console.log({
name: 'John',
age: 14,
gpa: 4
}.length); //undefined
console.log([].length); //0
console.log({}.length); //undefined
As you can see above, the ‘length’ property used with arrays return either a 0 (empty array) or a positive integer value.
But, with an object, you get back ‘undefined’, and nothing else, regardless of whether the object is empty or not. We can use this to our advantage.
Combining the ‘typeof’ operator with the ‘length’ property
We can combine the typeof operator with the ‘length’ property to check if the value we’re checking for is 100% an array or not.
Now, you might ask, why don’t we use just the ‘length’ property and not bother with ‘typeof’? Well, that’ll work with arrays, objects, numbers, and Boolean values, but what about strings?
The ‘length’ property works on strings as well, which is why we need to check if the value we’re checking for has a valid length while also being of type ‘object’, as shown below:
function isVarArray(arr) {
if(typeof arr === 'object' && arr.length != undefined) {
return 'Array';
}
return 'Not an array';
}
console.log(isVarArray([1,2,3])); //Array
console.log(isVarArray({name: 'John', age: 14, gpa: 4})); //Not an array
console.log(isVarArray([])); //Array
console.log(isVarArray({})); //Not an array
console.log(isVarArray('Hello there!')); //Not an array
Using the isArray method
Instead of jumping through hoops with multiple methods in your ‘if’ condition, you can instead use the isArray method to achieve the same result.
The isArray method is a pre-defined JavaScript array method (from the Array constructor, hence you should write it as ‘Array.isArray’), that returns true if the value is an array, and false if it’s not an array. Simple.
function isVarArray(arr) {
if(Array.isArray(arr)) {
return 'Array';
}
return 'Not an array';
}
Using the instanceof operator
You can also use the instanceof operator to check as well. This operator is used to check if the value inside a variable is an instance of a particular prototype’s constructor. In our case, we’re checking if ‘arr’ is an instance of the ‘Array’ constructor.
As you know, every array and object are instances of their respective Array and Object constructors, which is why you can use the pre-defined methods and properties of those constructors in these instances.
So, use the ‘instanceof’ operator, as shown below:
function isVarArray(arr) {
if(arr instanceof Array) {
return 'Array';
}
return 'Not an array';
}
Even though the type of an array and an object are the same (‘object’), they’re not from the same prototype, which is why they have varying methods and properties (‘length’ not being a common property, for instance), so checking for their respective constructors will give us the correct result.
More prototype methods
There are more prototype methods (Both Object and Array methods) that can be used to check if a value is an array. Let’s look at them in this section.
hasOwnProperty with the length property
The hasOwnProperty, which is a property of the Object constructor, gives your variable access to all the ‘own’ properties and methods of its constructor, and ignores the inherited properties and methods.
As we know, one of the major differences between an object and an array is the ‘length’ property. So, use the hasOwnProperty to check if the variable has ‘length’ as its property.
If it does, then this variable has an array inside of it, since hasOwnProperty exclusively works with the type ‘object’, which includes only arrays and objects.
arr.hasOwnProperty('length')
isPrototypeOf method
We can also use the isPrototypeOf method. If Array.prototype is a prototype of ‘arr’ (our variable), then we have an array in our hands.
If this check returns a false value, our variable does not contain an array.
Array.prototype.isPrototypeOf(arr)
Object.getPrototypeOf method
There’s also the Object.getPrototypeOf method, which a method of the Object prototype. It’s like the previous method, but the only difference is that it returns the prototype (Array.prototype in our case) of the variable.
If the value returned is equal to Array.prototype, our variable contains an array, and not otherwise.
Object.getPrototypeOf(arr) === Array.prototype
Array Constructor check
The simplest check is the constructor check. If we get back ‘Array’ for the arr.constructor check, that means our variable is an instance of the Array constructor, as shown below:
arr.constructor === Array
That’s it! Those are the 4 different ways of checking if a JavaScript value is an array.
We looked at,
1. The typeof operator and variations of it first,
2. Then we looked at the Array prototype’s isArray() method,
3. Then the Object prototype’s instanceof method, and finally,
4. We looked at more miscellaneous prototype methods to arrive at our desired result.