This article provides a comprehensive overview of the return statement in JavaScript. The return statement is positioned after a function's execution and serves to terminate any additional processing within that function while yielding a designated value. In JavaScript, it is essential for a function to explicitly incorporate a return statement in order to transmit the value of the expression it contains. Moreover, if a return statement is omitted from the code, the compiler or interpreter will automatically return a value from the function. Typically, this returned value is sent back to the entity that called the function.
Functions have the capability to yield values in two distinct formats:
- Primitive data types (including numbers, booleans, etc.)
- Reference types (which encompass arrays, objects, functions, etc.)
Syntax
return (expression);
In this context, (expression) is:
- Optional
- It is the value the function is going to send back
- In case an expression in the return statement is left empty, then this function returns undefined.
Automatic Semicolon Insertion (ASI)
This adheres to the principle of Automatic Semicolon Insertion, often abbreviated as ASI. This means that there is an absence of a line terminator between the return statement and the associated expression it could potentially reference. However, if the return statement is defined in the following manner:
If the return statement is articulated in the subsequent way:
return
num1 - num2;
It can be restructured through Automatic Semicolon Insertion (ASI) as follows:
return;
num1 - num2;
This will generate a warning that signals the presence of unreachable code following the return statement.
To address the issue and prevent Automatic Semicolon Insertion (ASI), it is essential that the expression succeeding the return statement is enclosed within parentheses:
return(
num1 - num2
);
Functionality of the return statement in JavaScript with illustrations
This article aims to examine the functionality of return statements in JavaScript. Primarily, a return statement is utilized within a function to yield a value and terminate the execution of that function. If an expression does not resolve to a specific value, it will, by default, return undefined.
Below is a straightforward illustration demonstrating the utilization of a return statement in JavaScript:
Illustration: Create a function that calculates and returns the area of a triangle.
function getTriArea(base, height) {
// Function to get the area of the triangle
if (base > 0 && height > 0) { // condition to check if the base and height is greater than 0
return 0.5*base*height
}
return 0
}
console.log(getTriArea(4,5))
Output
Example 1
In the following section, we will explore a simple example of a return statement within the JavaScript programming language.
<!DOCTYPE html>
<html>
<body>
<h2>Example of JavaScript Functions with return statement</h2>
<p>This instance invokes a function that executes the addition of two numbers and subsequently returns the outcome:</p>
<p id="example"></p>
<script>
function myFunction(a1, a2) {
var r;
result = a1 + a2;
return result;
}
document.getElementById("example").innerHTML = myFunction(6, 8);
</script>
</body>
</html>
Output
Within the previously discussed program, there exists a function titled "myFunction" that accepts two parameters and produces their sum as the output. This function is designed to handle any two numerical input values, consequently yielding the sum of these inputs. The return statement features the expression "a1 + a2," which executes the addition operation. Moreover, the outcome of this calculation is designated to a variable named "result" through the use of the assignment operator ("="). This computed value is subsequently held in the variable and is displayed each time the function is invoked.
Now, let us examine a scenario that illustrates the consequences of omitting the return statement entirely. In this instance, it is crucial to ensure that we explicitly return the outcome of the expression; if we fail to do so, the interpreter will simply display an undefined result from the function.
Example 2
function template(x) {
let y = x * x;
}
let out = template(2);
console.log(`result: ${out}`);
Output
In the function illustrated above, a return statement is absent during the calculation of the square of a number multiplied by its product, as the function is declared as a template. This indicates that there will be no return keyword preceding the expression, resulting in the output of that expression being "undefined". As a result, when attempting to calculate and display the square of a number, it will output "undefined" rather than providing the accurate square value of that number.
This document has detailed the application of the return statement in JavaScript in the following manner:
Here is an illustration of a function that showcases how to utilize the return statement to exit from a loop.
Example 3
<!DOCTYPE html>
<html>
<body>
<p>This instance invokes a function that terminates the loop through the use of a return statement.</p>
<p id="main"></p>
<script>
function example(){
for(var i = 0; i <= 10; i++){
if(i === 6)
return i;
}
}
document.getElementById("main").innerHTML = example();
</script>
</body>
</html>
Output
In the preceding section, the function named "example" has been established, which incorporates a for loop intended to output several values. However, the presence of the return statement within the function will terminate the loop upon encountering the value of 5, even though the loop has the potential to iterate up to 10.
Conclusion
In the section above, it is shown that the return statement in JavaScript has several different functions.
- We reviewed how the return statement causes execution to terminate at a defined function in the program. That is, at the return statement, the execution would stop and pass the value obtained from the function call that includes an argument or code whose expected result should give a value.
- We talked about what happens when we forget to use the return keyword in a function and try to return a value; in such cases, the function will return undefined.
- Automatic Semicolon Insertion (ASI) affects the return statement by suggesting that no line terminator should be placed between the return keyword and the expression.