Functions usually return a single value, but there are situations where we might need to return multiple values. In these cases, it’s important to learn how to smoothly handle and get more than one value from a single function. In this article, we will learn how to return multiple values from a function in JavaScript.
How to Return Multiple Values From a Function?
Can we return multiple values from a function in JavaScript? Yes. we can return multiple variables simultaneously.
We will explore two main approaches: Using an Array and Using an Object. Let’s deep dive into each approach, providing examples and explanations along the way.
1) Using an Array
Let’s take an example of a function in which we want to return two values. We can pack the return values as elements of an array and return the array.
For example, we have a function that returns firstName and lastName, we can return it in the form of a 2-sized array:
// Define a function called arrayMethod
function arrayMethod() {
// Set the first name to 'Emma' and the last name to 'Watson'
let firstName = 'Emma';
let lastName = 'Watson';
// Return an array containing the first and last names
return [firstName, lastName];
}Return values of the array can be accessed by using square bracket notation. Here ‘names’ is an array.
// Call the arrayMethod function and store the result in the 'names' variable let names = arrayMethod(); // Now, you can access the first name as names[0] and the last name as names[1] console.log(names[0]); console.log(names[1])
Output:
Emma
Watson
Here values can also be extracted by array destructing.
// Call the getNames function and use array destructuring to get the returned values let [firstName, lastName] = getNames();
By using the destructuring assignment syntax, we can unpack the values from the array and assign them to individual variables. In this case, the firstName variable will hold the value ‘Emma’, and the lastName variable will give the value ‘Watson’.
2) Using an Object
Arrays are fantastic, but sometimes we need more context. This approach provides a more readable and maintainable way of returning multiple values, as each value is labeled with a descriptive property name. It organizes the return values as key-value pairs within an object.
Let’s explore this in more detail:
// A function called objectMethod is defined
function objectMethod() {
// Set the first name to 'Emma' and the last name to 'Watson'
let firstName = 'Emma';
let lastName = 'Watson';
//An object containing the first and last name is returned
return { firstName, lastName };
}We can store the return values into an object and access them as object.firstName and object.lastName.
// Call the objectMethod function and store the result in the 'names' variable let names = objectMethod(); // Now, you can access the first name as names.firstName and the last name as names.lastName console.log(names.firstName); console.log(names.lastName);
Output:
Emma
Watson
Comparing Both the Approaches
- The object approach is more readable due to labeled properties, enhancing self-explanatory code while the Array approach may require additional documentation, therefore impacting readability.
- The array approach is straightforward but less flexible if the order of the values needs to change or in the future new values are added whereas the Object method allows easy addition and removal of values.
- Both are user-friendly approaches, choice depends on code needs. Array needs destructing and Object requires simple property access.
Also, learn how to convert an object to an array in JavaScript to know more about them.
Can a function have multiple return statements?
Yes, a JavaScript function can have multiple return statements. But note that when a return statement is encountered in a function, it immediately exits the function and returns the specified value.
Conclusion
In this article, we have covered two different methods to return multiple values from a function in JavaScript along with examples. By understanding these techniques, we can enhance the functionality and readability of our code.
