Can someone please explain some things related to the for.Each() method?

Question

I'm learning Javascript and at the moment just going through all the little chapters in w3schools about it. Even though I've been having a mostly good experience, sometimes the explanations are not thorough enough and I am left confused. My problem wasn't the forEach method itself, but instead what came along with it. Here I will insert the code given by w3schools:

 <p>Calls a function once for each array element.</p> <p id="demo"></p> <script> var txt = ""; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); document.getElementById("demo").innerHTML = txt; function myFunction(value, index, array) { txt = txt + value + "<br>"; } </script>

There are two main things that I don't fully understand. Firstly, the line txt = txt + value + "<br>"; confuses me a bit. I am confused as to why they added txt into the addition instead of just txt = value + "<br>"; . My second confusion is in the same line actually. You see, every time the code is executed, the value that is displayed changes. How does the program know to change the value when all that is specified is value ? Wouldnt it just display the same value? I appreciate every response:)

Answer 1

Starting with your second confusion:

The forEach function takes a function as its argument, which, in your case, is myFunction . Basically, forEach iterates over the array it is called on and for every iteration, that is, for every item in the array, it calls myFunction and passes the current item, its index within the array, and the array itself as arguments to this function. So myFunction is called multiple times, each time with different values for its arguments.

Regarding your first confusion:

The goal of the demo is to construct a string which consists of all the items in the array, and each item followed by a <br> element. The pseudocode for this would look something like this:

For every item in array:
    append item to txt
    append <br> to txt

To append to txt in JavaScript you use the + operator: txt = txt + value or in short txt += value .

Answer 2

Regarding your first confusion: The goal is to append every value to the current text, so you have to append the current value (and a <br> ) to the current text before appending it. Otherwise the text would be overwritten. Also possible is txt += value + "<br>" which will internally do what you see in the example.

Secondly the value which is used is a method parameter of myFunction . When using the function in numbers.forEach(myFunction) the function will be called once for every value inside the numbers array.

Sorry if I didn't quite get your second confusion.

Answer 3

forEach is calling that method (myFunction) as it iterates through the elements of the array (which there are 5 elements to it). For example, let's just plug in values so you can see what is happening the very first time it runs:

• myFunction(45,0,numbers)

This is because the first element's value is 45, it's index is zero, and the array itself is numbers. The next time it runs it calls:

• myFunction(4,1,numbers)

This is because the second element's value is 4, it's index is one, and the array itself is numbers..... and so on.

As to why it says txt = txt + value + "<br>"; This is so that it can incrementally build the txt variable to contain all of it, as it processes them one at a time. Let's see what happens with the same first two times as above.

The first time it runs, the value of txt is "" (nothing). So it'll be

• txt = "" + 45 + "<br>";

The second time it runs, the value of txt is now "45<br>". So it'll be

• txt = "45<br>" + 4 + "<br>";

This makes txt now "45<br>4<br>". When this is done doing all of them, you can see it'll contain "45<br>4<br>9<br>16<br>25<br>".

Answer 4

First of all best wishes to you learning JS. My advice to you will be to follow MDN for getting a better understanding of the concepts. Coming back to your question:

why they added txt into the addition instead of just txt = value + "<br>";

So, as @charlietfl pointed out in the comments, simply doing txt = value + "<br>"; would overwrite the value in txt for every iteration so you'll end up having only 25 + "<br>" as will be the data in value

How does the program know to change the value when all that is specified is value?

The forEach method calls myFunction once for each element in array and the value parameter of myFunction holds the value of the current element being processed in the array, index holds the index of current element in the array and array holds the complete array on which the forEach function has been called. So, your code is equivalent to:

 <p>Calls a function once for each array element.</p> <p id="demo"></p> <script> var txt = ""; var numbers = [45, 4, 9, 16, 25]; /* numbers.forEach(myFunction); The above for each can be replaced by this */ for (var index=0; index < numbers.length; index++){ myFunction(numbers[index],index,numbers); } document.getElementById("demo").innerHTML = txt; function myFunction(value, index, array) { txt = txt + value + "<br>"; } </script>

You can read more about the forEach method at MDN - forEach and Medium

Answer 5

If txt were not on the right-hand side of the assignment, the code would only display the value of the last element of numbers —25.

The forEach method calls myFunction once for each value (at index ) in array ; so, the method would not repeatedly display the same value unless every value in numbers were the same.