Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How does JavaScript 'return' statement work?
In this article, we will learn how to work with a return statement in JavaScript. A specific value from the function is returned to the function caller using the return statement. Whenever the return statement is run, the function will stop. The code that follows the return statement won't be available, due to which it is the last statement in a function.
Using the return statement, we may return object types, including functions, objects, arrays, and primitive values like Boolean, integer, and string.
By using the return statement, we can also return many items. To return several values from a function, we must use an Array or an Object.
Let's discuss different methods to use the return statement in JavaScript.
- The return statement with a value.
- The return statement with no value.
- The return statement with multiple values.
- The return statement with the object.
The Return Statement with a Value
In this section, we will discuss how a return statement works which has a return value.
Syntax
return value;
Example
In this example, we see that a variable is being passed the value for a function named n(). Inside the function, we see two variables that are the product of the values. The return statement passes the value to the variable s. This product is then displayed on the user's screen.
<html>
<head>
<title> Return statement with value in JavaScript </title>
</head>
<body>
<h2> The return statement with a value </h2>
<script>
var s = n(5, 6);
function n(m, p) {
return m * p;
}
document.write(`This function returns ${s} as a product of 5 and 6.`);
</script>
</body>
</html>
This function returns 30 as a product of 5 and 6.
In the above output, users can see that the function returns the product value that has been passed to the variable s from function n.
The Return Statement with No Value
Although a return statement without a value is only used to end a program, it is still possible to utilize it. The function automatically returns undefined if there is no explicit return statement, which means the return keyword is absent from the function.
Syntax
return;
Example
In this example, we see that a variable is being passed the value for a function named func(). The return statement terminates the function when a condition is met.
<html>
<head>
<title> Return statement with no value in JavaScript </title>
</head>
<body>
<h2> Return statement with no value </h2>
<script>
var v = func();
function func() {
var a = 1;
while (a) {
document.write(`${a} `);
if (a == 5) {
return;
}
a++;
}
}
</script>
</body>
</html>
1 2 3 4 5
The output shows how the while loop executes every time until the value of a becomes 5 and then goes into the if-statement to terminate the loop using the return statement.
The Return Statement with Multiple Values
When utilizing an array, we may return several values using a return statement. JavaScript functions can only return a single value directly. To return multiple values, you can pack them as components of an array or as properties of an object.
Note ? To extract values from the array or properties from objects, use the destructuring assignment method.
Using Array
In this method, we will see how a return statement can have multiple values using an array.
Syntax
return [value1, value2, value3];
Example
In this example, we see how to pass multiple values in an array using the return statement. We take four variables namely book, refID, issue_date, and due_date. These four variables contain a certain value each. Outside the function, we use array destructuring to extract the returned values.
<html>
<body>
<h2>The return statement with multiple values using array</h2>
<script>
function info() {
let book = 'Chronicles of Narnia',
refID = 'ISBN00127645',
issue_date = '01.06.21',
due_date = '08.07.21';
return [book, refID, issue_date, due_date];
}
const [book, refID, issue_date, due_date] = info();
document.write(`Book = ${book}<br>
Reference ID = ${refID}<br>
Issue date = ${issue_date}<br>
Due date = ${due_date}`);
</script>
</body>
</html>
Book = Chronicles of Narnia Reference ID = ISBN00127645 Issue date = 01.06.21 Due date = 08.07.21
This output shows the book's name, reference ID, issue date and due date. The return statement returns the values in the form of an array.
Using Object
In this section, we will see how using an object we can return multiple values.
Syntax
return {property1, property2, property3};
Example
Here, three variables (android, brand, and price) are created and given values inside the method fun(). Then, as a key-value pair, we return an object including the android, brand, and price. We use object destructuring to extract the returned properties.
<html>
<body>
<h2> The return statement with multiple values using object </h2>
<script>
function fun() {
let android = 'OnePlus 10R 5G',
brand = 'One Plus',
price = '$511.09';
return {
android,
brand,
price
};
}
let {
android,
brand,
price
} = fun();
document.write(`Android = ${android}<br>
Company = ${brand}<br>
Price = ${price}`
);
</script>
</body>
</html>
Android = OnePlus 10R 5G Company = One Plus Price = $511.09
The name, brand, and cost of the android are displayed in this output. The return statement returns the values in the form of an object.
Conclusion
The return statement in JavaScript is essential for sending values back from functions and controlling execution flow. Use simple return for single values, arrays for multiple related values, and objects for structured data with named properties.
2K+ Views
