The Pitfalls of `typeof` Operator in JavaScript Static Analysis

While developing a traversal algorithm for a Parsing Expression Grammar (PEG)-generated Abstract Syntax Tree (AST), I encountered unexpected complexities stemming from JavaScript's quirks with object type-checking. Contrary to my initial assumptions, the typeof operator proved unreliable —arrays were incorrectly identified as plain objects, and null values introduced logical errors, ultimately causing my traversal algorithm to fail catastrophically.

⚠️ Problem: Iterating an Object as an Array

In JavaScript, typeof is an operator used to determine the type of a given value. It returns a string representing the value's type. Syntax

typeof value

A common mistake arises when using typeof node.children === 'object'. This check does not distinguish between arrays and plain objects. If node.children is a plain object rather than an array, attempting to iterate over it using .forEach will throw an error, as plain objects lack the .forEach method.

Example:

// Plain object
const personObject = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};
console.log(typeof personObject); // "object"

// Array
const personArray = ['John', 30, 'Developer'];
console.log(typeof personArray); // "object"

In both cases, typeof returns "object", misleadingly suggesting that both can be traversed the same way. When inspecting raw code, it's easy to distinguish between objects and arrays. However, during static code analysis (such as when traversing an AST), the distinction is far less obvious.

Traversal Example:

// Traversing an object
for (const key in personObject) {
  console.log(`${key}: ${personObject[key]}`);
}

// Traversing an array
personArray.forEach(value => {
  console.log(value);
});

Since arrays are a specialized form of objects, typeof arr returns "object", masking their true nature.

🔍 Example: Misled by typeof

Consider the following pseudo-AST for the HTML snippet:

<h2>Hello World</h2>

Here's how the AST might look, with an unintended plain object instead of an array for children:

{
  "type": "Element",
  "name": "h2",
  "attributes": [],
  "children": {  
    "child1": {
      "type": "Text",
      "raw": "Hello",
      "data": "Hello"
    },
    "child2": {
      "type": "Text",
      "raw": "World",
      "data": "World"
    }
  }
}

❌ Flawed Code Using typeof

Now, let’s see how the typeof check can lead to an error:

function traverseAST(node) {
  if (typeof node.children === 'object') {
    // This check passes, but it doesn't confirm if children is an array.
    node.children.forEach(child => traverseAST(child)); // 💥 Error!
  }
}

const ast = {
  type: "Element",
  name: "h2",
  attributes: [],
  children: {
    child1: { type: "Text", raw: "Hello", data: "Hello" },
    child2: { type: "Text", raw: "World", data: "World" }
  }
};

traverseAST(ast);

🚨 Result: Runtime Error

Running the code results in the following error:

TypeError: node.children.forEach is not a function

This occurs because node.children is a plain object, not an array. The typeof check falsely indicated it was safe to iterate using .forEach.

✅ Solution: Use Array.isArray

To avoid this issue, we should use Array.isArray to explicitly check if node.children is an array before iterating over it.

Code Using Array.isArray

function traverseAST(node) {
  if (Array.isArray(node.children)) {
    // Now we know it's an array and can safely iterate over it.
    node.children.forEach(child => traverseAST(child));
  } else if (typeof node.children === 'object' && node.children !== null) {
    // Handle plain objects (if needed)
    console.warn("Expected 'children' to be an array, but found a plain object.");
    for (const key in node.children) {
      traverseAST(node.children[key]);
    }
  }
}

const ast = {
  type: "Element",
  name: "h2",
  attributes: [],
  children: {
    child1: { type: "Text", raw: "Hello", data: "Hello" },
    child2: { type: "Text", raw: "World", data: "World" }
  }
};

traverseAST(ast);

Result: No Errors

• The code first checks if node.children is an array using Array.isArray.

• If it’s not an array, it falls back to handling it as a plain object (if necessary).

• This prevents runtime errors and ensures the code behaves as expected.

The order of checks matters significantly when dealing with type checking in JavaScript. If you check typeof node === 'object' before Array.isArray(node), you risk misclassifying arrays as plain objects, which can lead to the same issues we’re trying to avoid.

Why Order Matters Problem: Checking typeof Before Array.isArray

If you write your code like this:

if (typeof node === 'object') { // This condition is true for both arrays and plain objects. if (Array.isArray(node)) { // Handle arrays } else { // Handle plain objects } }

While this might seem logical, it’s inefficient and can lead to subtle bugs if the logic isn’t carefully structured. For example:

If node is null, typeof node === 'object' is true, but Array.isArray(node) is false.

If node is an array, typeof node === 'object' is true, but you’re still performing an unnecessary typeof check.

Correct Approach: Prioritize Array.isArray

Always check Array.isArray first, as it explicitly identifies arrays. This avoids the ambiguity of typeof and ensures arrays are handled correctly:

if (Array.isArray(node)) { // Handle arrays } else if (typeof node === 'object' && node !== null) { // Handle plain objects (excluding null) }

Why This Order Works

Arrays Are Objects: In JavaScript, arrays are a type of object (typeof [] === 'object'). Checking Array.isArray first ensures arrays are handled before treating anything as a plain object.

Avoiding null Pitfalls: typeof null === 'object', but null is not iterable. Adding && node !== null excludes null from plain object checks.

Performance: Array.isArray is a direct, efficient check—faster than using typeof followed by Array.isArray.

Example: Correct Order of Checks

function traverseAST(node) {
  // Handle arrays first
  if (Array.isArray(node)) {
    node.forEach(child => traverseAST(child));
    return;
  }

  // Handle plain objects (excluding null)
  if (typeof node === 'object' && node !== null) {
    // Process the current node
    if (node.type === 'Element' && node.name === 'h2') {
      console.log(`Found h2 element with attributes:`, node.attributes);
    }

    // Safely traverse children
    if (Array.isArray(node.children)) {
      node.children.forEach(child => traverseAST(child));
    } else if (typeof node.children === 'object' && node.children !== null) {
      // Handle plain objects (if needed)
      console.warn("Expected 'children' to be an array, but found a plain object.");
      for (const key in node.children) {
        traverseAST(node.children[key]);
      }
    }
  }
}

Key Takeaways

• Always Check Array.isArray First:

  • Arrays are objects, so typeof node === 'object' returns true for arrays.

  • Using Array.isArray(node) ensures correct handling.

• Exclude null Explicitly:

  • typeof null === 'object but null is not iterable.

  • Always add && node !== null when checking for plain objects.

• Performance and Clarity:

  • Prioritizing Array.isArray improves efficiency and readability.

Real-World Implications

In static analysis tools, accurate type checks are crucial:

• Inefficient typeof checks can slow down AST traversal.

• Misclassifying arrays as objects leads to runtime errors and faulty transformations.

Prioritizing Array.isArray ensures robust, high-performance tools.

Best Practices

1. Check Arrays First: Use Array.isArray(node) before other checks.

2. Handle Objects Properly: Use typeof node === 'object' && node !== null.

3. Exclude null: Always check && node !== null.

4. Use typeof for primitive types like string, number, and boolean.

5. Avoid Redundancy: Skip typeof when using Array.isArray.

Conclusion

Type-checking order is key to writing robust JavaScript. Prioritize Array.isArray to handle arrays correctly, avoid treating null as an object, and ensure efficient AST traversal. This approach enhances both accuracy and performance, especially in static analysis.