JavaScript Spread Operator — What does this print?

Why This Question Matters

If you see console.log([..."hello"]) in a technical interview or a codebase, it’s usually a litmus test for how well you actually understand modern JavaScript.

On the surface, it looks like a weird typo. But it's actually combining two powerful features: the spread operator and iterables. Most developers know how to spread an array into another array, but they get tripped up when the source isn't an array.

Understanding this is the difference between guessing how JS works and actually knowing how the engine handles data structures.

Understanding the Code

Let's break this down. We have an array literal [] and inside it, we have ..."hello".

The ... is the spread syntax. Its job is to take an iterable object and expand its elements one by one. Now, here is the part that catches people: a string in JavaScript is an iterable.

When the JS engine sees ..."hello", it doesn't treat the string as a single block of text. Instead, it treats the string as a sequence of individual characters. It's essentially saying, "Go through this string, grab every single character, and place them as individual elements inside this new array."

Internally, the spread operator calls the string's default iterator. It loops through the string and pushes each character into the array slots.

// This:
const result = [..."hello"];
// Is functionally very similar to doing this:

const result = Array.from("hello");

Finding the Correct Answer

The correct answer is Option B: ['h', 'e', 'l', 'l', 'o'].

Why not the others?

The spread operator "unpacks" the string. Since "hello" has five characters, you get an array with five separate string elements.

Common Mistakes Developers Make

The biggest mistake is assuming the spread operator is only for arrays. You'll see a lot of devs use split('') to turn a string into an array. While "hello".split('') gives you the same result here, it behaves differently with Unicode characters.

This is where the spread operator actually wins. If you have an emoji or a special character (like a multi-byte character), split('') will break it.

Check this out:

const emoji = "🚀";

console.log(emoji.split('')); // ['\ud83d', '\ude80'] - Broken!

console.log([...emoji]);      // ['🚀'] - Correct!

The spread operator is "Unicode-aware." It respects surrogate pairs, whereas split('') just chops the string by 16-bit code units. If you're building an app that supports international languages or emojis, using ... is the professional way to handle string-to-array conversion.

Real-World Usage

In a production environment, you aren't usually spreading "hello" just for fun. You use this pattern when you need to perform array operations on a string.

For example, if you need to reverse a string, JavaScript doesn't have a String.reverse() method. It only has Array.reverse(). The cleanest way to do this is:

const reverseString = (str) => [...str].reverse().join('');
console.log(reverseString("JavaScript")); // "tpircSavaJ"

You'll also see this when dealing with NodeList or HTMLCollection returned by the DOM. If you want to use .map() or .filter() on a list of elements, you can't do it directly because they aren't true arrays. Spreading them into an array is the fastest way to "cast" them:

const buttons = [...document.querySelectorAll('button')];
buttons.forEach(btn => btn.disabled = true);

Key Takeaways