Skip to main content

How to Solve the "TypeError: .includes is not a function" in JavaScript

The TypeError: ... .includes is not a function is a common error in JavaScript that occurs when you try to call the .includes() method on a value that is not an Array or a String. 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, and show you how to write "defensive" code to prevent it.

The Core Problem: .includes() Belongs to Arrays and Strings​

The .includes() method is a function that exists exclusively on two of JavaScript's built-in types:

  • Array.prototype.includes(): Checks if an array contains a specific element.
  • String.prototype.includes(): Checks if a string contains a specific substring.

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

Example of problem:

// This is a number, not an array or a string.
let notAnArrayOrString = 123;

// PROBLEM: Numbers do not have an `.includes()` method.
notAnArrayOrString.includes(2);

Error Output:

Uncaught TypeError: notAnArrayOrString.includes is not a function

Cause 1: The Variable is Not a String (e.g., a Number)​

This often happens when you have a number and want to check if it contains a certain digit. You cannot call .includes() directly on a number.

Example of problem:

let myNumber = 12345;

// PROBLEM: `myNumber` is a number, not a string.
if (myNumber.includes('3')) {
  console.log('The number contains the digit 3.');
}

Solution: you must first convert the number to a string before you can search within it.

let myNumber = 12345;

// Correct: Convert the number to a string first.
let myString = String(myNumber);

if (myString.includes('3')) {
  console.log('The number contains the digit 3.'); // This will run.
}

Cause 2: The Variable is Not an Array (e.g., an Object, null, or HTMLCollection)​

This is another frequent cause. You believe you are working with an array, but you actually have a different type of object, or null.

A) The Variable is an Object​

This is common when working with JSON data. You might have an object that contains an array, but you are calling .includes() on the object itself.

let data = { items: ['apple', 'banana'] };

// PROBLEM: `data` is the object, not the `items` array.
data.includes('apple');         // This will throw the error.

// SOLUTION: Access the property that holds the array.
data.items.includes('apple');   // This works.

B) The Variable is null or undefined​

If a function or API call fails to return an array, it might return null or undefined.

let items = null;

// This will throw "TypeError: Cannot read properties of null (reading 'includes')"
items.includes('apple');

C) The Variable is an HTMLCollection​

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

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

// PROBLEM: `items` is an HTMLCollection, not an array.
items.includes(someElement);                // This will throw the error.

// SOLUTION: Convert it to an array first.
Array.from(items).includes(someElement);    // This works.

Solution: How to Prevent the Error​

To write "defensive" code, you should always verify that your variable is the correct type before calling a type-specific method on it.

Solution: use Array.isArray() to check for arrays and typeof to check for strings.

function safelyCheckInclusion(collection, item) {
  // Guard Clause 1: Check if it's an array.
  if (Array.isArray(collection)) {
    return collection.includes(item);
  }
  
  // Guard Clause 2: Check if it's a string.
  if (typeof collection === 'string') {
    return collection.includes(item);
  }
  
  // If it's neither, return false and log an error.
  console.error('Error: The provided collection is not an Array or a String.');
  return false;
}

// Example Usage:
console.log(safelyCheckInclusion(['a', 'b'], 'b'));  // Output: true
console.log(safelyCheckInclusion('hello', 'ell'));   // Output: true
console.log(safelyCheckInclusion(123, '2'));         // Output: Error: ... and false
console.log(safelyCheckInclusion({a: 1}, 'a'));      // Output: Error: ... and false

Conclusion​

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

To solve it, follow this diagnostic checklist:

  1. Inspect the variable: Use console.log(myVar) to see what the variable actually is. Is it an object? A number? null?
  2. Correct the variable type:
    • If it's a number, convert it to a string: String(myVar).
    • If it's an object, access the correct property that holds the array: myVar.items.
    • If it's an HTMLCollection, convert it to an array: Array.from(myVar).
  3. Add a guard clause (if (Array.isArray(myVar)) or if (typeof myVar === 'string')) to your functions to handle incorrect data types gracefully.

Table of Contents