How to solve TypeError: contains is not a function in JavaScript

TypeError: contains is not a function in JavaScript

TypeError: contains is not a function in JavaScript is a common error you often encounter when working with arrays in JavaScript. Our explanations below will help you solve this error. Let’s read this article now.

Why does the TypeError: contains is not a function in JavaScript happen?

contains() is a method that returns whether a node is a descendant of a node. This is different from checking if an array contains a specific value. For instance:

console.log(document.contains(document.body));

Output:

True

If you apply the method on an array, you will get the error:

console.log([0, 1, 2, 3].contains(2));

Output:

Furthermore, it may happen when you have defined a new class (new type) and called the method contains on its object but have not declared the prototype yet:

// Create a new class Dog
class Dog {
	bark() {
		console.log("Bark");
	}
}

// Create a new dog object
let myDog = new Dog();

// Call the method contains on Dog but not defined yet
console.log(myDog.contains());

Output:

Uncaught TypeError: myDog.contains is not a function

To solve the error, we recommend the following solutions.

How to solve the error?

Use includes() instead

If you are working with an array, a string, or an HTML collection, you should not use the method contains() because, as explained, it is used for an HTML Node only. So you must use another method such as includes() or indexOf():

console.log([0, 1, 2, 3].includes(2));

Output:

true

Another example:

console.log("LearnShareIT".includes("IT"));

Output:

true

Also make sure you have checked the type of the object you are calling the method because if it is not an array or a string or an HTML collection, the same error will be returned. For example, calling the method on a true boolean literal:

console.log(true.includes("IT"));

Output:

Uncaught TypeError: true.includes is not a function

Use has() instead

If you are working with a map or a set, you should not use the method contains() or includes, but you must use the has() method to check if it contains a value.

console.log(new Set([1, 2, 3]).has(2));

Output:

true

Another example:

console.log(new Map().has(2));

Output:

false

If you are sure that you are working with a node and contains() is the exact method you want to use, then please read the next solution.

Make sure it is an element

As we have explained, this error will happen if you don’t use it on an object of Node type or an HTML element. You must make sure this is an element because if not, the error will be raised:

// Get the body of the document using getElementsByTagName
let body = document.getElementsByTagName("body");

// Get the type of the body variable
console.log(body.constructor.name);

// Check if the body contains something
console.log(body.contains(123));

Output:

HTMLCollection
Uncaught TypeError: body.contains is not a function

As can be seen, what we received from the method getElementsByTagName is an HTML Collection, not an element as expected. Therefore, you should get an element in this collection and apply the method instead of applying them to the collection:

// Get the body of the document using getElementsByTagName
let body = document.getElementsByTagName("body")[0];

// Get the type of the body variable
console.log(body.constructor.name);

// Check if the body contains something
console.log(body.contains(body));

Output:

HTMLBodyElement
false

In the above example, we get the first element in the array (index 0) and check its type using the constructor.name the property. After that, we check if that element contains itself using contains() method, the result will be false, and there will be no more errors.

Define the method in the class

If you have defined a new type in your program, please check if the method has been declared in your class yet. Also, make sure you have looked at the correct class instead of misleading others:

// Create a new class Dog
class Dog {
	contains() {
		console.log("LearnShareIT");
	}
}

// Create a new class Cat
class Cat {
	eat() {
		console.log("Eat");
	}
}

// Create a new dog object
let myDog = new Dog();

// Call the method contains on Dog
console.log(myDog.contains());

// Call the method contains on Cat
console.log(new Cat().contains());

Output

LearnShareIT
undefined
Uncaught TypeError: (intermediate value).contains is not a function

As you can see, we have defined the method contains() inside the class “Dog” but not the class “Cat”. So when we create a new object of the class “Dog” and call the method contains, it works and yeild “LearnShareIT”. But, if we have an object of class “Cat” and call the method, it returns an error. So you should make sure the object is of type Dog or Cat and you have declared whether the method contains() inside the class or not.

Summary

We have discovered many approaches to fix the JavaScript TypeError: contains is not a function in JavaScript. We suggest you check the type of the element and make sure to use the includes() method on an array, a string, or an HTML collection.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *