How to find the longest word in a string using JavaScript
I’m a non-professional, self-taught web developer. I decided to start learning to become a developer when I read about freeCodeCamp. freeCodeCamp’s syllabus will soon change somewhat since I started it and while not live, their beta map to become a developer is a huge expansion on the current one.
My aim with this (and if I write more, any future) article is to re-visit my early JavaScript learning, to cement the building blocks I use now in much more complex situations and to help some people who are in the situation I was in during the early stages of my learning. If you are also following freeCodeCamp then like me you probably end up googling a lot of the answers! Don’t worry I felt like I was cheating too but keep at it.
In this one, I’m going to show you two ways to tackle the 4th Basic Algorithm Scripting challenge Find the Longest Word in a String. The challenge is to return the length of the longest word in a sentence (as a number). As with most things in coding there is more than one way to skin a cat. There is no right way or wrong way. Some are shorter than others, some are easier to read than others. Some are faster. We’re not going to concern ourselves with performance or length just understanding a couple of ways to solve this challenge and forego shortness in favour of readability.
The example sentence I’m going to use taken from the challenge is “The quick brown fox jumped over the lazy dog”
Method 1: Using sort
The sort method for arrays sorts an array using the result of a compare function supplied to it.
We have a sentence which is a string. First, to work with it we need to get it into an array and so we use String’s split() method. split() takes a separator as an argument. The separator is where we want to split the string. In this case that will be a space
function findLongestWord(str) {
const stringArray = str.split(" ");
return stringArray;
}findLongestWord("The quick brown fox jumped over the lazy dog");// ["The", "quick", "brown", "fox", "jumped", "over", "the", "lazy", "dog"]
Now we have an array containing each word in our sentence as it’s own separate string. Arrays are infinitely easier to work with than strings in programming.
Next we sort our array of words by the length of each word. Going back to our sort method, we know this uses a compare function in order to sort an array’s contents. We want to compare the length of two words and then move on to the next, compare and so on. Our compare function then would simply return the words in order of length
compareFunction(a, b) {
return a.length < b.length;
}Plugging this function into our sort method we can re-order the array by word length and the longest word (“jumped”) will come first. We don’t need to give the compare function inside our sort method a name
function findLongestWord(str) {
const stringArray = str.split(" ");
const orderedArray = stringArray.sort((a, b) => {
return a.length < b.length;
}); return orderedArray;
}findLongestWord("The quick brown fox jumped over the lazy dog");// ["jumped", "quick", "brown", "over", "lazy", "The", "fox", "the", "dog"]
Now, we just return the length of the first word (0-index of the array) to complete the challenge
function findLongestWord(str) {
const stringArray = str.split(" ");
const orderedArray = stringArray.sort((a, b) => {
return a.length < b.length;
}); return orderedArray[0].length;
}findLongestWord("The quick brown fox jumped over the lazy dog");// 6
Method 2: Using reduce
The reduce method for arrays applies a function to each element and an accumulator to reduce it to a single value.
First, as above in the sort example we use split again to get our string into an array of words.
Reduce returns a single value. The single value we want to return in this case is the longest word. Using an if/else block inside the reduce method will take the first word then the second and see which is longer. Then it will take the result of this (the accumulator) and compare it to the third and so on finally returning the longest word
function findLongestWord(str) {
const stringArray = str.split(" ");
const longestWord = stringArray.reduce((a, b) => {
if(b.length > a.length) {
return b;
} else {
return a;
}
});
return longestWord;
}findLongestWord("The quick brown fox jumped over the lazy dog");// “jumped”
Now we just need to tack on .length to complete this challenge
function findLongestWord(str) {
const stringArray = str.split(" ");
const longestWord = stringArray.reduce((a, b) => {
if(b.length > a.length) {
return b;
} else {
return a;
}
});
return longestWord.length;
}findLongestWord("The quick brown fox jumped over the lazy dog");// 6
As I am using ES2015’s const and arrow functions I will show you a way of shortening the if/else code inside the reduce block using a ternary operator. I will admit, these confused the hell out of me the first time I saw them. I just couldn’t get my head around it which seems ridiculous as I use them all the time now! I think it’s because the return part comes first and then you compare, we see only one return. In an if/else we compare then return one of the things we compared and we see a return for each option
function findLongestWord(str) {
const stringArray = str.split(" ");
const longestWord = stringArray.reduce((a, b) => {
return (b.length > a.length) ? b : a;
});
return longestWord.length;
}findLongestWord("The quick brown fox jumped over the lazy dog");// 6
The thing to note is that the ternary operator is ultimately returning the same as an if/else statement just in one line of code.
That’s it. As mentioned there are other ways, shorter ways, some would say better ways but I hope somebody finds some use from this post. If you have any comments please leave them below!
As an aside freeCodeCamp do not have this famous sentence quite correct. As a pangram it should contain all letters of the alphabet so the actual sentence is “The quick brown fox jumps over the lazy dog” so as to include a ‘s’!
