The return statement serves the purpose of sending a specific value back from a function to the caller of that function. Upon the invocation of the return statement, the function ceases execution. It is advisable for the return statement to be positioned as the final statement within a function, as any code placed after the return statement will not be reachable.
We can utilize the return statement to yield primitive values, including Boolean, number, string, and more, as well as Object types, which encompass functions, objects, arrays, and similar constructs.
It is also possible to return several values utilizing the return statement. However, this cannot be accomplished directly. Instead, we need to employ either an Array or an Object to return multiple values from a function.
Syntax
return expression;
The expression provided in the syntax above indicates the value that is sent back to the caller of the function. This is not mandatory. In cases where the expression is omitted, the function will yield an undefined value.
Inserting a line terminator between the return keyword and its corresponding value is prohibited. This can be illustrated with the following examples. Consider the scenario where we formulate the return statement in the following manner:
return
x + y;
Then, it will be transformed into -
return;
x + y;
The semicolon is automatically inserted following the return statement. Any code that appears after the return statement, such as ( x + y; ), will be treated as unreachable code.
Utilizing parentheses can help us avoid this issue. It can be expressed as -
return (
x + y;
);
Next, let's explore a few instances of implementing the return statement in JavaScript.
Example1
This is a straightforward illustration of utilizing the return statement. In this case, we are providing the outcome of the multiplication of two numbers and sending that value back to the function's caller.
The variable res serves as the caller of the function; it invokes the function fun while supplying two integers as its arguments. The outcome of this function call will be assigned to the res variable. In the resulting output, the value 360 represents the product of the arguments 12 and 30.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Welcome to the logic-practice.com </h2>
<h3> Example of the JavaScript's return statement </h3>
<script>
var res = fun(12, 30);
function fun(x, y)
{
return x * y;
}
document.write(res);
</script>
</body>
</html>
Output
Upon executing the code provided above, the resulting output is -
Example2
In this instance, we are halting a function's execution by utilizing the return statement. The function ceases to operate instantly upon the invocation of the return statement.
An infinite while loop is set up, with the variable i starting at 1. This loop persists until the value of i increments to 4. Once i equals 4, the loop ceases execution due to the return statement. Consequently, any code following the loop will not be executed.
In this instance, the return statement is utilized without an accompanying expression, resulting in an undefined value being returned.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Welcome to the logic-practice.com </h2>
<h3> Example of the JavaScript's return statement </h3>
<script>
var x = fun();
function fun() {
var i = 1;
while(i) {
document.write(i + '<br>');
if (i == 4) {
return;
}
document.write(i + '<br>');
i++;
}
document.write('Hello world');
}
</script>
</body>
</html>
Output
Upon executing the code provided above, the resulting output will be -
Next, we will explore the method of returning multiple values through the return statement. Typically, functions in JavaScript yield a single value; however, it is possible to return several values by utilizing an array or an object. To achieve this, we can encapsulate the values as properties of an object or as elements within an array.
Example3 - Returning multiple values using Array
In this illustration, we are retrieving several values through the use of an Array. In this case, we are employing the ES6 Array destructuring technique to extract the elements from the array.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript return </title>
</head>
<body>
<h1> Welcome to the logic-practice.com </h1>
<h3> This is an example of returning multiple values using array </h3>
<script>
function getData() {
let fname = 'John',
lname = 'Rickman',
age = '25',
occupation = 'Private Employee';
return [fname, lname, age, occupation];
}
const [fname, lname, age, occupation] = getData();
document.write("Name = " + fname + " " + lname + "<br>");
document.write("Age = " + age + "<br>");
document.write("Occupation = " + occupation);
</script>
</body>
</html>
Output
Example4 - Returning multiple values using object
In this illustration, we are retrieving several values through the use of an Object. In this case, we are employing the ES6 Object destructuring syntax to extract the values from the object.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript return </title>
</head>
<body>
<h1> Welcome to the logic-practice.com </h1>
<h3> This is an example of returning multiple values using object </h3>
<script>
function getData() {
let fname = 'John',
lname = 'Rickman',
age = '25',
occupation = 'Private Employee';
return {
fname,
lname,
age,
occupation
};
}
let {fname, lname, age, occupation} = getData();
document.write("Name = " + fname + " " + lname + "<br>");
document.write("Age = " + age + "<br>");
document.write("Occupation = " + occupation);
</script>
</body>
</html>
Output