Help with Iterator problem for.Each

Get Help
1

Hi there,

I’m working on the Grammar Checker problem and I was wondering if someone could help me explain this for.Each iterator logic. Everything works but I just don’t understand what’s happening. I made a Loom explaining my confusion:

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. I stopped at Riverbank State Park to take some artsy photos. 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! I was already very tired by the time I got to the other side. An hour later, I reached Greenbrook Nature Sanctuary, an extremely beautifull park along the coast of the Hudson. Something that was very surprising to me was that near the end of the route you literally cross back into New York! At this point, you are very close to the end.';

let storyWords = story.split(' ');
let unnecessaryWord = 'literally';
let misspelledWord = 'beautifull';
let badWord = 'freaking';

let count = 0;
storyWords.forEach((word) => {
  //count up with an array
  count++;
});

console.log(count)
1 Like
2

let storyWords = story.split(' ');

This will split the story string using a blank space ' ' as the separarator, so that you will end up with an array of strings (words).

['Last', 'weekend,', 'I', 'took', ..., 'close', 'to', 'the', 'end.']

Then let count = 0; declares and initializes the count variable.

The documentation is a useful resource to learn about the parameters, return values, examples, special remarks etc.
Documentation for forEach() method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

storyWords.forEach((word) => {
  count++;
});

The forEach method will iterate over the storyWords array. The forEach method expects you to provide a function. There are different ways you can provide a function. You can use an arrow function (as is being done in the code you have posted), or you could provide the name of a callback function (in case the function has been defined elsewhere), or you could write an inline function (using the function keyword). See the Syntax section in the documentation for the different variations.

In the code you posted, an arrow function is being used. As the forEach method iterates over the storyWords array, in each iteration an element of the array will be passed to the arrow function. This element will be used as the argument and the function will be executed. The arrow function in your snippet has a parameter named word. There is nothing special about this name. You could pick a different name, but instead of random names, it is a good idea to pick names which contribute to better readability. In this case, word is a good choice as it helps the reader understand what sort of data is being processed. Suppose you had an array of numbers and you used the forEach method on this array, then a parameter name like num or n or something similar would be a better choice.

count++; is shorthand for count = count + 1;

So, in every iteration of the forEach, an element of the storyWords will be provided as the argument to the arrow function. The element will be assigned to the word parameter and then the body of the arrow function will be executed. In this specific case, the count will be incremented by 1.

Actually, in this case you aren’t doing anything with the words except counting them, so you can omit the parameter from the arrow function like so:

storyWords.forEach(() => {
  count++;
});

But, if you want to do use the elements of the array within the body of the arrow function, then the parameter is necessary:

// This will print every word in the array and increment count

storyWords.forEach((word) => {
  console.log(word);
  count++;
});

// This will print every word as well as the index 
// Since the function has two parameters, so the 
// forEach method will assign the element being processed to the first parameter
// and the index of the element to the second parameter of the function.
// See Syntax section of Documentation 
storyWords.forEach((word, i) => {
  console.log(`At index ${i}, the word is: ${word}`);
  count++;
});
1 Like
3

Very clear and well explained. I will focus on trying to understand the function syntax of .forEach because I think that was the main part that was tripping me up.

1 Like