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 by 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 π
Browser | |
---|---|
Chrome | β |
Firefox | β |
Safari | β |
Edge | β |
Internet Explorer 9 | β |
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
Type | Example | Return |
---|---|---|
String | typeof "hello" |
"string" |
Boolean |
typeof true typeof false
|
"boolean" |
Number | typeof 100 |
"number" |
Undefined | "undefined" | |
Function | typeof function() {} |
"function" |
Null | typeof null |
"object" |
Non-Primitive |
typeof {} typeof []
|
"object" |
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 an 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 ](https://www.instagram.com/p/B-pfVTALEf/):_ 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
- MDN Web Docs: Array.isArray()
- w3schools: Array.isArray()
- MDN Web Docs: instanceof and multiple context
- MDN Web Docs: instanceof vs isArray
- MDN
- 2ality: Array.isArray
- StackOverflow: How do you check if a variable is an array in JavaScript?
- StackOverflow: How to check if an object is an array?
- JavaScript: Reviewing Primitive and Non-Primitive Data Types
- MIT: Determining with absolute accuracy whether or not a JavaScript object is an array
Thanks for reading β€
To find more code tidbits, please visit samanthaming.com
π¨Instagram | πTwitter | π©π»βπ»SamanthaMing.com |
Top comments (5)
Hi Samantha, excellent post !! I didn't know about the Array gotchas between different frames, so thanks for share it. I think in the
typeof
table you can include Symbol and BigInt as examples also :)Ya, that was an interesting discovery for me as well π I was thinking about including Symbol and BigInt, but I thought I was introducing too much. But for completeness, that should absolutely be included π
Wow, quite the thorough and detailed explanation. Thanks!
Thanks for the positive feedback! Glad you enjoyed it π
Awesome, thorough article!