Why 'Find the Longest Word in a String' is a great beginner JavaScript exercise

One of my mentees is struggling with this FreeCodeCamp exercise.

• I recall struggling, too.
• If we did, then you might be as well.

I hope this post helps you feel less alone in your quest to master frontend development

Want to try it first? Here is a direct link to the exercise

The desired outcome is clear:

• Return the length of the longest word in the provided sentence.

After clicking to 'Get a hint', the related forum post conceals four possible solutions:

1. The first matches the approach I took
2. The second uses one of the popular higher-order functions available on all arrays
3. The third is concise, eloquent, and uses another popular higher-order function available on arrays
4. The fourth uses recursion

Let's review the task programmatically:

• Given a string
• Return a number
• Derived from a comparison of parts of the string

Solution 1 is the most imperative: lots of code, unnecessary variables, and the typical for loop

• The string is split into an array of words
• A variable is declared and initialized to track the length of the longest word
• The array is iterated and each time the length of the word is compared to and, if greater than, set as the new value of the tracking variable
• The value of the tracking variable is returned, as it should now store the number corresponding to the length of the longest word in the string

Solution 2 works the exact same way, but much more declaratively

• The result of a lengthly expression is returned...
• The string is split into an array of words
• The reduce method is invoked with two arguments: an anonymous function and an initial accumulator value set to 0
• The anonymous function uses Math.max to compare the accumulated value with the length of the word in the current iteration of the loop
• The value of the accumulator is returned, as it should now store the number corresponding to the length of the longest word in the string

Solution 3 uses all the right ingredients to make a delicious and hearty JavaScript soup, and fits easily on one line

• The result of a relatively short expression is returned...
• Math.max is invoked. It will receive multiple arguments as a result of the ensuring expression.
• The original string is split into an array of words
• That array is transformed using map: each word is replaced with a number - the word's length
• The mutated array of numbers is spread so that each number is passed as an argument to Math.max
• The number corresponding to the length of the longest word in the string is returned once again

Solution 4 uses recursion. Give it a round of applause. Let's wrap this post up.

This exercise wonderfully demonstrates the versatility of JavaScript.

As a beginner, you can build small programs that serve your needs. You'll likely write more code than is necessary, but that's a trade-off of learning and practicing.

As you become more familiar with JavaScript's built-in capabilities and object methods, your small programs will get even smaller and become far more readable.

If you haven't used FreeCodeCamp.org, I encourage you to try it.

• It's free.
• It will teach you test-driven development in addition to the fundamentals of frontend development.
• And it will make you think critically, struggle valiantly, and reward you handsomely for your efforts