Jonas: In this lecture we will loop over an array
using the forEach method.
Now we had already learned
how to loop over an array using the for of loop,
but the forEach method is really fundamentally different.
And from now on we will start working
with our bank account data,
but still in a very simplified way.
So let me get this data here into the present lecture
so that we can see what we're actually working with.
So let me comment it out from here
and just move it here.
So let's say that we wanted to loop
over this movement's array,
in order to print a message
for each movement in this bank account.
So these positive values here are basically deposits
and the negative values are withdrawals.
And so we can print something to the console
saying whether the user deposited or withdrew some money,
and let's actually start by doing this using a for of loop,
just so that we can then compare
the forEach loop to this one.
So let's create a variable movement of movements
and then we will log something to the console
according to the movement value.
So basically if the current movement is greater than zero
then log to the console, you deposited,
and then the movement and else
you withdrew
and then the movement again.
And actually we can use a nice maths function here
which is to take the absolute value,
so basically removing the sign.
So let's see,
and yeah.
That looks nice.
So of course this solution here works perfect,
but now let's finally learn how to use the forEach method
to achieve the exact same thing
but in my opinion in an easier way.
So to loop over the movements array
we use forEach,
and that's with a capital E, don't forget that.
And then the forEach method
actually requires a callback function here.
So forEach is technically a higher order function
as we learned in the last section,
which requires a callback function
in order to tell it what to do.
So it's the forEach method here
that will call this callback function.
We are not calling it ourselves as always.
And that's of course important to keep in mind once again,
But when exactly will forEach actually
call this callback function.
Well what the forEach method does is to loop over the array,
and in each iteration it will execute
this callback function here.
Also as the forEach method calls this callback function
in each iteration it will pass in the current element
of the array as an argument,
and we can specify that here
and let's call that again movement.
So again, each time this callback here is called,
so in each iteration,
it will receive the current element of the array
as an argument.
And here we can of course give this any name that we want,
but I'm just calling it movement
because that's what we did up here.
And so now we can do exactly the same thing
here in this callback function.
Give it a save,
and indeed we now get the same result twice,
so,
let me just
add like a separator here.
ForEach.
And so, yeah.
Indeed we get the same result
and also get ourselves more space
and yeah
so that's essentially how the forEach method works.
So basically behind the scenes, in iteration zero,
it will call this function here
so an anonymous function in this case without a name,
let's just call it function,
and it's gonna call it with the value of 200
then in the next iteration it will call it
with the value of 450
then with the value of 400, right.
And so on and so forth.
Until it reaches the end of the array.
And this part of the forEach function
passing in the current element of the array,
here like this, this and this
is especially important to understand.
So basically this is exactly the concept that I explained
In the last section
when I said that we use a callback function
to tell another higher order function
exactly what it should do,
and so in this case we tell forEach
that in each iteration
it should log one of these two strings here to the console
So we give the forEach method instructions
by giving it a callback function
which contains these instructions, alright.
And I really know and understand
that this is quite a hard concept to wrap your head around.
But if you just continue using this from now on
then eventually it will start to make sense, believe me.
Now anyway, which of the two version
do you think is cleaner
and easier to write and easier to read.
Well I think that we can both agree
that it is the forEach method, right.
And maybe you don't agree with that
and of course that's okay,
as I keep mentioning
it's always good to develop your own style of programming.
But using the forEach method here
and especially understanding the logic behind it here
with the callback function,
is still really important for all the other methods
that we're gonna learn later.
Anyways let's now learn some more stuff
about the forEach method,
because we are not done yet.
So what if we actually needed access
to a counter variable here.
So just like we can access the current index
off the array here in the for of loop.
So remember how we did that with for of,
let's just rewrite this part.
So in this case we loop over
movements dot entries,
remember?
So entries is in fact just another array method
and it returns an array of arrays,
remember, which in the first position
contains the current index
and then the value itself.
And so this is how we access
the counter variable in the for of loop.
And then here in our string we could use that to say
for example,
movement and then the number of the movement.
So that's the counter
which starts at zero, and so we just add one to that
and so
well something went wrong
so that's in line 121,
so unexpected token.
That's because we didn't open it here again,
so we were missing this part here.
And now this looks a lot nicer,
with the number of the movements here.
And so let's now do the same in the forEach method here.
And here, fortunately, it's a lot easier
to get access to the current index.
So to understand how it works we need to remember once more
that it is the forEach method
who calls this callback function in each iteration.
And as it calls this function
it also passes in the current element of the array,
but actually that's not all it passes in
in fact forEach passes in the current element,
the index and the entire array that we are looping.
And so therefore we can specify them here
in our parameter list.
So let's say index and array,
now of course we can just use one, like we have been doing,
or we can just use two,
or we can use all three together.
And as always the names here do not matter at all,
but what does matter is the order.
So the first parameter always needs to be
the current element,
the second parameter always the current index
and the third one always the entire array
that we are looping over.
Because that's the order in which the arguments,
so the actual values, are passed into our callback function.
Okay.
So now let's just copy this here,
so we can do the same here.
Give it a save, and oh.
Here we called it index and not I.
And in fact in the real world we actually use
shorter names.
So let's just call this one I,
this one R,
and this one here mov.
Which is just a shorter abbreviation of movement.
And so this is quite a common pattern
to just abbreviate a little bit.
So let's replace these three here with mov,
give it a save.
And now it does look the same
as with the for of method.
But I hope you can see
that it's a lot easier to get the current index
here in forEach.
Just notice that the order of the parameters is different
in both these scenarios.
So in forEach the first value here is the current element
and the second one is the index.
While when we use here the entries in the for off loop
then the first element is the index
and the second value is the current array element.
So just don't forget that here in this case.
So always first the current element and then the index.
Okay.
And this is how we loop over arrays
with the forEach method.
Now when should you use forEach
and when should you use the for of loop.
Well one fundamental difference
between the two of them is that you cannot break out
of a forEach loop.
So the continue and break statements
do not work in a forEach loop at all.
So instead, forEach will always loop over the entire array
and there is nothing that you can do about it.
So if you really need to break out of a loop
then you have to keep using the for of loop,
but other than that
it really comes down to your personal preference.
Just like so many other things in JavaScript.
So every programming language always has
many different ways or different tools
to achieve the same thing.
And specially as more things
keep getting added to the language
there will always be more options to achieve the same result
All right, and with this we wrap up this lecture.
SO in my opinion this is a really brilliant
and powerful mechanism,
but I know that it's also rather complex
to wrap your head around this, isn't it?
And it actually took quite some time for me
to fully understand this myself, back in the day.
So please don't become frustrated with this,
it will all become obvious with the practice.
So just keep using this and then you will be fine.
Once you do understand exactly how this works
so specially this mechanism of the callback
and of the passing arguments into this callback here
so once you understand this fundamental mechanism
then working with all other array methods
in this section will become really easy.
Because most of them follow the exact same principle
of the callback function that we just explored here.
So please review this lecture carefully, and yeah.
If you really understand
the role of the callback function here
then just move on to the next video.
See you there.