JavaScript
Programming
Web Development
Coding
Function Return

Return multiple values in JavaScript?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

A JavaScript function still returns only one value, but that value can be a container holding several pieces of data. In practice, when developers say they want to return multiple values, they usually mean returning an array, an object, or a custom value type and then unpacking it at the call site.

Arrays Are the Smallest Option

If the returned values have a natural order and are closely related, an array is the simplest choice.

javascript
1function getCoordinates() {
2  const x = 12;
3  const y = 34;
4  return [x, y];
5}
6
7const [x, y] = getCoordinates();
8console.log(x, y);

This works well when the meaning of each position is obvious and stable. It is common for coordinate pairs, min-max pairs, or functions that conceptually return a tuple.

The drawback is readability. If someone sees result[0] and result[1] later in the code, the meaning can become unclear unless the values are destructured immediately.

Objects Are Usually the Best General Answer

For most business logic, an object is the clearest return type because it names each value.

javascript
1function getCircleStats(radius) {
2  return {
3    area: Math.PI * radius * radius,
4    circumference: 2 * Math.PI * radius,
5  };
6}
7
8const { area, circumference } = getCircleStats(5);
9console.log(area, circumference);

This is often the best pattern because:

  • the caller does not need to remember positional ordering
  • adding new fields later is less fragile
  • named properties make the code self-documenting

Objects are especially good when the returned values are different kinds of data rather than one logical tuple.

Returning an Existing Domain Object

Sometimes the best answer is not "return multiple primitive values" but "return an object that represents the concept properly."

javascript
1class Rectangle {
2  constructor(width, height) {
3    this.width = width;
4    this.height = height;
5  }
6
7  get area() {
8    return this.width * this.height;
9  }
10
11  get perimeter() {
12    return 2 * (this.width + this.height);
13  }
14}
15
16function createRectangle(width, height) {
17  return new Rectangle(width, height);
18}
19
20const rect = createRectangle(10, 4);
21console.log(rect.area, rect.perimeter);

This is useful when the values belong together as one domain concept and you expect to attach behavior to them.

Destructuring Makes the Call Site Clean

Modern JavaScript is especially nice here because destructuring lets you unpack arrays or objects right where the function result is used.

Array destructuring:

javascript
1function getMinMax(values) {
2  return [Math.min(...values), Math.max(...values)];
3}
4
5const [min, max] = getMinMax([3, 8, 1, 9]);
6console.log(min, max);

Object destructuring:

javascript
1function getUserSummary(user) {
2  return {
3    fullName: `${user.firstName} ${user.lastName}`,
4    isAdult: user.age >= 18,
5  };
6}
7
8const { fullName, isAdult } = getUserSummary({
9  firstName: "Ada",
10  lastName: "Lovelace",
11  age: 28,
12});
13
14console.log(fullName, isAdult);

That is usually cleaner than assigning the whole returned structure to a temporary variable and indexing into it later.

When Not to Return Many Values

Sometimes returning multiple values is a smell that the function is doing too much. If the caller only ever uses one of the values, or if the return shape keeps growing, consider whether the function should be split.

For example, this might be too broad:

javascript
1function buildReport(data) {
2  return {
3    html: renderHtml(data),
4    csv: renderCsv(data),
5    stats: calculateStats(data),
6    warnings: findWarnings(data),
7  };
8}

That may be fine in a report builder, but in many codebases it means the function now has several responsibilities and should be decomposed.

Async Functions Follow the Same Rule

async functions do not change the pattern. They still return one value, but that one value is wrapped in a promise.

javascript
1async function fetchStatus() {
2  return {
3    ok: true,
4    message: "ready",
5  };
6}
7
8fetchStatus().then(({ ok, message }) => {
9  console.log(ok, message);
10});

So the "multiple values" idea still works exactly the same way with promises.

Common Pitfalls

The most common mistake is choosing an array when the values do not have an obvious order. That makes the call site harder to read and easier to misuse.

Another issue is returning an object with too many unrelated properties, which can signal that the function has grown past one clear responsibility.

Developers also sometimes change the order of returned array values later, breaking callers silently. Objects are safer when the API may evolve.

Finally, do not forget that destructuring depends on the correct shape. If you change property names or positional order, update the call sites too.

Summary

  • JavaScript functions return one value, but that value can hold multiple pieces of data.
  • Arrays work well for ordered tuple-like results.
  • Objects are usually the clearest general-purpose option.
  • Returning a domain object is best when the values belong to one concept.
  • Destructuring makes multi-value return patterns easy to consume cleanly.

Course illustration
Course illustration

All Rights Reserved.