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:
Code
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());
Output
Return Example Body of my function 1
What is Undefined in JavaScript?
In JavaScript, undefined can be any of the following:
- value
- data type
- property
- global variable
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.
Let a = undefined;
If we perform any arithmetic operation with an undefined value, it will return NaN(Not a Number). e.g.
console.log(5+undefined);
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
- A function doesn’t return any value.
- A function doesn’t have a return statement.
- 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:
Code
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());
Output
Case 1 Example Body of my function undefined
Solution
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.
Code
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);
Output
Example of case 2 Body of my function The value of a is: undefined
Solution
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.
Code
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());
Output
Example of case 3 Sum is undefined
Solution
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:
Code
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));
Output
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:
- What is a return statement?
- What is undefined in JavaScrip?
- What does a function return if it does not return any value, and what is its solution?
- What does a function return if it doesn’t have a return statement, and what is its solution?
- 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.
Happy Coding!
