Original subtitles

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.