In JavaScript, the easiest way to return multiple values is to store them in an array and return the array.
function someFunction(){
var arrayToReturn = [2,3];
return arrayToReturn;
};
In the code above, we wanted to return the values 2 and 3, so we create a new array, arrayToReturn, and then return that array.
This is one of the easiest ways to return multiple values. Let’s take a look at a quick example below.
Returning Multiple Values in JavaScript
In this example, we will have an array of numbers. We will want to get the highest and lowest value from the array and return those numbers.
To do this, we will create a function that takes an array, and then returns the highest and lowest numbers of that array. The function will take a parameter that will be the array.
We can refer to this post on how to get the min value of an array.
And we can refer to this one to get the max value of an array.
We will use the code from these two functions and combine them into one. Then we will return the min and max values in an array, with the min value as the first value of the array, and the max value as the second.
function getHighLowValues(arr){
var minNumber = arr[0];
var maxNumber = arr[0];
var toReturn = [];
for (var i = 0; i < arr.length; i++) {
if( arr[i] > maxNumber ){
maxNumber = arr[i];
}
if( arr[i] < minNumber ){
minNumber = arr[i];
}
}
toReturn[0] = minNumber;
toReturn[1] = maxNumber;
return toReturn;
};
Let’s put this function to use in the example below.
Returning the Min and Max Values of an Array
In this example, we will provide code to let the user input as many numbers as they want separated by a comma(,).
Here is the simple HTML setup:
Type as many numbers as you want separated by a comma.
If the numbers are not separated by a comma only, this example will not work.
We will then create an array of numbers from this input and find the min and max values using the getHighLowValues() function we created in the previous example.
To create an array from the string of numbers the user provides, we will use the split() method along with the Array map() method.
Finally, we will update the results below using the innerHTML property.
Here is our JavaScript code for our function that will return multiple values.
//This is the function we created earlier
function getHighLowValues(arr){
var minNumber = arr[0];
var maxNumber = arr[0];
var toReturn = [];
for (var i = 0; i < arr.length; i++) {
if( arr[i] > maxNumber ){
maxNumber = arr[i];
}
if( arr[i] < minNumber ){
minNumber = arr[i];
}
}
toReturn[0] = minNumber;
toReturn[1] = maxNumber;
return toReturn;
};
//Here we will use the above function to return multiple values
function getMinMaxNums(){
//Get the user input
var userInput = document.getElementById("userArr").value;
//Convert user input to an array of numbers
var numbersArray = userInput.split(',').map(Number);
//We will enter our array into our function above
//The function will return an array which we will assign to the var minMaxNumbers
var minMaxNumbers = getHighLowValues(numbersArray);
//Display the min and max numbers
//Remember the min value is the first value in the array
//And the max value is the second
document.getElementById("results").innerHTML = "
The min number is: ” + minMaxNumbers[0] + “.
The max number is: ” + minMaxNumbers[1] + “.
";
}
The final code and output for this example is below:
Code Output:
Type as many numbers as you want separated by a comma.
If the numbers are not separated by a comma only, this example will not work.
Full Code:
Type as many numbers as you want separated by a comma.
If the numbers are not separated by a comma only, this example will not work.
Hopefully this article has helped you to understand how to in JavaScript return multiple values.