1
00:00:02,410 --> 00:00:07,690
Now to conclude that part about loops, I want to dive into two important keywords which can help you

2
00:00:07,690 --> 00:00:09,850
control your loop execution

3
00:00:09,940 --> 00:00:11,170
and that's the break

4
00:00:11,260 --> 00:00:17,710
and the continue keyword. We saw the break keyword already in our switch statement, there

5
00:00:17,710 --> 00:00:25,240
we have break to avoid that fall through mechanism, we can also use break inside of loops to leave the

6
00:00:25,240 --> 00:00:30,310
loop execution, to stop the loop execution earlier than it normally would,

7
00:00:30,430 --> 00:00:35,710
so to kind of cancel loop execution. How does that work?

8
00:00:35,720 --> 00:00:39,690
Now let's say we only want to output one log entry.

9
00:00:39,710 --> 00:00:46,550
Well of course there are various ways of achieving this but one way would be to simply add a break

10
00:00:46,550 --> 00:00:49,090
keyword here, maybe

11
00:00:49,120 --> 00:00:53,130
after this i++ thing, doesn't really matter for this example though.

12
00:00:53,170 --> 00:00:57,450
Now what this will do is it will tell Javascript and it works in any loop

13
00:00:57,460 --> 00:01:01,480
by the way, not just in for/of loops but in all loops I showed you,

14
00:01:01,480 --> 00:01:05,950
it tells Javascript stop this loop execution of the loop,

15
00:01:05,950 --> 00:01:06,840
I'm calling this in.

16
00:01:06,940 --> 00:01:13,090
So if you're calling this in a nested loop, it will stop that nested loop execution but continue with

17
00:01:13,090 --> 00:01:18,250
the outside one, which of course means that for the next iteration of the outside one, a new inside

18
00:01:18,250 --> 00:01:20,510
one is started and that will then run

19
00:01:20,560 --> 00:01:27,700
but the currently running inside nested loop will stop when you call break. If you call break in the outside

20
00:01:27,700 --> 00:01:27,940
loop,

21
00:01:27,940 --> 00:01:32,380
well then this outside loop is finished and therefore there also will be no next run of the inside

22
00:01:32,380 --> 00:01:36,320
loop because that only runs for every iteration of the outside loop

23
00:01:36,430 --> 00:01:41,800
and since we break out of that and we finish that outside loop, there is no more inner loop execution

24
00:01:41,800 --> 00:01:42,470
too.

25
00:01:42,610 --> 00:01:46,420
So break stops the loop in which you call it,

26
00:01:46,420 --> 00:01:52,780
so in which you call it directly, so you have to not have it in a nested loop but directly in that

27
00:01:52,780 --> 00:01:54,150
loop as we do it here,

28
00:01:54,170 --> 00:01:58,890
this break call here will stop this outer for/of loop.

29
00:01:59,060 --> 00:02:05,240
The result of that is that if we save that and we go back to our program and I then attack and have a

30
00:02:05,240 --> 00:02:12,430
strong attack and I then click show log, we only see one entry here. We see our attack,

31
00:02:12,470 --> 00:02:15,110
we don't see the attack by the monster,

32
00:02:15,110 --> 00:02:20,060
we don't see our strong attack or the response on that by the monster,

33
00:02:20,060 --> 00:02:22,450
we only see that very first event

34
00:02:22,460 --> 00:02:23,690
we wrote to the log,

35
00:02:23,720 --> 00:02:27,050
so that very first attack we launched,

36
00:02:27,050 --> 00:02:29,430
that's how break works.

37
00:02:29,540 --> 00:02:35,870
Now we could actually use that to make sure that whenever we pressed the show log button, we only output

38
00:02:35,870 --> 00:02:37,700
one event at a time

39
00:02:37,700 --> 00:02:40,780
but of course not always the same one, that would be great

40
00:02:40,940 --> 00:02:49,810
and for that, we can add a new global variable where we keep track of the last event we logged. So for

41
00:02:49,820 --> 00:02:53,590
that, I'll add a new variable up there,

42
00:02:53,590 --> 00:03:03,180
last logged event or last logged entry and initially that's not even zero,

43
00:03:03,190 --> 00:03:07,060
that's minus one or just not defined let's say

44
00:03:07,060 --> 00:03:16,800
and then we can use the last logged entry down there in our loop where we log the entries to set

45
00:03:16,830 --> 00:03:20,850
last logged entry equal to i,

46
00:03:20,850 --> 00:03:30,660
so in this case to zero. Now we can add an if statement here and say if last logged entry is not set,

47
00:03:30,670 --> 00:03:37,720
so we'll add an exclamation mark here, so if this is undefined or falsy at the beginning which it is or if

48
00:03:37,720 --> 00:03:50,590
last logged entry is set and it's equal to i, then I want to log my event,

49
00:03:50,660 --> 00:03:51,290
so we move

50
00:03:51,290 --> 00:03:59,420
that code into this if statement and then since we now logged something, we update the last logged entry

51
00:03:59,420 --> 00:04:10,060
to that i number and thereafter we increment i and we break. This is still not the finished logic,

52
00:04:10,080 --> 00:04:17,360
now if I save that and I go back to the web page and I attack and strong attack and I click show log,

53
00:04:17,370 --> 00:04:20,960
we see that entry and if I click show log again,

54
00:04:21,150 --> 00:04:27,260
we see that same entry still. So we can add that same entry multiple times, so we haven't changed a

55
00:04:27,260 --> 00:04:29,180
lot here.

56
00:04:29,270 --> 00:04:34,370
The reason for that is that we set last logged entry here to i, so to zero for the first run

57
00:04:34,370 --> 00:04:40,160
and here we check if we have no last logged entry or if last logged entry is equal to i but we

58
00:04:40,160 --> 00:04:46,040
always start at i zero, so this is always true and therefore we always log this. Now the trick is actually

59
00:04:46,040 --> 00:04:51,530
to change this here to look for last logged entry to be smaller than i and if we do that and we

60
00:04:51,530 --> 00:04:57,560
go back to the page, I can click attack and strong attack and then show log and we have one entry but

61
00:04:57,560 --> 00:05:02,320
if I click it again, we still keep on printing results.

62
00:05:02,340 --> 00:05:08,370
The reason for that is that this change here will actually yield true if last logged entry is undefined

63
00:05:08,400 --> 00:05:15,880
but also if it's zero because as you learned, zero is a falsy value, it's treated as false.

64
00:05:19,020 --> 00:05:23,470
So this here with the exclamation mark actually yields true and therefore executes this code

65
00:05:23,490 --> 00:05:29,490
if last logged entry is zero. So I'll combine this first condition here with another condition that last

66
00:05:29,490 --> 00:05:33,620
logged entry is not equal to zero.

67
00:05:33,640 --> 00:05:41,710
So if this is falsy but it's also not falsy because it's equal to zero or last logged entry simply

68
00:05:41,710 --> 00:05:42,960
is smaller than i,

69
00:05:42,960 --> 00:05:44,850
then we want to log something.

70
00:05:44,950 --> 00:05:50,410
So now with that, if we go back to the web page and we attack and strong attack and I click show log, we

71
00:05:50,410 --> 00:05:58,140
have an entry here but if I click show log again, now you'll see I only print my stripes here, my dashes

72
00:05:58,180 --> 00:06:01,330
but I don't print any real log entries anymore

73
00:06:01,350 --> 00:06:05,760
and the reason for that is that we don't make it into the if block anymore and that makes sense because

74
00:06:05,850 --> 00:06:11,160
i always starts at zero when printLogHandler is executed which is the case for every click,

75
00:06:11,160 --> 00:06:14,820
so that's not incremented across clicks, for every click

76
00:06:14,820 --> 00:06:16,350
it restarts at zero.

77
00:06:16,680 --> 00:06:21,030
Last logged entry however does change with every click,

78
00:06:21,030 --> 00:06:26,810
it starts uninitialized and then after that first log we printed, it is set to i which is zero,

79
00:06:26,840 --> 00:06:32,760
so it's zero after the first click and thereafter this code never runs again due to the logic we wrote

80
00:06:32,760 --> 00:06:33,010
here.

81
00:06:33,870 --> 00:06:36,090
So now the next step is to move

82
00:06:36,090 --> 00:06:42,780
break into this if statement so that the loop actually continues and has a chance of reaching a new

83
00:06:42,870 --> 00:06:43,290
i.

84
00:06:43,770 --> 00:06:50,950
So now if we save that and we reload and then we attack and strong attack and now we click show log,

85
00:06:50,970 --> 00:06:57,630
we have that first event player attack with index 0, if I click show log again with index at 1 which is the

86
00:06:57,630 --> 00:07:02,100
monster attack and now if I clear that, we can still continue pressing this button,

87
00:07:02,100 --> 00:07:08,310
now we have some logic that allows us to log event by event with every new click until we have no more

88
00:07:08,310 --> 00:07:12,850
events which is when we only print our dashes.

89
00:07:12,870 --> 00:07:18,090
Now of course, you could add another if check here to make sure you don't execute any logic in here

90
00:07:18,270 --> 00:07:25,230
if we have a last logged entry that is greater than the length of our battle log in the end

91
00:07:25,260 --> 00:07:26,780
which means we have no more entries,

92
00:07:26,790 --> 00:07:30,170
you could do that. So that's the break keyword,

93
00:07:30,320 --> 00:07:36,020
it allows us to break out of a function execution, for example to do something like this

94
00:07:36,200 --> 00:07:39,080
but you can do it for whatever reason you have in your code.

95
00:07:39,080 --> 00:07:44,590
It allows you to break out of a loop execution earlier than it normally would finish,

96
00:07:44,630 --> 00:07:51,980
so before the loop really finished, in this case whenever we printed something to the console but of

97
00:07:51,980 --> 00:07:57,410
course you can use break for whatever reason you have, doesn't have to be because you only want to log

98
00:07:57,410 --> 00:07:59,150
one thing at a time to a console,

99
00:07:59,150 --> 00:08:04,520
could be any reason why you want to stop a loop iteration before it really is done,

100
00:08:04,550 --> 00:08:05,670
so that's break.

101
00:08:05,720 --> 00:08:09,410
Now I mentioned we also have another keyword and that's the continue keyword.