We create functions to perform some operations. You can also return something from a function using the return keyword. But JavaScript doesn't allow returning multiple values from a function directly.
But you can create an array or object with all the values that you want to return from your function and return that array or object. In this way, you can return as many values as you want.
In this blog post, I will show you both techniques to return multiple values for a JavaScript function. You will also see how to access all those values after calling the function.
const getValues = () => {
const value1 = 10
const value2 = 'Hello'
const value3 = true
return value1, value2, value3
}
const values = getValues()
console.log(values)
// true
Suppose you have a function where you are returning 3 values separating them with commas (,). However, it's important to note that JavaScript functions can only return a single value.
Even though you are returning 3 values, it will ignore the first 2 values and will only return the value of value3 (which is true).
To return multiple values from a JavaScript function, you can use arrays or objects. With arrays, create and return an array of desired values. With objects, assign values to properties, then return the object. You can access those values using destructuring syntax.
Also Read: Best Ways to Check If a Variable is an Array in JavaScript
Returning Multiple Values From a JavaScript Function Using an Array
You can through multiple values from a function using an array. It is very easy and simple. Just create an array with everything you want to return and return the array at the end.
Let's create a function and return an array of items.
const getValues = () => {
const value1 = 10
const value2 = 'Hello'
const value3 = true
return [value1, value2, value3]
}
const [value1, value2, value3] = getValues()
console.log(value1)
// 10
console.log(value2)
// Hello
console.log(value3)
// true
In this getValues() function, there are 3 variables: value1 with a value of 10, value2 with a value of 'Hello', and value3 with a value of true.
Here I am returning all these 3 variables as an array. JavaScript function is returning one thing which is the array. But our array contains multiple items.
Now when you call this function, use array destructuring syntax to retrieve each item separately from the returned array.
Also Read: Conditionally Define or Add Elements to a JavaScript Array
Returning Multiple Values From a JavaScript Function Using an Object
Another technique for returning multiple values from a function in JavaScript is using an object. Just create an object and set the values as its properties. Finally, return this object from your function.
const getValues = () => {
const value1 = 10
const value2 = 'Hello'
const value3 = true
return {
item1: value1,
item2: value2,
item3: value3,
}
}
const { item1, item2, item3 } = getValues()
console.log(item1)
// 10
console.log(item2)
// Hello
console.log(item3)
// true
I am returning an object from the getValues() function. Here I set 3 properties item1, item2, and item3 along with their corresponding values value1, value2, and value3.
When you call this function, it will return the whole object. You can access individual properties using object destructuring syntax in JavaScript.
Also Read: Best Ways to Access Object Properties Dynamically in Javascript
Conclusion
Often we use functions to execute some logic and want to get more than one result from our functions. As you already know the return keyword only returns one thing.
That's why you have to use an array or object in order to return multiple values from a JavaScript function. Whether you choose to use arrays or objects depends on your specific needs and the structure of your data.
Arrays are suitable when you have a collection of values of the same type or when the order of values matters. On the other hand, objects are ideal when you want to associate values with specific keys or when you have values of different types.
By leveraging array or object destructuring, you can easily capture and utilize the returned values in a concise and readable manner.
