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 BROWSERArray.isArray(variable);// ? OLDER BROWSERObject.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(); // trueArray.isArray([‘?’]); // trueArray.isArray(new Array(‘?’)); // true
Browser Support
The support for Array.isArray() is actually pretty good ?
- Browser Support: placeholder-shown
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); // truetypeof 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 Nodedocument.body.appendChild(frameNode); // Append our frame elementconst frameBrowser = window.frames[window.frames.length – 1]; // Access the frame from our current windowframeArray = frameBrowser.Array; // Access the “Array” object of the frame we created// Create a new Array in our frame environmentconst newFrameArray = new frameArray(‘?’, ‘?’, ‘?’);newFrameArray instanceof Array; // ? falseArray.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; // ? falseArray.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
- 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
