How to return multiple values in JavaScript?

To return multiple values from a JavaScript function, you can use the following methods, depending on the use case and desired structure:

1. Return an Array (Ordered Values)

Use an array to return ordered values (e.g., coordinates, pairs).
Pros: Simple syntax, works with destructuring.
Cons: Order must be remembered.

Example:

function getMinMax(numbers) {
  const min = Math.min(...numbers);
  const max = Math.max(...numbers);
  return [min, max]; // Return as an array
}

// Destructure the result
const [minValue, maxValue] = getMinMax([5, 2, 9, 1]);
console.log(minValue, maxValue); // 1 9

2. Return an Object (Named Properties)

Use an object to return named values (e.g., user data, configurations).
Pros: Self-documenting, order doesn’t matter.
Cons: Slightly more verbose.

Example:

function getUserData() {
  return {
    name: "Alice",
    age: 30,
    email: "alice@example.com"
  };
}

// Access via destructuring or dot notation
const { name, age } = getUserData();
console.log(name, age); // "Alice" 30

3. Mixed Approach (Arrays + Objects)

Combine arrays and objects for complex data.

Example:

function analyzeArray(arr) {
  const sum = arr.reduce((a, b) => a + b, 0);
  const avg = sum / arr.length;
  return {
    sum,
    avg,
    length: arr.length
  };
}

const { sum, avg } = analyzeArray([10, 20, 30]);
console.log(sum, avg); // 60 20

4. Return a Tuple (Fixed-Length Array)

Use arrays to mimic tuples (fixed-length, typed elements).
Use Case: Returning related values like [status, data].

Example:

function fetchData() {
  const success = true;
  const data = { id: 1, value: "test" };
  return [success, data]; // Tuple-like structure
}

const [success, data] = fetchData();
if (success) console.log(data); // { id: 1, value: "test" }

5. Advanced: Return a Generator

For dynamic sequences, use a generator (function*).
Use Case: Iterating over large datasets or infinite sequences.

Example:

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2

Comparison Table

MethodBest ForExample Use Case
ArrayOrdered, fixed-length results[x, y] coordinates
ObjectNamed, flexible propertiesUser data ({name, age})
TupleFixed-type pairs[status, data] responses
GeneratorDynamic sequencesPaginated API results

Real-World Examples

1. React Hook (Array Return)

// useState returns an array: [value, setter]
const [count, setCount] = useState(0);

2. API Response (Object Return)

async function fetchUser() {
  const response = await fetch("/api/user");
  const data = await response.json();
  return { data, status: response.status };
}

const { data, status } = await fetchUser();

Key Takeaways

  • Use arrays for ordered, positional values (e.g., [x, y]).
  • Use objects for named, self-documenting values (e.g., {name, age}).
  • Use generators for sequences or large datasets.
  • Destructuring simplifies extracting values from arrays/objects.

Leave a Reply

Your email address will not be published. Required fields are marked *