JavaScript Array.map() — What is the Output?

Why This Question Matters

If you're just starting out with JavaScript, you'll see .split() and .map() everywhere. They are the bread and butter of data transformation. But there's a gap between "I've seen this syntax" and "I actually know what's happening to the data."

This specific challenge tests whether you understand how to chain methods to transform a string into an array, and then that array into a different set of values. It’s a classic junior-level hurdle because it requires you to track the "shape" of the data as it moves through the code. If you lose track of whether you're dealing with a string or an array, you'll pick the wrong answer every time.

Understanding the Code

Let's look at the snippet again:

const sentence = "the quick brown fox"
const words = sentence.split(" ")
const lengths = words.map(w => w.length)
console.log(lengths)

Here is exactly what's happening under the hood.

First, we have a simple string: "the quick brown fox".

Then comes sentence.split(" "). The .split() method takes a separator—in this case, a single space—and chops the string into pieces wherever that separator appears. Those pieces are then tossed into a new array.

So, after line 2, words becomes:
["the", "quick", "brown", "fox"]

Now we hit the .map() method. This is where a lot of beginners get tripped up. .map() doesn't change the original array; it creates a *new* array by running a function on every single element of the existing one.

The arrow function w => w.length tells JavaScript: "Take each word (w), grab its .length property, and put that number into the new array."

- "the" has 3 characters.
- "quick" has 5 characters.
- "brown" has 5 characters.
- "fox" has 3 characters.

The result is a clean array of integers.

Finding the Correct Answer

The correct answer is Option A: [3, 5, 5, 3].

Why? Because we followed the data transformation pipeline perfectly. We went from String $\rightarrow$ Array of Strings $\rightarrow$ Array of Numbers.

If you saw options like 3553 (a string) or [ "3", "5", "5", "3" ] (strings inside an array), those are wrong because .length always returns a number, and .map() always returns an array. If you saw an option that kept the words but added the numbers, you're thinking of a different logic entirely.

Common Mistakes Developers Make

When I'm reviewing code for juniors, I see a few recurring mistakes with these methods.

1. Confusing .map() with .forEach()
Some developers try to use .forEach() to create the lengths array. They’ll create an empty array, loop through the words, and .push() the length. While that works, it's verbose and "imperative." Using .map() is the "functional" way—it's cleaner and less prone to side-effect bugs.

2. Forgetting that .split() returns an array
Beginners sometimes think .split() modifies the original string. It doesn't. Strings in JavaScript are immutable. If you don't assign the result of .split() to a variable (like words), the result just vanishes into the ether.

3. The "Empty Space" Trap
What happens if the sentence was "the quick" (with two spaces)?
sentence.split(" ") would produce ["the", "", "quick"]. That empty string would have a length of 0, resulting in [3, 0, 5]. In a real project, you'd probably want to use a regular expression like .split(/\s+/) to handle multiple spaces, but for a basic quiz, a single space is the standard.

Real-World Usage

You won't often be counting the letters in "the quick brown fox" in a production app, but you will be transforming data constantly.

Imagine you're building a UI for a blog. You might get a comma-separated string of tags from an API: "javascript,webdev,tutorial".

To render those as individual badges in your React or Vue component, you'd do exactly what we did here:
1. .split(",") to turn the string into an array of tags.
2. .map() to wrap each tag in a HTML or a Component.

Or imagine a search bar where you need to validate if a user has entered too many words. You'd .split(" ") the input and check the .length of the resulting array.

Key Takeaways

- .split(separator) turns a string into an array.
- .map(callback) transforms every element in an array and returns a brand new array of the same length.
- .length is a property, not a method, so it doesn't need parentheses.
- Always track the data type at each step. If you know you're moving from a string to an array to a number, you can't be fooled by the wrong options.