FAQ: Iterators - The .forEach() Method

4 posts were split to a new topic: Why does fruits change to fruit?

9 posts were split to a new topic: Logic behind forEach and callback functions

4 posts were merged into an existing topic: What is the syntax for arrow functions?

2 posts were split to a new topic: What is the $ in the string doing?

3 posts were split to a new topic: Did I miss anything?

2 posts were merged into an existing topic: Why does .forEach() return undefined?

Hey all,

Having taken several Python courses in the past, I was a little confused by the JS for loop (I since understand how it works) because you iterate over the indices. The .forEach() method hits a little closer to home as it allows you to iterate over the actual values of an array.

In the Mozilla documentation I came across another for loop that reminds me of the Python for loop (and the for…in loop for objects:

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

for (let fruit of fruits) {
  console.log(`I want to eat a ${fruit}`)
}

This will print the exact same result to the console as:

fruits.forEach(fruit => console.log(`I want to eat a ${fruit}`));

namely:
I want to eat a mango
I want to eat a papaya
I want to eat a pineapple
I want to eat a apple

Is there any preference or reason why to choose the forEach() method over the for…of loop?

Thanks,
Twan

good question, honestly i don’t know. Thankfully google can find us some good resources to help us:

https://codeburst.io/foreach-vs-for-of-vs-for-in-tug-of-for-d8f935396648
https://thecodebarbarian.com/for-vs-for-each-vs-for-in-vs-for-of-in-javascript

forEach() gives a nice readable expression with no overt iteration. It also lets us access both value and index in one stroke. Empty elements are ignored.

It should be noted that we cannot break a forEach loop. Being as it is exclusively an Array method, we can expect some optimization, as well.

Because it is an iterator that takes a callback, we can write standalone functions that make for very readable code.

const toEat = x => console.log(`I want to eat ${x}.`);

fruits.forEach(toEat)

Hello there! I am having trouble with the first lesson.
The excersice says that we need to do the following:

Iterate over the fruits array to log I want to eat a plus the name of each fruit to the console. For example, I want to eat a mango .
You may use any form of callback you prefer.

I am using arrow function to write the code in less lines, it looks like this:

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];
fruits.forEach(fruitsList => console.log('I want to eat ' + fruitsList));

And the console correctly logs:

I want to eat mango
I want to eat papaya
I want to eat pineapple
I want to eat apple

But I am getting this error:

In your callback function do you console.log() to print 'I want to eat _____ ? In the blank, you should concatenate or interpolate the element in fruits array?

Is it because it is expecting of me to use a create a function that logs the elements in the array with the interpolated text and use it as a callback function in the .forEach()?

Update:
I already tried like this and I am still getting the same error:

const printList = elementInList => {
  console.log(`I want to eat ${elementInList}`);
}

fruits.forEach(printList);
1 Like

Did you try with a full stop in the text output?

`... to eat ${x}.`

Why would we need a full stop?
It is not what was taught in the lesson.

1 Like

That’s because the lesson was not about grammar and punctuation, but about the forEach() iterator. The instructions are clear about how the output text is composed, including the full stop that ends a sentence, as one would expect.

Try to do an arrow function but its not working…

fruits.forEach(const frut = fruit => {console.log(`I want to eat a ${fruit}.`)})

looking at the documentation of foreach:

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

i see differences

why const frut =? What it the purpose of that code

1 Like

I get it, its just how i use to write arrow functions for previous lessons.

Callbacks have been massively under explained in this course and I’m not understanding this either because of it (quite frustrating).

Can someone explain where ‘groceryItem’ comes from for this part?

I understand that it’s individual indexes of the array but what is telling the computer that?

Shouldn’t it be groceries [i] or something?

groceryItem is not an index, its a value from the array.

simply said, .forEach loops overs the array, and at each iteration calls your function, passing the current value to the parameter of your function.

I thought an index was a value from the array? very confusing.

Where does groceryItem come from then? What defines it, how does the computer know what it is?

no, the index is the position of the value in the array.

so for example:

const = ['a', 'b', 'c']

a is the value at index 0, b is the value at index 1 and so forth

Are you familiar with functions, parameters and arguments? groceryItem is a parameter, which gets its value from argument at function call. The call is done by .forEach method.

1 Like