javascript return multiple values: practical guide
Learn how to return multiple values in JavaScript using arrays and objects, with destructuring patterns, best practices, and real-world examples for robust APIs.
According to JavaScripting, JavaScript does not support returning multiple primitive values directly. Instead, wrap the results in an array or an object and destructure at the call site. This approach keeps functions focused and APIs expressive, while enabling clean access to each value. By choosing a consistent shape, you improve readability and maintainability across the codebase.
javascript return multiple values: why it matters
In JavaScript, a function returns a single value. When you need to expose more than one result, you must wrap those results in a container object such as an array or a plain object. This pattern is a foundational technique for building modular APIs and clean interfaces. The JavaScripting team emphasizes choosing a shape that matches how the caller will use the values; clarity often beats cleverness. Destructuring is the natural companion, letting you pull out values in a single, readable statement. If you expose an API that returns a well-described object, future callers can rely on named fields without relying on positional order. The main idea is to separate the contract (what you return) from the consumption (how you read it).
function readStats() {
const min = 3;
const max = 42;
const avg = 21.5;
return [min, max, avg]; // multi-value return via array
}
const [min, max, avg] = readStats();
console.log(min, max, avg);function readStatsObj() {
const min = 3;
const max = 42;
const avg = 21.5;
return { min, max, avg }; // multi-value return via object
}
const { min, max, avg } = readStatsObj();
console.log(min, max, avg);note
Steps
Estimated time: 30-45 minutes
- 1
Define your data shape
Decide whether an array or object best expresses the API surface. Consider how callers will access the values and whether field names matter for readability.
Tip: Document the layout of the returned values to prevent misuse. - 2
Implement array-based return
Return values as an ordered list. Destructure at the call site to extract values efficiently.
Tip: Comment the meaning of each position to aid future readers. - 3
Switch to object-based returns
If values have meaningful names, prefer an object so callers access values by name rather than position.
Tip: Choose stable property names that won’t drift over time. - 4
Destructure the result at call sites
Use array or object destructuring to simplify value access and improve readability.
Tip: Use aliasing (rename) when needed to avoid name collisions. - 5
Add default values
Guard against missing fields by providing defaults in the destructuring pattern.
Tip: Defaults prevent runtime errors when the API surface changes. - 6
Test across scenarios
Test with typical, edge, and missing-field cases to ensure stability.
Tip: Include unit tests that cover both shapes (array and object) if you support both.
Prerequisites
Required
- Required
- Required
- Basic knowledge of JavaScript (functions, arrays, objects)Required
Optional
- Optional
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| CopyCopy selected code or snippet | Ctrl+C |
| PasteInsert code into editor | Ctrl+V |
| Format codeFormat the current document in editor | ⇧+Alt+F |
| Toggle line commentComment/uncomment selected lines | Ctrl+/ |
| Find in fileSearch within the current file | Ctrl+F |
Questions & Answers
Can JavaScript functions natively return multiple values without wrapping them?
No. JavaScript functions return a single value, so you wrap multiple results in an array or an object and then destructure. This pattern is widely used to create clean, ergonomic APIs.
No—wrap in an array or object and destructure to access values.
Which should I choose: array or object for returns?
If you need a fixed order with just values, use an array. If you want named fields and future-proofing, use an object.
Use arrays for ordered values, objects for named fields.
How do I destructure nested values?
You can destructure nested structures by chaining destructuring patterns. For example, const { a: { b } } = obj;.
Destructure the nested parts directly from the pattern.
What about defaults when values are missing?
Provide defaults during destructuring, e.g., const [a = 0, b = 1] = arr; or const { a = 0, b = 1 } = obj.
Use defaults to cover missing values.
Are there performance concerns?
The overhead is negligible in most UI code; focus on clarity and correctness rather than micro-optimizations.
Performance isn't usually an issue; readability matters more.
Can I return multiple values from asynchronous functions?
Yes. Return a structured value (array or object) once the async work completes; you can also use Promise.all to gather multiple results in parallel.
Yes—return a structured value after async work.
What to Remember
- Return values via arrays or objects for multi-value results
- Destructure at call sites for clarity
- Prefer object returns for named fields and future-proofing
- Use defaults to guard against missing values