To check if an object is an array in JavaScript, you need a reliable method due to JavaScript’s dynamic typing and the limitations of certain operators like typeof
. Below is a detailed guide covering modern practices, legacy fallbacks, and common pitfalls, along with examples.
1. The Modern and Recommended Method: Array.isArray()
Array.isArray(value)
is the most reliable and standardized way to check if a value is an array.
Supported in: All modern browsers (ES5+) and Node.js.
Examples:
// Basic check
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray([])); // true
// Non-array objects
console.log(Array.isArray({})); // false
console.log(Array.isArray("array")); // false
console.log(Array.isArray(null)); // false
// Edge cases
console.log(Array.isArray(new Array())); // true
console.log(Array.isArray(Array.prototype)); // true (arrays are objects)
Why Array.isArray()
?
- Accuracy: Works even for arrays created in different execution contexts (e.g., iframes).
- Performance: Optimized for speed in modern engines.
- Safety: Not fooled by modified prototypes or constructor properties.
2. Legacy Fallback for Older Browsers (Pre-ES5)
For environments that don’t support Array.isArray()
(e.g., IE8), use Object.prototype.toString
:
function isArray(value) {
return Object.prototype.toString.call(value) === '[object Array]';
}
// Tests
console.log(isArray([])); // true
console.log(isArray({})); // false
console.log(isArray(document.body.children)); // false (HTMLCollection)
How It Works:
The toString
method returns a string like [object Type]
, where Type
is the internal class of the object. For arrays, this is [object Array]
.
3. Unreliable Methods to Avoid
typeof
Operator
Fails because arrays are objects:
console.log(typeof []); // "object" ❌
console.log(typeof {}); // "object" (same as arrays)
instanceof Array
Fails for arrays across different execution contexts (e.g., iframes):
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const frameArray = iframe.contentWindow.Array;
const arr = new frameArray(1, 2, 3);
console.log(arr instanceof Array); // false ❌
console.log(Array.isArray(arr)); // true ✅
constructor
Property Check
Fails if the constructor
property is overwritten:
const arr = [1, 2, 3];
arr.constructor = Object; // Tampering
console.log(arr.constructor === Array); // false ❌
console.log(Array.isArray(arr)); // true ✅
4. Edge Cases and Common Confusions
Array-Like Objects
Some objects mimic arrays (e.g., arguments
, NodeList
, HTMLCollection
), but they are not arrays:
function test() {
console.log(Array.isArray(arguments)); // false
}
test(1, 2, 3);
console.log(Array.isArray(document.querySelectorAll('div'))); // false
Fake Arrays
Objects with numeric keys and a length
property are not arrays:
const fakeArray = { 0: "a", 1: "b", length: 2 };
console.log(Array.isArray(fakeArray)); // false
5. Summary Table
Method | Works for Cross-Context Arrays? | Tamper-Proof? | Performance | Use Case |
---|---|---|---|---|
Array.isArray() | Yes ✅ | Yes ✅ | Fast 🚀 | Modern browsers (ES5+) |
Object.prototype.toString | Yes ✅ | Yes ✅ | Fast 🚀 | Legacy browsers (Pre-ES5) |
instanceof Array | No ❌ | No ❌ | Fast 🚀 | Avoid |
constructor Check | No ❌ | No ❌ | Fast 🚀 | Avoid |
Conclusion
- Use
Array.isArray()
in modern code. - Fallback to
Object.prototype.toString
for legacy environments. - Avoid
typeof
/instanceof
/constructor
due to edge cases and unreliability.
This ensures accurate and future-proof checks for arrays in JavaScript.