1
00:00:02,381 --> 00:00:06,130
(Instructor) Now with "if" statements we explored one

2
00:00:06,130 --> 00:00:08,720
super important control structure,

3
00:00:08,720 --> 00:00:12,590
which you will use all the time in programming.

4
00:00:12,590 --> 00:00:13,800
It's super important,

5
00:00:13,800 --> 00:00:17,470
and we will see it being used a lot throughout this course.

6
00:00:17,470 --> 00:00:20,220
But, you'll learn that besides if statements,

7
00:00:20,220 --> 00:00:24,580
we also have loops as another super important

8
00:00:24,580 --> 00:00:29,510
kind of control structure or a set of control structures,

9
00:00:29,510 --> 00:00:34,510
because loops allow you to execute certain code multiple

10
00:00:34,610 --> 00:00:39,350
times, depending on different circumstances, we will learn.

11
00:00:39,350 --> 00:00:43,800
And there's also not just one kind of looping code,

12
00:00:43,800 --> 00:00:46,890
but there are different kinds of loops you can write

13
00:00:46,890 --> 00:00:49,660
depending on what you want to achieve.

14
00:00:49,660 --> 00:00:52,020
Now, the concept of having the loops

15
00:00:52,020 --> 00:00:55,740
is a concept you will find in all programming languages.

16
00:00:55,740 --> 00:00:59,470
It's just the exact kinds of loops that are supported,

17
00:00:59,470 --> 00:01:03,400
that will differ throughout those different languages.

18
00:01:03,400 --> 00:01:06,940
Now, before we dive into the different kind of loops

19
00:01:06,940 --> 00:01:08,690
JavaScript supports,

20
00:01:08,690 --> 00:01:12,310
let me show you a little demo page, which I prepared,

21
00:01:12,310 --> 00:01:17,310
which we are going to build throughout this course section.

22
00:01:17,360 --> 00:01:20,820
This demo page consists of four examples,

23
00:01:20,820 --> 00:01:24,820
and these examples use different kinds of loops

24
00:01:24,820 --> 00:01:27,060
JavaScript supports.

25
00:01:27,060 --> 00:01:32,060
So these examples use JavaScript code that utilizes loops to

26
00:01:32,240 --> 00:01:36,010
achieve the result we see here on this page.

27
00:01:36,010 --> 00:01:39,710
For example, in this first example, here,

28
00:01:39,710 --> 00:01:44,320
we can calculate a number where we sum up all the numbers

29
00:01:44,320 --> 00:01:48,900
leading up to a number of our choice, from zero up to this

30
00:01:48,900 --> 00:01:52,280
number here and we then show this result here.

31
00:01:52,280 --> 00:01:55,650
And under the hood, we are repeating some code here

32
00:01:55,650 --> 00:01:57,660
when we add up that number,

33
00:01:57,660 --> 00:02:00,330
and that will be done with a loop.

34
00:02:00,330 --> 00:02:03,320
We also have another example where this button will

35
00:02:03,320 --> 00:02:06,420
highlight all the links you see in the text below.

36
00:02:06,420 --> 00:02:07,420
And again,

37
00:02:07,420 --> 00:02:11,900
this performs basically the same operation three times on

38
00:02:11,900 --> 00:02:13,740
these three different elements.

39
00:02:13,740 --> 00:02:17,823
So again, we have repeated code, which loops are all about.

40
00:02:19,180 --> 00:02:23,070
I have another example where I display some dummy user data

41
00:02:23,070 --> 00:02:24,760
once I click this button.

42
00:02:24,760 --> 00:02:27,020
And here I'm basically displaying

43
00:02:27,020 --> 00:02:31,100
the content of a JavaScript object, the different properties

44
00:02:31,100 --> 00:02:33,290
of that object, and their values.

45
00:02:33,290 --> 00:02:37,440
And if you'll look closely at this example, it's again,

46
00:02:37,440 --> 00:02:40,190
basically a repeated operation.

47
00:02:40,190 --> 00:02:43,860
I'm adding list items to a list and every list item contains

48
00:02:43,860 --> 00:02:46,060
a property name and its value.

49
00:02:46,060 --> 00:02:49,930
And this operation is repeated three times.

50
00:02:49,930 --> 00:02:52,290
Again, another example for a loop,

51
00:02:52,290 --> 00:02:56,180
which you will see in action as we will rebuild these exact

52
00:02:56,180 --> 00:02:58,523
examples later in this section.

53
00:02:59,700 --> 00:03:02,700
Last but not least, here we can test our luck

54
00:03:02,700 --> 00:03:05,420
and see how often we need to roll the dice

55
00:03:05,420 --> 00:03:10,343
until we roll a four in this example, or a three here.

56
00:03:11,570 --> 00:03:13,840
So that's another little example here

57
00:03:13,840 --> 00:03:16,290
with some randomness included,

58
00:03:16,290 --> 00:03:21,290
where we actually use loops to implement this functionality.

59
00:03:23,460 --> 00:03:27,360
And these are things we can do with loops and JavaScript.

60
00:03:27,360 --> 00:03:31,647
These are all examples that rely on some code repetition and

61
00:03:31,647 --> 00:03:34,270
therefore we will rebuild these examples

62
00:03:34,270 --> 00:03:38,130
later on in the section to see how loops work.

63
00:03:38,130 --> 00:03:40,990
But before we get there, let's first explore,

64
00:03:40,990 --> 00:03:44,700
which kind of loops JavaScript supports and which problems

65
00:03:44,700 --> 00:03:48,343
they solve before we then dive into some actual code.

66
00:03:49,310 --> 00:03:52,560
In JavaScript, you have "for" loops,

67
00:03:52,560 --> 00:03:55,530
you have "for...of" loops,

68
00:03:55,530 --> 00:04:00,530
you have "for...in" loops, and you have "while" loops.

69
00:04:01,060 --> 00:04:04,420
And of course, I'll explain all of these loops with concrete

70
00:04:04,420 --> 00:04:07,190
examples over the next minutes.

71
00:04:07,190 --> 00:04:09,170
With "for" loops,

72
00:04:09,170 --> 00:04:13,100
you can basically define a certain number of times

73
00:04:13,100 --> 00:04:16,220
some code should be executed.

74
00:04:16,220 --> 00:04:19,000
With "for...of" loops on the other hand,

75
00:04:19,000 --> 00:04:23,040
you can loop through all the elements in an array,

76
00:04:23,040 --> 00:04:27,320
and then do something with every array element.

77
00:04:27,320 --> 00:04:29,850
So "for...of" is used for working with arrays,

78
00:04:29,850 --> 00:04:32,980
and "for" can also be used for working with arrays,

79
00:04:32,980 --> 00:04:35,500
but it can also be used without arrays.

80
00:04:35,500 --> 00:04:39,033
Again, I will show you some concrete examples soon.

81
00:04:40,137 --> 00:04:43,950
"For...in" loops are a bit like "for...of" loops,

82
00:04:43,950 --> 00:04:47,140
the difference is, just that with "for...in" loops,

83
00:04:47,140 --> 00:04:50,573
you can loop through all the properties of an object.

84
00:04:51,430 --> 00:04:55,060
So "for...in" loops are used for objects.

85
00:04:55,060 --> 00:04:57,890
And while loops are a bit different, there

86
00:04:57,890 --> 00:05:01,680
you don't define a certain number of times at advance and

87
00:05:01,680 --> 00:05:05,307
you don't loop through an object or an array, instead with

88
00:05:05,307 --> 00:05:08,650
"while" loops, you define a condition,

89
00:05:08,650 --> 00:05:13,490
so you work with Boolean values, and a loop, the code in the

90
00:05:13,490 --> 00:05:18,490
loop will be executed as long as a certain condition is met.

91
00:05:19,330 --> 00:05:23,240
Now all of these loops have their purposes and you might

92
00:05:23,240 --> 00:05:26,150
need them for different purposes therefore,

93
00:05:26,150 --> 00:05:28,370
but especially "for...of" and "for...in"

94
00:05:28,370 --> 00:05:30,540
are used quite frequently.

95
00:05:30,540 --> 00:05:34,000
Nonetheless, you need to know all "for" loops and hence,

96
00:05:34,000 --> 00:05:37,310
I will show you all "for" loops here.

97
00:05:37,310 --> 00:05:40,710
Now, one short word about this demo page before we continue,

98
00:05:40,710 --> 00:05:44,630
by the way, this demo page has four examples,

99
00:05:44,630 --> 00:05:48,090
and for each example, I'm using a different kind of loop.

100
00:05:48,090 --> 00:05:50,220
I'm using all the loops you saw on the slide

101
00:05:50,220 --> 00:05:52,120
before basically.

102
00:05:52,120 --> 00:05:53,740
And therefore let's now explore

103
00:05:53,740 --> 00:05:55,378
the theory behind these loops, let's write some code,

104
00:05:55,378 --> 00:05:59,293
and then, let's rebuild these examples.