How to check if Variable is an Array in JavaScript
By: Samantha Ming
Tags: JavaScript, Web Development, Software Engineering, Programming, Javascript Tips

Here’s a Code Recipe to check whether a variable or value is either an array or not. You can use the Array.isArray() method. For older browser, you can use the polyfill 👍

const variable = ['🍝', '🍜', '🍲']; // ✅ NEWER BROWSER

Array.isArray(variable); // 🕰 OLDER BROWSER

Object.prototype.toString.call(variable) === '[object Array]';

Modern way to check Array

The best way to check Array is using the built-in Array.isArray() 👏

Array.isArray([]); // true

Array.isArray(['🍝']); // true

Array.isArray(new Array('🍝')); // true

Browser Support

The support for Array.isArray() is actually pretty good 👍

Polyfill for Older Browsers

If you need older browser support, then you can use this MDN polyfill.

if (!Array.isArray) {

Array.isArray = function(arg) {

return Object.prototype.toString.call(arg) === '[object Array]';

};

}

Other Ways using Lodash or Underscore

If you’re using an external library, they also have some built-in methods too 👏

Lodash

Checks if value is classified as an Array object.

const array = ['🍝', '🍜', '🍲'];

const notArray = 'not array'; _.isArray(array); // true

_.isArray(notArray); // false

Underscore

Returns true if object is an Array.

const array = ['🍝', '🍜', '🍲'];

const notArray = 'not array'; _.isArray(array); // true

_.isArray(notArray); // false

Yes, the syntax is the same as Lodash 🤓

Why can’t we use typeof ?

Often, we want to check the type of a value, we simply use typeof

typeof 'string'; // 'string'

typeof 100; // 'number'

typeof true; // 'boolean'

typeof false; // 'boolean'

typeof function() {}; // 'function'

typeof {}; // 'object' typeof []; // 'object' <-- 😱

The problem is that Array is actually under the umbrella of Objects data type. So typeof is indeed returning truthfully. Unfortunately, that isn't really helpful for us who just want to check if the value is an array or not 🙊

typeof Table

Primitives

MDN: Primitive is data type that is not an object and has no methods. All primitives are immutable (ie. they can’t be altered). They are stored by value

In JavaScript, there are 6 data types that are primitives.

string number bigint boolean undefined symbol

Non-Primitives (Objects)

MDN: Object refers to a data structure containing data and instructions for working with the data. They are stored by reference

Although I call it “non-primitivies”, these are called Objects. (I personally prefer

it as the former, because my brain when speaking of objects, typically rings up {} 😳)

object array function

Although when we use typeof on function, it returns "function" , it is actually an object.

MDN: It is done as a special shorthand for Functions, though every Function constructor is derived from Object constructor.

So why didn’t the shorthand extends to array, I don’t know 🤷‍♀️ But at least they’re trying to redeem themselves with the built-in method Array.isArray() 😅

Code Buster 👩‍🔬

I’ve received a lot of different solutions that people have suggested we can use to check Array. At first glance, they seem like great solutions. But unfortunately, there are some problems or edge cases that make them not ideal. So let’s do some code busting 💉

Problem with Array.length

const array = ['🍝', '🍜', '🍲']; array.length; // 3

😷 So if an array has a length, we can assume that it’s an array?

👩‍⚕️ Unfortunately, the problem with this solution is that there are other data types that have lengths ie. strings. So this can lead to false positive.

const string = 'not array'; string.length; // 9

Even object can have length property, if we set it 😱

const object = { length: 2 };

const array = ['🍝', '🍜', '🍲']; typeof array === 'object' && Boolean(array.length); // true

typeof object === 'object' && Boolean(object.length); // true <-- 😱

⚠ Of course, there are a lot more problems with this — this wouldn’t work on checking an empty array because 0 is considered false. Anyways, TLDR; just use Array.isArray() 👍 Doctor's order 👩‍⚕️

Problem with instanceof

const array = ['🍝', '🍜', '🍲']; array instanceof Array; // true

👩‍⚕️This is a common solution that I see people reference too. Honestly, it’s a good one. In many cases, this will work as expected. BUT, there is a gotcha on this! It doesn’t work with multiple contexts (e.g. frames or windows). Because each frame has different scopes with its own execution environment. Thus, it has a different global object and different constructors. So if you try to test an array against that frame’s context, it will NOT return true , it will return incorrectly as false .

const frameNode = document.createElement('iframe'); // Create an iframe Element Node

document.body.appendChild(frameNode); // Append our frame element

const frameBrowser = window.frames[window.frames.length - 1]; // Access the frame from our current window

frameArray = frameBrowser.Array; // Access the "Array" object of the frame we created // Create a new Array in our frame environment

const newFrameArray = new frameArray('🍝', '🍜', '🍲'); newFrameArray instanceof Array; // ❌ false Array.isArray(newFrameArray); // ✅ true

Problem with constructor

const array = ['🍝', '🍜', '🍲']; array.constructor === Array; // true

👩‍⚕️ This is another really good solution. Unfortunately, this suffers the same issue as instanceof . It also doesn't work with multiple contexts.

// ... newFrameArray.constructor === Array; // ❌ false Array.isArray(newFrameArray); // ✅ true

Community Input

@fabiokounang:_ One of the example may be if you are making a dynamic table, so if it is an array you want to loop the array and output it in the table, but if it is just an object, you can loop by its keys using Object.keys first and then loop all the key and value.

This is great to use with conditional. If it’s an array, you want to perform some action and if it isn’t you want to do something else.

References