Complete Guide: Check if Variable is Array in JS

The most reliable way to check if a variable is an array in JavaScript is to use the Array.isArray() method, which was introduced in ES5. This method works consistently across different contexts and realms, making it superior to alternatives like instanceof Array which can fail in cross-window scenarios. For your use case of handling both single strings and arrays, you can use Array.isArray() to determine the input type and then convert strings to single-element arrays using Array.from() or by wrapping the string in brackets.

Contents

• Understanding Array Detection Methods
• Comparing Array.isArray() vs instanceof
• Building a Robust Input Handler Function
• Alternative Array Detection Techniques
• Handling Cross-Browser Compatibility
• Practical Examples and Best Practices

Understanding Array Detection Methods

In JavaScript, there are several approaches to determine if a variable is an array, each with different characteristics and use cases. The most modern and reliable method is Array.isArray(), which was introduced in ECMAScript 5 (ES5).

Array.isArray() is a static method that returns true if the passed value is an array and false otherwise. This method is specifically designed for array detection and handles edge cases properly.

const myArray = [1, 2, 3];
const myString = "hello";

console.log(Array.isArray(myArray)); // true
console.log(Array.isArray(myString)); // false
console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false

This method works correctly with various array types including empty arrays, arrays with elements, and even arrays created in different contexts.

Comparing Array.isArray() vs instanceof

While Array.isArray() is the recommended approach, it’s important to understand how it differs from the instanceof operator.

Array.isArray() Advantages:

• Works correctly across different realms/windows/iframes
• More reliable in complex inheritance scenarios
• Explicitly designed for array detection
• Cannot be overridden or changed by user code

instanceof Array Issues:

// Cross-realm problem
const iframe = document.createElement('iframe');
const iframeArray = iframe.contentWindow.Array;
const arr = new iframeArray();

console.log(arr instanceof Array); // false (fails across realms)
console.log(Array.isArray(arr)); // true (works correctly)

As the Mozilla Developer Network explains, Array.isArray() is preferred over instanceof because it works across realms. The instanceof operator only checks if Array.prototype is on an object’s [[Prototype]] chain, which can fail in cross-window scenarios.

Building a Robust Input Handler Function

For your specific use case of handling both strings and arrays, here’s a comprehensive approach:

function ensureArray(input) {
    if (Array.isArray(input)) {
        return input; // Already an array, return as-is
    } else if (typeof input === 'string') {
        return [input]; // Convert string to single-element array
    } else {
        throw new TypeError('Input must be a string or array');
    }
}

// Usage examples
const stringInput = "hello";
const arrayInput = ["world", "javascript"];

console.log(ensureArray(stringInput)); // ["hello"]
console.log(ensureArray(arrayInput)); // ["world", "javascript"]

// Now you can safely iterate
ensureArray(stringInput).forEach(item => {
    console.log(item); // "hello"
});

This function uses Array.isArray() to detect arrays and then handles string conversion appropriately. The Array.from() method can also be used for more complex conversions:

function ensureArrayAdvanced(input) {
    if (Array.isArray(input)) {
        return input;
    } else if (typeof input === 'string') {
        return Array.from(input); // Creates array of characters
        // OR: return [input]; // Creates single-element array
    } else {
        return [input.toString()]; // Convert other types to string
    }
}

Alternative Array Detection Techniques

While Array.isArray() is the recommended approach, there are other methods you might encounter in older codebases or specific scenarios:

Constructor Property Check

function isArray(value) {
    return value && typeof value === 'object' && value.constructor === Array;
}

This method checks if the constructor property of the object is Array, but it can be fooled if someone changes the constructor property or uses inheritance.

Object.prototype.toString.call()

function isArray(value) {
    return Object.prototype.toString.call(value) === '[object Array]';
}

This method is more reliable than constructor checking but is more verbose than Array.isArray().

instanceof Operator

function isArray(value) {
    return value instanceof Array;
}

This was the standard approach before ES5 but has the cross-realm limitations mentioned earlier.

Handling Cross-Browser Compatibility

If you need to support older browsers that don’t have Array.isArray() (pre-ES5), you can provide a polyfill:

// Polyfill for Array.isArray()
if (!Array.isArray) {
    Array.isArray = function(arg) {
        return Object.prototype.toString.call(arg) === '[object Array]';
    };
}

According to Stack Overflow, this polyfill ensures compatibility with older browsers while maintaining the same functionality as the native Array.isArray() method.

Practical Examples and Best Practices

Example 1: Processing User Input

function processUserInput(input) {
    const items = ensureArray(input);
    
    items.forEach((item, index) => {
        console.log(`Processing item ${index + 1}: ${item}`);
        // Your processing logic here
    });
}

processUserInput("single item"); // Handles single string
processUserInput(["item1", "item2"]); // Handles array

Example 2: Flexible Function Parameters

function logMessages(...messages) {
    const messagesArray = Array.isArray(messages[0]) ? messages[0] : messages;
    
    messagesArray.forEach(msg => {
        console.log(msg);
    });
}

logMessages("Hello", "World"); // Works with multiple arguments
logMessages(["Hello", "World"]); // Works with array argument

Example 3: String to Array Conversion

When dealing with string representations of arrays, you can use JSON.parse() after proper formatting:

function parseStringArray(stringArray) {
    try {
        // Handle both ['item1', 'item2'] and ["item1", "item2"] formats
        const cleanString = stringArray.replace(/'/g, '"');
        return JSON.parse(cleanString);
    } catch (e) {
        return [stringArray]; // Fallback to single element
    }
}

console.log(parseStringArray("['item1', 'item2']")); // ["item1", "item2"]
console.log(parseStringArray("single item")); // ["single item"]

As shown in the research findings from GeeksforGeeks, the Array.from() method is particularly useful for converting strings to arrays of characters, while join() and split() methods help with array-to-string conversions.

Conclusion

To effectively check if a variable is an array in JavaScript:

1. Use Array.isArray() as your primary method for reliable array detection
2. Handle both strings and arrays by checking the type and converting strings to single-element arrays
3. Consider cross-browser compatibility by implementing polyfills if needed
4. Use Array.from() or bracket notation for string-to-array conversions
5. Provide clear error handling for unexpected input types

The best approach for your specific use case would be a function that uses Array.isArray() to detect arrays and converts strings to single-element arrays, allowing you to iterate safely over any input. This pattern is robust, readable, and handles the common scenario where you want to process both single strings and arrays of strings uniformly.

Sources

1. Array.isArray() - JavaScript | MDN
2. How do I check if a variable is an array in JavaScript? - Stack Overflow
3. How to Check if a Variable is an Array in JavaScript? - GeeksforGeeks
4. JavaScript - Convert String to Array - GeeksforGeeks
5. Difference between using Array.isArray and instanceof Array - Stack Overflow
6. Determining whether a value is an array - MIT
7. 3 Ways to Detect an Array in JavaScript - Dmitri Pavlutin