Day 68 / 100 Days of Code: Harnessing JavaScript’s Iterative Power

Fri, September 6, 2024

Hello everyone! 👋

In a display of JavaScript prowess, today's project of a grammar checker employs iterative methods like .forEach(), .map(), and .filter() to facilitate the transformation and traversal of arrays, showcasing the strength and sleekness of JavaScript’s iterative power.

First, we're given a short story as a string; Then, the story is split into an array of words separated by spaces:

let story = 'Last weekend, I took literally the most beautifull bike ride of my life. The route is called "The 9W to Nyack" and it stretches all the way from Riverside Park in Manhattan to South Nyack, New Jersey. It\'s really an adventure from beginning to end! It is a 48 mile loop and it literally took me an entire day. It was a short stop, though, because I had a freaking long way to go. After a quick photo op at the very popular Little Red Lighthouse I began my trek across the George Washington Bridge into New Jersey. The GW is a breathtaking 4,760 feet long!.[edited for brevity]';

let storyWords = story.split(' ');

Next up, is spelling and grammar checking. These examples are single words, although this could be extended with a .map() of common misspellings and language patterns:

let unnecessaryWord = 'literally';
let misspelledWord = 'beautifull';
let badWord = 'freaking';

To update the story, we use iterator methods we've learned, including .filter(), .map(), .findIndex(), and .every(). Next, we remove the unnecessary word 'literally' using .filter() with an arrow function--as is common post-ES6. Note that storyWords is modified in place:

storyWords = storyWords.filter(word => {
  return word !== unnecessaryWord;
});

Next, spelling corrections are applied via the .map() function, noting that .map() could be used more comprehensively with common misspelling and correction pairs:

storyWords = storyWords.map( word => {
  return word === 'beautifull' ? 'beautiful' : word;
});

In the given scenario, one's grandmother is expected to read the passage, so the 'bad' word 'freaking' is replaced using .findIndex() and direct indexing.

let badWordIndex = storyWords.findIndex(word => word === badWord);
storyWords[badWordIndex] = 'really';

Finally, a check is performed in consideration of reading ease, such as you may've seen in a Flesch reading score based on average word length; Here we're given that there's one word over 10 characters long, and will replace with 'glorious', using .forEach() to find the index, followed by direct replacement:

let index = 0;
storyWords.forEach(word, i) => {
  if (word.length > 10) index = i;
});
storyWords[index] = 'glorious';

Clean and readable code is crucial not only because it makes code easier to understand and maintain, but it also reduces the likelihood of errors. This is especially important in collaborative environments where multiple developers work on the same codebase. Iterative methods like .forEach(), .map(), and .filter() are preferred over traditional loops because they offer a more declarative approach to coding. This means you can express what you want to achieve without detailing the control flow, leading to code that is more concise, easier to read, and less prone to errors.

Happy coding! 🚀