Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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. Immediate action is not viable. 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 block, we will discuss how a return statement works which has a return value.
Syntax
Following is the syntax to use the return statement with a value −
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>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 n(). Inside the function we see two variables which are the product of the values. The return statement passes the value to the variable s. This product is then printed on the user’s screen.
<html>
<head>
<title> Return statement with 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>The output of this example shows how the while loop executes every time till 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. A single value may be returned by JavaScript functions. You may pack the return results from a function as components of an array or as properties of an object to return multiple values.
JavaScript doesn't help functions that return numerous values. The array or object can then be returned after being wrapped around numerous values.
Note − To remove values from the array or effects from objects, use the de-structuring assignment method.
Using Array
In this method, we will see how a return statement can have multiple values using an array.
Syntax
return [name, age];
Example
In this example, we see the tutorial 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 take the const array and initialize it with the info() function call. This in turn prints the 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>This output shows the book’s name, reference ID, issue date and due date. The return value returns the values in the form of an array.
Using object
In this tutorial, we will see how using an object we can return multiple values.
Syntax
return {android,brand};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 take the object and use the fun() method outside the function to initialise it. Finally, we print each and every variable.
<html>
<body>
<h2> The return statement with multiple values using object.</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
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>The name, brand, and cost of the android are displayed in this output. When the values are in the form of an object, this returns them.
Conclusion
In this tutorial, we used four methods to show the usage of a return statement in JavaScript. The first method shows how a simple return statement is used when it has a parameter inside them. The second method shows how a return statement with no parameter works. The third approach shows how multiple values are passed to the return statement using an array and objects.
1K+ Views
