Function name is undefined in javascript

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:

Источник

How to Fix JavaScript Function Returns Undefined Instead of Value?

You know functions are one the most useful and important concepts of object-oriented programming languages, but when a JavaScript (JS) function returns undefined instead of the value, it can be a headache specifically for fresh JavaScript developers. So let’s see how to fix it in this article 👇, make sure to keep reading to avoid the headache.

A Function returns undefined when it returns nothing. In JavaScript, Undefined is a value as well as a data type. Every variable in JavaScript is undefined as its initial value.

In this write-up, we’ll discuss in detail what is undefined and what is a return statement; further, we see different cases when a function returns undefined instead of value along with practical examples. Before we start our topic, first let’s understand the return statement and undefined in JavaScript.

Table of Contents

What is a Return Statement in JavaScript?

A return statement is used to stop the execution of a function and return to the place from where it is called. We usually write a return statement at the end of the function. We can write more than one return statement in a function, but the first one will always be executed first. To understand the return statement , let’s see an example:

console.log("Return Example"); // define a function name myfunction function myFunction() < console.log("Body of my function"); // this function return 1 return 1; >// print return value on screen console.log(myFunction());

Return Example Body of my function 1

What is Undefined in JavaScript?

In JavaScript, undefined can be any of the following:

Undefined is a primitive data type of JavaScript. When a variable is not initialized, it is of an undefined type with an undefined initial value. Every function which doesn’t return any value always returns undefined . A global object has an undefined property, and undefined is a variable with a global scope.

We can also explicitly assign a variable with an undefined value. e.g.

If we perform any arithmetic operation with an undefined value, it will return NaN (Not a Number). e.g.

This line gives output NaN because we sum a constant with undefined .

Different Reasons Why a Function Returns Undefined Instead of Value in JavaScript?

There are three reasons that a function returns undefined

1. A function doesn’t return any value.
2. A function doesn’t have a return statement.
3. A function returns a variable that is not initialized.

Now discuss all these cases one by one and also illustrate their solutions.

Case 1: Function Doesn’t Return any Value

When our function doesn’t return any value, we write return without writing any value or variable after it then it will return undefined . You can easily understand the situation by executing this example:

console.log("Case 1 Example"); // define a function name myfunction function myFunction() < console.log("Body of my function"); // this function return nothing return; >// print return value on screen console.log(myFunction());

Case 1 Example Body of my function undefined

Always double-check that the value you want to return is written after the return statement; if you forget to write the value, it will return undefined .

Case 2: Function Doesn’t Have Return Statement

In this case, we don’t have the return statement at the end of the function, and we try to store its value in a variable. Now let’s see an example.

console.log("Example of case 2"); // define a function name myfunction function myFunction() < console.log("Body of my function"); // this function doesn't have a return statement >let a = myFunction(); // print return value on screen console.log("The Value of a is:", a);

Example of case 2 Body of my function The value of a is: undefined

This case has a straightforward solution; you must check whether your function has a return statement. If it doesn’t have a return statement, it will return undefined , so we don’t have to call the function when initializing a variable.

Case 3: Function Returns a Variable that is Not Initialized

In this case, our called function returns a variable that does not return any value; we didn’t assign it a proper value or didn’t write the correct name for it.

console.log("Example of case 3"); // define a function name sum which takes two parameters function sum(a, b) < //Function returns a variable that is not initialized yet return a; >// print return value on screen console.log(" Sum is", sum());

Example of case 3 Sum is undefined

In this case, we must ensure initializing variables properly and assign them value if we want our function to return a value. To get rid of undefined from the above example, we have to write it in this way:

console.log("Example of case 3"); // define a function name sum which takes two parameters function sum(a, b) < //Function returns the sum of a and b return a+b; >// print return value on screen console.log("The Sum is:", sum(10, 20));

Example of case 3 The sum is: 30

As we pass arguments to function sum, it initializes a and b and returns the sum of both variables.

Conclusion

To conclude this article on the function returns undefined instead of value, we have discussed undefined and return . We discussed different situations when a function returns undefined instead of value, and at the end of each case, we gave a solution to get rid of undefined.

Here are the topics we have covered in this article:

1. What is a return statement?
2. What is undefined in JavaScrip?
3. What does a function return if it does not return any value, and what is its solution?
4. What does a function return if it doesn’t have a return statement, and what is its solution?
5. What does a function return if it returns a variable that is not initialized, and what is its solution?

If you find this article helpful, share it with your coding mates 👫 and let us know in the comment section below which case helps you most to understand this article.

Источник