JavaScript Spread Operator — What Does This Output?

Why This Question Matters

If you're just starting with JavaScript, you'll quickly realize that the language has a lot of "magic" shortcuts. One of the most common points of confusion for juniors is how to handle arrays when a function expects individual arguments.

The snippet Math.max(...arr) looks simple, but it touches on two fundamental concepts: how the Math object works and the power of the spread operator. Many beginners try to pass an array directly into Math.max() and end up with NaN, leaving them scratching their heads. Understanding why this happens—and how to fix it—is a rite of passage for every JS dev.

Understanding the Code

Let's look at the snippet again:

const arr = [3, 1, 4, 1, 5, 9]
const max = Math.max(...arr)
console.log(max)

First, we have a standard array of numbers. Then we call Math.max().

Here is the catch: Math.max() does not take an array as an argument. If you write Math.max([3, 1, 4]), JavaScript doesn't "loop" through the array for you. It tries to treat the entire array as a single value. Since an array isn't a number, it returns NaN (Not a Number).

That’s where the three dots (...) come in. This is the spread operator.

Think of the spread operator as "unboxing" the array. It takes the elements inside the array and spreads them out as individual arguments.

Internally, the engine transforms this:
Math.max(...[3, 1, 4, 1, 5, 9])

Into this:
Math.max(3, 1, 4, 1, 5, 9)

Now that Math.max is receiving a list of numbers instead of a single array object, it can actually do its job and return the highest value.

Finding the Correct Answer

The correct answer is Option B: 9.

Why? Because the spread operator successfully unpacked the array, and 9 is the largest number in that set.

If the code had been Math.max(arr) (without the dots), the answer would have been NaN. If the code used a different method like Math.min(), the answer would have been 1. But since we are spreading the values into a maximum-seeking function, 9 is the only logical outcome.

Common Mistakes Developers Make

The most obvious mistake is forgetting the spread operator entirely. I've seen plenty of PRs where a dev passes an array into a function that expects a comma-separated list, and the app silently fails or returns NaN.

Another thing to watch out for is stack overflow.

While ...arr is elegant, it's not infinite. The spread operator pushes arguments onto the stack. If you have an array with 100,000 elements, Math.max(...hugeArray) will likely crash your environment with a RangeError: Maximum call stack size exceeded.

If you're dealing with massive datasets, don't use spread. Use a standard loop or .reduce():

const max = arr.reduce((a, b) => Math.max(a, b), -Infinity);

Also, keep in mind that Math.max() returns -Infinity if you pass it no arguments at all. If your array is empty, Math.max(...[]) will return -Infinity, which can lead to some weird bugs in your UI if you aren't checking for empty states.

Real-World Usage

In production, you'll see this pattern everywhere. It's not just for finding the max number. You'll use it whenever you need to merge arrays or pass a dynamic list of settings into a function.

For example, if you're building a dashboard and you have a set of coordinates in an array, and you need to pass them into a charting library that expects x, y, z as separate arguments, the spread operator is your best friend.

It's also incredibly common when cloning arrays to avoid mutating the original data:
const newArr = [...oldArr];

Using spread is generally preferred over the older Math.max.apply(null, arr) syntax, which was the "hack" we used before ES6. It's cleaner, more readable, and tells the next developer exactly what's happening.

Key Takeaways

- Math.max() expects a list of numbers, not an array.
- The spread operator (...) "unpacks" an array into individual arguments.
- Using Math.max(...arr) is the cleanest way to find the highest value in a small-to-medium array.
- Be careful with massive arrays to avoid stack overflow errors.
- Always consider what happens if the array is empty (-Infinity).