The return statement is used to return a particular value from the function to the function caller. The function will stop executing when the return statement is called. The return statement should be the last statement in a function because the code after the return statement will be unreachable.
We can return primitive values (such as Boolean, number, string, etc.) and Object types (such as functions, objects, arrays, etc.) by using the return statement.
We can also return multiple values using the return statement. It cannot be done directly. We have to use an Array or Object to return multiple values from a function.
Syntax
return expression; The expression in the above syntax is the value returned to the function caller. It is optional. If the expression is not specified, the function returns undefined.
It is not allowed to use a line terminator between the return keyword and value. We can understand it by using the following lines. Suppose we are writing the return statement as follows:
return
x + yThen, it will be transformed into –
return;
x + y;There is the automatic insertion of the semicolon after the return statement. The code written after the return statement (x + y;) will be considered as the unreachable code.
We can use parentheses to prevent this problem. It can be written as –
return (
x + y;
);Now, let’s see some examples of using the return statement in JavaScript.
Example1
This is a simple example of using the return statement. Here, we are returning the result of the product of two numbers and returned back the value to the function caller.
The variable res is the function caller; it is calling the function fun() and passing two integers as the arguments of the function. The result will be stored in the res variable. In the output, the value 360 is the product of arguments 12 and 30.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Welcome to the javaTpoint.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>
Example2
Here, we are interrupting a function using the return statement. The function stops executing immediately when the return statement is called.
There is an infinite while loop and variable i, which is initialized to 1. The loop continues until the value of i reached to 4. When the variable’s value will be 4, the loop stops its execution because of the return statement. The statement after the loop will never get executed.
Here, the return statement is without using the expression, so it returns undefined.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Welcome to the javaTpoint.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>
Now, we will see how to return multiple values using the return statement. Usually, the JavaScript functions returns a single value, but we can return multiple values by using the array or object. To return multiple values, we can pack the values as the object’s properties or array elements.
Example3 – Returning multiple values using Array
In this example, we are returning multiple values by using the Array. Here, we are using the ES6 Array destructuring syntax to unpack the values of array.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript return </title>
</head>
<body>
<h1> Welcome to the javaTpoint.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>
Example4 – Returning multiple values using object
In this example, we are returning multiple values by using the Object. Here, we are using the ES6 Object destructuring syntax to unpack the values of the object.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript return </title>
</head>
<body>
<h1> Welcome to the javaTpoint.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>
Leave a Reply