Now to conclude that part about loops, I want to dive into two important keywords which can help you
control your loop execution
and that's the break
and the continue keyword. We saw the break keyword already in our switch statement, there
we have break to avoid that fall through mechanism, we can also use break inside of loops to leave the
loop execution, to stop the loop execution earlier than it normally would,
so to kind of cancel loop execution. How does that work?
Now let's say we only want to output one log entry.
Well of course there are various ways of achieving this but one way would be to simply add a break
keyword here, maybe
after this i++ thing, doesn't really matter for this example though.
Now what this will do is it will tell Javascript and it works in any loop
by the way, not just in for/of loops but in all loops I showed you,
it tells Javascript stop this loop execution of the loop,
I'm calling this in.
So if you're calling this in a nested loop, it will stop that nested loop execution but continue with
the outside one, which of course means that for the next iteration of the outside one, a new inside
one is started and that will then run
but the currently running inside nested loop will stop when you call break. If you call break in the outside
loop,
well then this outside loop is finished and therefore there also will be no next run of the inside
loop because that only runs for every iteration of the outside loop
and since we break out of that and we finish that outside loop, there is no more inner loop execution
too.
So break stops the loop in which you call it,
so in which you call it directly, so you have to not have it in a nested loop but directly in that
loop as we do it here,
this break call here will stop this outer for/of loop.
The result of that is that if we save that and we go back to our program and I then attack and have a
strong attack and I then click show log, we only see one entry here. We see our attack,
we don't see the attack by the monster,
we don't see our strong attack or the response on that by the monster,
we only see that very first event
we wrote to the log,
so that very first attack we launched,
that's how break works.
Now we could actually use that to make sure that whenever we pressed the show log button, we only output
one event at a time
but of course not always the same one, that would be great
and for that, we can add a new global variable where we keep track of the last event we logged. So for
that, I'll add a new variable up there,
last logged event or last logged entry and initially that's not even zero,
that's minus one or just not defined let's say
and then we can use the last logged entry down there in our loop where we log the entries to set
last logged entry equal to i,
so in this case to zero. Now we can add an if statement here and say if last logged entry is not set,
so we'll add an exclamation mark here, so if this is undefined or falsy at the beginning which it is or if
last logged entry is set and it's equal to i, then I want to log my event,
so we move
that code into this if statement and then since we now logged something, we update the last logged entry
to that i number and thereafter we increment i and we break. This is still not the finished logic,
now if I save that and I go back to the web page and I attack and strong attack and I click show log,
we see that entry and if I click show log again,
we see that same entry still. So we can add that same entry multiple times, so we haven't changed a
lot here.
The reason for that is that we set last logged entry here to i, so to zero for the first run
and here we check if we have no last logged entry or if last logged entry is equal to i but we
always start at i zero, so this is always true and therefore we always log this. Now the trick is actually
to change this here to look for last logged entry to be smaller than i and if we do that and we
go back to the page, I can click attack and strong attack and then show log and we have one entry but
if I click it again, we still keep on printing results.
The reason for that is that this change here will actually yield true if last logged entry is undefined
but also if it's zero because as you learned, zero is a falsy value, it's treated as false.
So this here with the exclamation mark actually yields true and therefore executes this code
if last logged entry is zero. So I'll combine this first condition here with another condition that last
logged entry is not equal to zero.
So if this is falsy but it's also not falsy because it's equal to zero or last logged entry simply
is smaller than i,
then we want to log something.
So now with that, if we go back to the web page and we attack and strong attack and I click show log, we
have an entry here but if I click show log again, now you'll see I only print my stripes here, my dashes
but I don't print any real log entries anymore
and the reason for that is that we don't make it into the if block anymore and that makes sense because
i always starts at zero when printLogHandler is executed which is the case for every click,
so that's not incremented across clicks, for every click
it restarts at zero.
Last logged entry however does change with every click,
it starts uninitialized and then after that first log we printed, it is set to i which is zero,
so it's zero after the first click and thereafter this code never runs again due to the logic we wrote
here.
So now the next step is to move
break into this if statement so that the loop actually continues and has a chance of reaching a new
i.
So now if we save that and we reload and then we attack and strong attack and now we click show log,
we have that first event player attack with index 0, if I click show log again with index at 1 which is the
monster attack and now if I clear that, we can still continue pressing this button,
now we have some logic that allows us to log event by event with every new click until we have no more
events which is when we only print our dashes.
Now of course, you could add another if check here to make sure you don't execute any logic in here
if we have a last logged entry that is greater than the length of our battle log in the end
which means we have no more entries,
you could do that. So that's the break keyword,
it allows us to break out of a function execution, for example to do something like this
but you can do it for whatever reason you have in your code.
It allows you to break out of a loop execution earlier than it normally would finish,
so before the loop really finished, in this case whenever we printed something to the console but of
course you can use break for whatever reason you have, doesn't have to be because you only want to log
one thing at a time to a console,
could be any reason why you want to stop a loop iteration before it really is done,
so that's break.
Now I mentioned we also have another keyword and that's the continue keyword.