Introduction to JavaScript return
In this article, we will see the return statement in JavaScript. The return statement in JavaScript is defined at the end of the function execution, which is used to stop the further execution of the function and return the value through this return statement. In JavaScript, the function explicitly defines the return statement to return the value of the expression in the return statement from a function. There is another situation where if the function return statement is not defined, then the compiler or interpreter will automatically return the value from a function. The value returned by a function is mostly returned to the function caller.
Working of return Statement in JavaScript with Examples
In this section, we will see how the return statement works in JavaScript. The return statement is mostly used in a function to return the value by stopping the execution of a function. If the expression result is not obtained, then undefined is returned by default.
Syntax:
return expression;Example #1
Let us consider a simple example below for a return statement in JavaScript.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions with return statement</h2>
<p>This example calls a function which performs a addition of two numbers, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
var r;
r = arg1 + arg2;
return r;
}
document.getElementById("demo").innerHTML = myFunction(8, 8);
</script>
</body>
</html>Output:
In the above program, we can see that we have a function with the name as “myFunction” where we have passed two arguments as to calculate the addition of these two arguments where we can pass any two numbers to this function, and it returns the addition of these two numbers or arguments. We can see the return statement itself have the expression that does addition such as “arg1+arg2”. In the above code, the value is assigned to a variable “r” using the assignment operator.
(“=”) and this variable stores the result, and the result is returned when this function is called.
Now we will see what will happen if there is no return statement, and we need to explicitly return the value of the given expression where the interpreter will make the function returns undefined.
Example #2
Code:
function func(x) {
let y = x * x;
}
let res = func(2);
console.log(`square result: ${res}`);Output:
In the above program, we can see that the function has no return statement in the function with the name “func”, which is calculating the product of the square of a number. It will not return the value of the expression but will print undefined as there is no return keyword specified before the expression. Therefore the function will return “undefined” instead of returning the exact value of the square of a number.
In this article, we saw that the return statement in JavaScript plays a role as follows:
- In JavaScript, every function defined with no return statement will return “undefined” because when we invoke or call a function, the value is not returned, but “undefined” is returned.
- If the function has a return statement specified, then it will easily return the value of the function which has the return expression.
- In JavaScript, the return statement is mainly used for stopping the execution of the function, where it causes the code to halt the execution of the function.
- The return statement returns a value to the function caller.
- The return statement is used for stopping the function execution immediately, which is mainly used to interrupt the function execution or end the function execution immediately.
- The return statement is used for interrupting loops or functions to end the loop. This return statement is used to interrupt the loop and end the execution in the middle.
Let us see the sample code of a function below for the return statement used for ending the loop.
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which interrupts the loop using return statement</p>
<p id="demo"></p>
<script>
function func(){
for(var i = 0; i <= 10; i++){
if(i === 5)
return i;
}
}
document.getElementById("demo").innerHTML = func();
</script>
</body>
</html>Output:
In the above program, we can see we have a function defined with the name “func” where we have created a for loop to print the value where the return statement will return the value, but in the function, it will stop at 5, and therefore the return statement will stop the for a loop at 5 though it can traverse up to 10.
- The return statement follows ASI (Automatic Semicolon Insertion), this means if the return statement is allowed for no line terminator between return statement and expression.
Such as:
return
arg1 + arg2;
The above code is transformed by ASI as below:
return;
arg1 + arg2;
But the above statement will give you the warning as unreachable code after the return statement.
Therefore to avoid this warning, we must use parenthesis (); this can be demonstrated as below:
return (
arg1 + arg2
);
So the above return statement using parenthesis can make us free from the warning that is obtained from ASI. So this way, it is easy and must for returning the value.
Conclusion
In this article, we conclude that the return statement in JavaScript plays various roles, as we saw in the above section. In this article, we saw how the return statement is used to stop the execution of the function in the code defined. The return statement stops the execution and returns the value of the function called having an argument or code in the function to return any value. In this article, we also saw what will happen if the return keyword is not used in the function, but you are trying to return value instead; it will return undefined.