How to return multiple values from a function in JavaScript

by

In this tutorial, let’s look at the different ways to return multiple values from a function in JavaScript.
–
Let’s first try to return multiple values with the traditional method (the return statement), and then move on to more complex methods that involve arrays, objects and destructuring.

Trying the traditional way – using a return statement

Generally, we’ll return values by using the ‘return’ statement, as shown below: 

function getFruits() {
  return 'Apples';
}

console.log(getFruits()); //Apples

As you can see in the above example, our function ‘getFruits’ returns ‘Apples’ when called.

What if you want to return more than one fruit? Why don’t we try returning more than one fruit separated by commas? 

function getFruits() {
  return 'Apples','Grapes','Oranges';
}

console.log(getFruits()); //Oranges

Unfortunately, separating different values by commas doesn’t seem to work. Our browser just returns the very last value and ignores the rest.

We need a better way of structuring our return statement, so all our values are retained.

Return an array to return multiple values

Arrays are great for structuring values, so let’s try sending our values in the form of an array.

We can do this in 2 ways. We can create the array directly in the return statement, as shown below: 

function getFruits() {
  return ['Apples','Grapes','Oranges'];
}

console.log(getFruits()); // ['Apples', 'Grapes', 'Oranges']

Or we can create an array of values beforehand, and send that variable in the return statement, as shown below: 

 let fruits = ['Apples','Grapes','Oranges']
  return fruits;

Either way, you’re going to get back an array of elements that can now be stored and manipulated as you wish.

You can store the return value in a variable and access these separate values by using their respective indices, as shown below: 

function getFruits() {
  return ['Apples','Grapes','Oranges'];
}

let fruits = getFruits();
console.log(fruits[0]) ; //Apples

Otherwise, you can use the ‘for’ loop to loop through the length of the received array and print each element, as shown below: 

let fruits = getFruits();

for(let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Array destructuring of the returned values

Accessing the values via their indices work in some instances. But, if you were getting specific values (like the name, age and gpa of a student, for example), you can’t exactly remember which information is in which index, so array destructuring helps in naming the values effectively. 

function getPerson() {
  return ['John',15,4]
}
 
let [fName,age,gpa] = getPerson();
console.log(`Name: ${fName}`); // Name: John
console.log(`Age: ${age}`); // Age: 15 
console.log(`GPA: ${gpa}`); // GPA: 4

In the above example, we knew we were going to be getting back the values pertaining to the first name, age and gpa, in that exact order, so we’ve destructured the arrays with the relevant variable names.

Now, if you had changed the order of the variables, you would have gone wrong. Let me show you: 

let [age,fName,gpa] = getPerson();
console.log(`Name: ${fName}`); // Name: 15
console.log(`Age: ${age}`); // Age: John 
console.log(`GPA: ${gpa}`); // GPA: 4

As you can see, the order matters a lot in destructuring array elements. Make sure you receive them in the same order you send them in from the function.

Return an object instead

You can also return an object instead of an array. This works great for values that have specific labels, like the example we saw earlier.

Let’s restructure the return statement where we sent a person’s details into an object. 

function getPerson() {
  return {
    fName: 'John',
    age: 15,
    gpa: 4
  }
}

let person = getPerson();
console.log(`Name: ${person.fName}`); // Name: John
console.log(`Age: ${person.age}`); // Age: 15 
console.log(`GPA: ${person.gpa}`); // GPA: 4

As you can see above, we’ve created an object with ‘fName’, ‘age’ and ‘gpa’ as the properties, and this method works just as well as the one where we used arrays.

Object destructuring of the returned values

Destructuring is where objects get an edge over arrays. Since every value in an object is labeled (property names), you can destructure them using those same labels, as shown below: 

let { fName, age, gpa } = getPerson();
console.log(`Name: ${fName}`); // Name: John
console.log(`Age: ${age}`); // Age: 15 
console.log(`GPA: ${gpa}`); // GPA: 4

So far, things look the same as when we did array destructuring. Where is the leg up, you might ask?

Well, what if I say that your object properties can be placed in any order you like, and you’d still get the right value in the right ‘variable/property’? Look at the example below: 

let { age, fName, gpa } = getPerson();
console.log(`Name: ${fName}`); // Name: John
console.log(`Age: ${age}`); // Age: 15 
console.log(`GPA: ${gpa}`); // GPA: 4

As you can see above, even though the order of age and fName were interchanged, their values went into the correct properties.

This is because object values are labeled to start with, so as long as you received them with the same property names, the order doesn’t matter.

But, if you change the property name while destructuring, you’re in trouble. You’ll end up with an ‘undefined’ value than the actual value you’re looking for, as shown below: 

let { age, firstName, gpa } = getPerson();
console.log(`Name: ${firstName}`); // Name: undefined
console.log(`Age: ${age}`); // Age: 15 
console.log(`GPA: ${gpa}`); // GPA: 4

Print multiple values directly

Instead of returning multiple values, you can just go ahead and print them in the order you want them displayed. This is not ‘returning’ multiple values, but technically, the result is the same.

Look at the example below. We want to print the addition, multiplication, subtraction, and division results of two numbers, and we just went ahead and printed them within the function, instead of returning anything.

function doCalc(num1, num2) {
  console.log(`${num1} + ${num2} = ${num1 + num2}`); // 20 + 10 = 30
  console.log(`${num1} - ${num2} = ${num1 - num2}`); // 20 - 10 = 10
  console.log(`${num1} * ${num2} = ${num1 * num2}`); // 20 * 10 = 200
  console.log(`${num1} / ${num2} = ${num1 / num2}`); // 20 / 10 = 2
}

doCalc(20,10);

So, that’s it! We’ve looked at 2 main ways of returning multiple values from a function in JavaScript.

Leave a Comment