Returning Multiple Values in JavaScript

JavaScript functions traditionally return a single value. However, there are several techniques to effectively return multiple values from a function, enhancing code readability and flexibility. This tutorial will explore these methods, covering both older and modern approaches.

The Challenge: Why Return Multiple Values?

Often, a function needs to compute and provide more than one piece of information to the calling code. For example, a function might need to calculate both the sum and the average of a list of numbers, or determine both the width and height of an image. Simply returning a single value forces you to either use global variables (which is generally discouraged) or to modify the input parameters (which can lead to unexpected side effects).

Method 1: Returning an Object

The most common and generally recommended approach is to return an object containing the values you want to return. Each value is assigned to a specific property of the object, making the returned data self-descriptive and easy to access.

function newCodes() {
  const dCodes = fg.codecsCodes.rs;
  const dCodes2 = fg.codecsCodes2.rs;

  return {
    dCodes: dCodes,
    dCodes2: dCodes2
  };
}

const result = newCodes();
console.log(result.dCodes);
console.log(result.dCodes2);

This method is clear, well-structured, and works in all JavaScript environments. It’s particularly helpful when the returned values represent distinct concepts with meaningful names.

Property Value Shorthand (ES6+)

ES6 introduced a concise syntax called property value shorthand. If the property name and the variable holding the value are the same, you can simply write the property name without the colon and value.

function newCodes() {
  const dCodes = fg.codecsCodes.rs;
  const dCodes2 = fg.codecsCodes2.rs;

  return {
    dCodes,
    dCodes2
  };
}

This makes the code even more compact and readable.

Method 2: Returning an Array

You can return an array containing the multiple values. While functional, this approach requires careful documentation or understanding of the order of values to prevent errors.

function getValues() {
  return [10, 20, 30];
}

const [first, second, third] = getValues();
console.log(first); // Output: 10
console.log(second); // Output: 20
console.log(third); // Output: 30

Destructuring Assignment (ES6+)

The most elegant way to handle array return values is through destructuring assignment. This allows you to directly assign elements of the array to individual variables.

const [x, y] = [1, 2];
console.log(x); // Output: 1
console.log(y); // Output: 2

Important Consideration: While arrays are concise, using an object is generally preferred for clarity, especially when dealing with more than two or three values. With an array, it’s easy to forget what each element represents.

Method 3: The Comma Operator (Avoid)

JavaScript has a comma operator that can technically return multiple values, but it’s generally best avoided for readability and maintainability. The comma operator evaluates each expression from left to right and returns the value of the last expression.

function myFunction() {
  let a = 1;
  let b = 2;
  return a, b, 3; // Effectively returns 3
}

console.log(myFunction()); // Output: 3

This approach is confusing and doesn’t provide a clear way to access individual values. It’s almost always better to use an object or array instead.

Choosing the Right Approach

For clarity and maintainability, especially with more than two values, use an object. This provides named properties, making the code easier to understand.
If you have a simple pair or tuple of values, an array with destructuring assignment can be a concise option.
Avoid the comma operator due to its ambiguity and lack of readability.

By using these techniques, you can effectively return multiple values from your JavaScript functions, creating more flexible and well-structured code.