Skip to main content

How to Resolve "TypeError: .find is not a function" Error in JavaScript

The TypeError: ... .find is not a function is a common error in JavaScript that occurs when you try to call the Array.prototype.find() method on a value that is not an array. This error is a clear signal that the variable you are working with is not the data type you expected it to be.

This guide will explain the fundamental reason this error happens, walk you through the most common scenarios where it occurs (such as with objects or NodeList collections), and show you how to write "defensive" code to prevent it.

The Core Problem: .find() is an Array Method​

The .find() method is a function that exists exclusively on JavaScript Array objects. Its purpose is to search an array and return the first element that satisfies a provided testing function.

The error is the JavaScript engine telling you, "You asked me to call the .find() function, but the variable you gave me isn't an array, so that function doesn't exist on it."

Example of problem:

// This is an object, not an array.
let notAnArray = { a: 1, b: 2 };

// PROBLEM: Objects do not have a `.find()` method.
notAnArray.find(x => x === 1);

Error Output:

Uncaught TypeError: notAnArray.find is not a function

Cause 1 (Most Common): The Variable is an Object, Not an Array​

This is the most frequent source of the error. You believe you are working with an array, but you actually have an object. This often happens when working with JSON data from an API.

Example of problem:

// This data might come from an API response
let data = {
  users: [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ],
  count: 2,
};

// PROBLEM: `data` is the entire object, not the `users` array.
data.find(user => user.id === 1);

Solution: ensure you access the property that actually contains the array before you call .find().

let data = {
  users: [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ],
  count: 2,
};

// Correct: Access the `users` property, which is the array.
let user = data.users.find(user => user.id === 1);

console.log(user);

Output:

{ id: 1, name: 'Alice' }
note

Always console.log() your data to inspect its structure if you are unsure.

Cause 2: The Variable is null or undefined​

If your variable holds null or undefined, attempting to call any method on it will result in a TypeError. This can happen if a function fails to return an array or a DOM query finds no elements.

Example of problem:

function getItems() {
  // Imagine this function fails and returns null
  return null;
}

let items = getItems(); // `items` is now `null`

// This will throw "TypeError: Cannot read properties of null (reading 'find')"
items.find(item => item > 1);

Cause 3: The Variable is an HTMLCollection​

Older DOM methods like getElementsByClassName() or getElementsByTagName() return a live HTMLCollection, which is an array-like object but does not have the .find() method.

Example of problem:

<div class="item">A</div>
<div class="item">B</div>
// `getElementsByClassName` returns an HTMLCollection.
let items = document.getElementsByClassName('item');

// PROBLEM: `items` does not have a `.find()` method.
items.find(item => item.textContent === 'B');

Error Output:

Uncaught TypeError: items.find is not a function

Solution: you must first convert the HTMLCollection into a true array. The standard way to do this is with Array.from().

let items = document.getElementsByClassName('item');

// Correct: Convert the collection to an array first.
let itemsArray = Array.from(items);

let elementB = itemsArray.find(item => item.textContent === 'B');
console.log(elementB);
note

The more modern querySelectorAll() returns a NodeList, which in modern browsers often has a forEach() method but may not have all array methods. Converting it to an array with Array.from() is also a safe practice.

Solution: How to Prevent the Error​

To write "defensive" code, you should always verify that your variable is an array before calling array-specific methods on it. The Array.isArray() method is the perfect tool for this.

function findFirstEvenNumber(arr) {
  // Add a "guard clause" to check if the input is an array.
  if (!Array.isArray(arr)) {
    console.error('Error: The provided input is not an array.');
    return undefined; // Return a predictable value on failure.
  }
  
  return arr.find(num => num % 2 === 0);
}

// Example Usage:
console.log(findFirstEvenNumber([1, 3, 4, 5])); // Output: 4
console.log(findFirstEvenNumber({a: 1}));       // Output: Error: The provided input is not an array.

Conclusion​

The TypeError: .find is not a function is a clear indicator that you are trying to call an array method on a value of the wrong type.

To solve it, follow this diagnostic checklist:

  1. Inspect the variable: Use console.log() to see what the variable actually contains. Is it an object? null? undefined?
  2. If it's an object, make sure you are accessing the correct property on that object which contains the array.
  3. If it's an HTMLCollection, convert it to an array first with Array.from().
  4. Add a guard clause (if (Array.isArray(myVar))) to your functions to ensure they can handle non-array inputs gracefully.

Table of Contents