Javascript can not find function

JavaScript: Fixing function is not defined error

Sometimes, you may come across JavaScript function is not defined error that looks like the following:

The ReferenceError as in the case above is caused when you call something that’s not defined in JavaScript. Let me show you several things you can do to fix the error.

Make sure the function is defined inside your script

One of the small mistakes that could cause the error is that you haven’t defined the function properly. You need to define the function using either the function keyword:

 Or using the arrow function syntax as follows:

 Please keep in mind that functions defined through function expressions must be defined before the call. Function expressions are functions that you defined through a variable keyword as follows:

 From the example code above, the variable fnAction will be hoisted, but the function declaration is not, so it will be undefined as shown below:

That’s why it’s always better to define the function before calling it.

When you have defined the function, try calling it immediately below the declaration to see if it works:

If it’s running without any error, then you may have several lines of code after the declaration that causes the script to malfunction.

Make sure the entire script has no error

If you’re putting the function into a script and calling it from an HTML tag, you need to make sure that the entire script has no error or the function won’t be loaded.

For example, notice how there is an extra ) right next to getElementById call:

Although there’s no error on the fnAction() code, an error in any part of the script will cause the browser to ignore the rest of that script. You need to fix the error first so the rest of the code can be executed by the browser.

One way to see if you have any error is to run the HTML page and check on the console as follows:

You may find the ReferenceError fixed itself as you fix JavaScript errors from your scripts.

Make sure the script is loaded before the call.

Finally, the function is not defined error can also be caused by calling the function before the script is loaded to the browser. Suppose you have a JavaScript file separated from your HTML file as follows:

 Then you load the script into your HTML file, but you call the fnAction function before you load the script as follows:

 The same also happens when you call it on the tag:

To fix this, you need to call the function below the call:

Those are the three ways you can try to fix function is not defined error in JavaScript.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

TypeError: «x» is not a function

The JavaScript exception «is not a function» occurs when there was an attempt to call a value from a function, but the value is not actually a function.

Message

TypeError: "x" is not a function. (V8-based & Firefox & Safari)

Error type

What went wrong?

It attempted to call a value from a function, but the value is not actually a function. Some code expects you to provide a function, but that didn’t happen.

Maybe there is a typo in the function name? Maybe the object you are calling the method on does not have this function? For example, JavaScript Objects have no map function, but the JavaScript Array object does.

There are many built-in functions in need of a (callback) function. You will have to provide a function in order to have these methods working properly:

Examples

A typo in the function name

In this case, which happens way too often, there is a typo in the method name:

const x = document.getElementByID("foo"); // TypeError: document.getElementByID is not a function 

The correct function name is getElementById :

const x = document.getElementById("foo"); 

Function called on the wrong object

For certain methods, you have to provide a (callback) function and it will work on specific objects only. In this example, Array.prototype.map() is used, which will work with Array objects only.

const obj =  a: 13, b: 37, c: 42 >; obj.map(function (num)  return num * 2; >); // TypeError: obj.map is not a function 

const numbers = [1, 4, 9]; numbers.map(function (num)  return num * 2; >); // [2, 8, 18] 

Function shares a name with a pre-existing property

Sometimes when making a class, you may have a property and a function with the same name. Upon calling the function, the compiler thinks that the function ceases to exist.

function Dog()  this.age = 11; this.color = "black"; this.name = "Ralph"; return this; > Dog.prototype.name = function (name)  this.name = name; return this; >; const myNewDog = new Dog(); myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function 

Use a different property name instead:

function Dog()  this.age = 11; this.color = "black"; this.dogName = "Ralph"; //Using this.dogName instead of .name return this; > Dog.prototype.name = function (name)  this.dogName = name; return this; >; const myNewDog = new Dog(); myNewDog.name("Cassidy"); //Dog 

Using brackets for multiplication

In math, you can write 2 × (3 + 5) as 2*(3 + 5) or just 2(3 + 5).

Using the latter will throw an error:

const sixteen = 2(3 + 5); console.log(`2 x (3 + 5) is $sixteen>`); // Uncaught TypeError: 2 is not a function 

You can correct the code by adding a * operator:

const sixteen = 2 * (3 + 5); console.log(`2 x (3 + 5) is $sixteen>`); // 2 x (3 + 5) is 16 

Import the exported module correctly

Ensure you are importing the module correctly.

An example helpers library ( helpers.js )

const helpers = function () >; helpers.groupBy = function (objectArray, property)  return objectArray.reduce((acc, obj) =>  const key = obj[property]; acc[key] ??= []; acc[key].push(obj); return acc; >, >); >; export default helpers; 

The correct import usage ( App.js ):

import helpers from "./helpers"; 

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Javascript can not find function

Last updated: Dec 30, 2022
Reading time · 2 min

# TypeError: find is not a function in JavaScript [Solved]

The «find is not a function» error occurs when we call the find() method on a value that is not of type array.

To solve the error, convert the value to an array before calling the find method or make sure to only call the method on arrays.

Here is an example of how the error occurs.

Copied! 
const arr = >; // ⛔️ Uncaught TypeError: arr.find is not a function const result = arr.find(num => num % 2 === 0); 

We called the Array.find() method on an object which caused the error.

# Only call the find() method on valid arrays

To solve the error, console.log the value you’re calling the find method on and make sure it’s a valid array.

Copied! 
const arr = [3, 6, 10]; const result = arr.find(num => num % 2 === 0); console.log(result); // 👉️ 6 

If you have an object that has a property with an array value, access the property before calling the Array.find() method.

Copied! 
const obj =  site: ['bobby', 'hadz', 'com'], >; const result = obj.site.find(element =>  return element.includes('bo'); >); console.log(result); // 👉️ bobby 

We have an object that has a site property that is an array. To be able to call the find() method, we accessed the site property and called the method on the array.

# Check if the value is an array before calling find()

Alternatively, you can check if the value is an array by using the Array.isArray method.

Copied! 
const arr = null; const result = Array.isArray(arr) ? arr.find(num => num % 2 === 0) : 0; console.log(result); // 👉️ 0 

We used the ternary operator which is very similar to an if/else statement.

If the value is an array, we return the result of calling the find method, otherwise, we return the number 0 .

This way, you won’t get an error, even if the value is not an array.

You can also use a simple if statement to achieve the same result.

Copied! 
const arr = null; let result = 0; if (Array.isArray(arr))  result = arr.find(num => num % 2 === 0); > console.log(result); // 👉️ 0 

If the value is an array, the if block runs where we call the find() method on the array.

If the value is fetched from a remote server, make sure it is of the expected type by logging it to the console.

Ensure you have parsed the value to a native JavaScript array before calling the find method.

# Convert the value to an Array before calling find()

If you have an array-like object, use the Array.from() method to convert it to an array before calling the find() method.

Copied! 
const set = new Set([13, 2, 3]); const result = Array.from(set).find(element => element % 2 === 0); console.log(result); // 👉️ 2 

We used the Array.from method to convert the Set to an array.

You could also use the spread syntax (. ) to achieve the same result.

Copied! 
const set = new Set([13, 2, 3]); const result = [. set].find(element => element % 2 === 0); console.log(result); // 👉️ 2 

If the error persists, console.log the value you’re calling the find method on and make sure it’s an array.

If the value is an object, you should probably be accessing a specific property on the object that has an array value.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник