1
00:00:09,150 --> 00:00:16,660
Everyone in this video, we are going to talk about nested loops and conditionals when we use loops,

2
00:00:16,660 --> 00:00:20,260
inside loops and conditionals, inside conditionals.

3
00:00:20,530 --> 00:00:22,560
This is called nesting.

4
00:00:22,810 --> 00:00:26,590
So let's see a few examples so we can understand how it works.

5
00:00:26,950 --> 00:00:34,930
So let's suppose our page receives two pieces of information about a person her age and membership status,

6
00:00:35,200 --> 00:00:38,200
which can be a member or not a member.

7
00:00:39,070 --> 00:00:44,270
Then we need to show the price of a product based on the following rules.

8
00:00:44,530 --> 00:00:53,660
So for members, the product is free and for all people above 65 years old, the product is also free.

9
00:00:53,770 --> 00:01:00,540
Then we have nonmembers under 18 years old for which the price is going to be six.

10
00:01:00,970 --> 00:01:07,480
And we have nonmembers above 18, which the price is going to be twelve.

11
00:01:07,960 --> 00:01:14,530
So how can we solve this using a little bit of logic and using nested conditionals?

12
00:01:16,750 --> 00:01:20,620
So let's just copy the first two lines to Visual Studio Code.

13
00:01:24,410 --> 00:01:26,810
So let's start in if statement.

14
00:01:28,170 --> 00:01:33,720
And now we can test two conditions at the same time, so if the person is.

15
00:01:35,950 --> 00:01:43,740
A member now we know that we can evaluate this, we don't need to type is member equals true.

16
00:01:44,020 --> 00:01:46,270
We can just type is member.

17
00:01:47,250 --> 00:01:47,730
Or.

18
00:01:48,790 --> 00:01:53,770
The age is greater than or equal to 65.

19
00:01:56,930 --> 00:02:03,800
If one of these conditions are true, then we know that the product is free, so consult log.

20
00:02:06,010 --> 00:02:13,180
Free, if you're tired of sending stuff to the console, don't worry, we're going to start interacting

21
00:02:13,180 --> 00:02:14,990
with our e-mail elements.

22
00:02:15,260 --> 00:02:17,770
In fact, in the next exercise.

23
00:02:18,720 --> 00:02:25,290
You have opportunities to do this already, so let's do this just for a little while more.

24
00:02:26,880 --> 00:02:28,320
So now, in case of the.

25
00:02:31,380 --> 00:02:38,730
Now, we still need to do another test, because if we enter in the House statement, it means that

26
00:02:39,060 --> 00:02:44,670
the person is not a member and the person is not above 65.

27
00:02:44,820 --> 00:02:50,020
But now we still have two different prices for above 18 and below 18.

28
00:02:50,040 --> 00:02:57,000
So here we are going to have to start another condition which is going to be nested inside this other

29
00:02:57,000 --> 00:02:57,520
condition.

30
00:02:57,930 --> 00:02:59,940
So here we just start another one.

31
00:03:00,150 --> 00:03:00,990
So if.

32
00:03:03,510 --> 00:03:04,170
Age.

33
00:03:05,270 --> 00:03:06,860
Is below 18.

34
00:03:12,200 --> 00:03:16,550
Then we know that the price is six otherwise.

35
00:03:23,550 --> 00:03:32,190
The price is going to be 12, so in some situations, we are going to have multiple levels of if statements,

36
00:03:32,190 --> 00:03:33,090
not only to.

37
00:03:34,610 --> 00:03:36,380
But this is for another time.

38
00:03:37,560 --> 00:03:44,130
So let's save this in this case, the person is not a member and is twenty five years old, so the price

39
00:03:44,130 --> 00:03:45,090
should be twelve.

40
00:03:45,280 --> 00:03:46,980
So let's make a few tests.

41
00:03:51,490 --> 00:03:53,040
So the price is 12.

42
00:03:53,500 --> 00:03:55,040
Now let's try.

43
00:03:55,780 --> 00:03:59,350
Twenty five, but let's say the person is a member.

44
00:04:03,060 --> 00:04:04,860
So the product is free.

45
00:04:06,020 --> 00:04:13,370
Now, let's go back, the person is not a member, but the person is 70 years old, which should be

46
00:04:13,370 --> 00:04:14,030
free again.

47
00:04:15,250 --> 00:04:16,300
That's correct.

48
00:04:16,660 --> 00:04:21,400
And now the person is not a member and the person is 12 years old.

49
00:04:23,430 --> 00:04:25,260
And now the price is six.

50
00:04:25,290 --> 00:04:29,580
So we just solved this problem using nested conditionals.

51
00:04:29,820 --> 00:04:38,010
Now, just one thing to pay attention is that sometimes we can replace the nested conditionals by using

52
00:04:38,010 --> 00:04:44,170
the end and or operator, and sometimes we just don't need them at all.

53
00:04:44,490 --> 00:04:48,690
So I'm going to show why in this case, we didn't have to do this.

54
00:04:48,930 --> 00:04:52,560
So I just wanted to show you an example of how it works.

55
00:04:53,190 --> 00:04:57,330
But in fact, we didn't need to do this.

56
00:04:57,330 --> 00:05:00,370
So let's go back to the code and understand why.

57
00:05:00,900 --> 00:05:07,260
So if this condition is true, which means either this is true or this is true because we are using

58
00:05:07,260 --> 00:05:10,770
the operator, this is going to be executed.

59
00:05:11,070 --> 00:05:18,840
And if this is executed, JavaScript is just going to ignore all the rest, which means that instead

60
00:05:18,840 --> 00:05:27,240
of doing the nice thing, we could just start another else if statement and now just make the test.

61
00:05:29,750 --> 00:05:31,340
For below 18.

62
00:05:34,280 --> 00:05:35,750
So let's delete this.

63
00:05:44,730 --> 00:05:47,460
And now just and with an else statement.

64
00:05:47,490 --> 00:05:49,420
So how is this going to work?

65
00:05:49,650 --> 00:05:53,450
Well, if this is true, then JavaScript is just going to stop here.

66
00:05:53,700 --> 00:05:56,280
It's not going to test the rest of the code.

67
00:05:58,010 --> 00:06:04,790
But if this is not true, it means that the person is not a member and the person is not above 65,

68
00:06:04,790 --> 00:06:05,390
five years old.

69
00:06:05,540 --> 00:06:12,800
In this case, we just need to test if the person is below 18, because in this case, if the person

70
00:06:12,800 --> 00:06:19,970
is below 18, it means that the person is below 18 and also the person is not a member, because if

71
00:06:19,970 --> 00:06:23,530
the person was a member, we would have stopped here.

72
00:06:24,020 --> 00:06:28,730
If we are still testing this condition, it means that the person is not a member.

73
00:06:28,850 --> 00:06:33,830
And now we know that the person is below 18, so we can just print this.

74
00:06:33,850 --> 00:06:39,990
Otherwise, we know that we are talking about a nonmember above 18.

75
00:06:40,010 --> 00:06:42,950
So this is just another way of writing this.

76
00:06:43,730 --> 00:06:52,430
But be a bit careful because if we had our conditionals written in a different order, we could have

77
00:06:52,430 --> 00:06:54,180
a few problems with this.

78
00:06:54,440 --> 00:06:59,860
So by using the nested conditionals, our code was actually a bit safer.

79
00:07:00,260 --> 00:07:03,290
So let's just heat control Z to go back to that.

80
00:07:05,700 --> 00:07:10,770
And now we can be sure that this is going to work, so I just wanted to say this.

81
00:07:13,770 --> 00:07:18,690
Because when we are solving problems, there's never just one way of solving problems.

82
00:07:19,970 --> 00:07:25,970
There's always multiple ways, so I just showed you two different ways of doing it.

83
00:07:26,510 --> 00:07:30,410
So now let's just quickly talk about nested loops.

84
00:07:31,510 --> 00:07:38,760
So when we deal with multidimensional arrays and objects, it is fairly common to use nested loops.

85
00:07:39,010 --> 00:07:41,750
So here I'm just going to show you an example.

86
00:07:41,950 --> 00:07:44,800
So we have an array of employees.

87
00:07:44,960 --> 00:07:47,380
So each employee is an object.

88
00:07:47,680 --> 00:07:56,590
And inside each employee, we have the children of the employee, which is a list because the employee

89
00:07:56,770 --> 00:08:00,630
can have no children, two children, five children.

90
00:08:00,640 --> 00:08:02,770
So we need an array for this.

91
00:08:03,190 --> 00:08:05,800
So how could we print the names?

92
00:08:06,710 --> 00:08:14,000
Of all the children, of all the employees we are going to need to loop's, so the first loop is going

93
00:08:14,000 --> 00:08:21,740
to run through each of the employees and then inside this loop, we need to start another one to run

94
00:08:21,740 --> 00:08:23,760
through each of the children.

95
00:08:23,990 --> 00:08:25,410
So let's do this now.

96
00:08:25,520 --> 00:08:27,770
I'm just going to copy this variable.

97
00:08:29,030 --> 00:08:38,400
And then after doing this, we are going to print all the employees, children inside this list.

98
00:08:38,840 --> 00:08:41,110
So let me select this element.

99
00:08:41,300 --> 00:08:49,580
I have this ULLE element with an ID of children, and then I'm going to print all the names inside here.

100
00:08:50,150 --> 00:08:53,030
So let's go back to visuals, to the code.

101
00:08:53,310 --> 00:08:55,550
I'm just going to comment all this.

102
00:08:59,580 --> 00:09:02,370
So here's the employees variable.

103
00:09:02,410 --> 00:09:07,680
Now you need to pay close attention, because when we do, we have nested loops.

104
00:09:07,770 --> 00:09:10,400
Things can get a bit complicated.

105
00:09:10,500 --> 00:09:13,710
So let's do this step by step, as always.

106
00:09:14,160 --> 00:09:21,300
So now the first thing we are going to do is start a loop to run through all the employees so we know

107
00:09:21,300 --> 00:09:22,380
we can do this.

108
00:09:23,970 --> 00:09:25,350
By starting.

109
00:09:26,650 --> 00:09:34,900
A variable to be the counter, then the condition is going to be that A is less than.

110
00:09:36,540 --> 00:09:39,510
Employees that lenth.

111
00:09:41,750 --> 00:09:49,040
And the code to be executed at the end of each iteration is going to be incrementing a.

112
00:09:50,790 --> 00:09:57,510
All right, so now that we are inside each employee, so at every iteration of the loop.

113
00:10:00,630 --> 00:10:07,800
The list of children is going to be employees with an index of a dot.

114
00:10:10,390 --> 00:10:13,720
Children, because that's the name of the property.

115
00:10:14,710 --> 00:10:20,020
So we can create a variable to start this at every iteration, so var.

116
00:10:21,560 --> 00:10:22,250
Children.

117
00:10:23,770 --> 00:10:28,350
List or something like this, or let me just use Cammo case.

118
00:10:28,650 --> 00:10:31,020
All right, so far, children list.

119
00:10:32,550 --> 00:10:39,840
Then we just got the list now what do we need to do with this list, just start another loop to run

120
00:10:39,840 --> 00:10:41,940
through each of the children.

121
00:10:42,300 --> 00:10:44,430
So here we start another loop.

122
00:10:46,520 --> 00:10:52,310
And this time we're going to have to pick a different variable name in the next lesson, I'm going to

123
00:10:52,310 --> 00:10:59,190
talk about why we can have problems with nested loops if we use the same variable name.

124
00:10:59,330 --> 00:11:05,990
For now, let's just pick another one so we can be B, so B equals zero.

125
00:11:07,290 --> 00:11:15,180
Think of this as a separated loop from this first one, just forget all the rest, just think that inside

126
00:11:15,180 --> 00:11:22,800
here we have an array, which could be this one, for example, and we are just starting a loop to run

127
00:11:22,800 --> 00:11:24,110
through these elements.

128
00:11:24,390 --> 00:11:30,330
So the condition is going to be that B is less than children list.

129
00:11:33,450 --> 00:11:37,710
The plants and now we just need to increment be.

130
00:11:41,200 --> 00:11:49,180
All right, so inside here, let's create another variable for child, so at every iteration of this

131
00:11:49,180 --> 00:11:56,020
loop, we are going to have one child and the child is going to be children list.

132
00:12:00,120 --> 00:12:07,100
We have an index of beat, so again, doing this step by step so we don't get confused.

133
00:12:07,470 --> 00:12:14,460
So now I know that at every iteration of this loop, I'm getting this child before we move ahead and

134
00:12:14,460 --> 00:12:15,230
do anything.

135
00:12:15,240 --> 00:12:22,640
So I encourage you to do this every time I send it to the console, just so you can see if this is working.

136
00:12:23,400 --> 00:12:25,140
So console that log.

137
00:12:26,770 --> 00:12:31,470
Let's send the child to the council and see if this is working.

138
00:12:32,680 --> 00:12:34,030
So saving this.

139
00:12:35,190 --> 00:12:36,600
Refreshing the page.

140
00:12:36,630 --> 00:12:39,970
Let's go to the council and now this seems to be working.

141
00:12:40,200 --> 00:12:44,490
So here we have the names of all the children, which is pretty good.

142
00:12:45,090 --> 00:12:47,350
But this is not what we needed to do.

143
00:12:47,370 --> 00:12:50,850
We just needed to send all the children to this age.

144
00:12:50,850 --> 00:12:52,050
HTML element.

145
00:12:53,060 --> 00:12:59,030
So selecting this element, we can see that the idea is children.

146
00:13:01,350 --> 00:13:08,040
So at every iteration of the loop, instead of doing console that log, we're just going to do document.

147
00:13:10,160 --> 00:13:12,740
That that element by BIID.

148
00:13:19,290 --> 00:13:27,930
Not enraged tml and now we're just going to increment the age which we know with strings, we're just

149
00:13:27,930 --> 00:13:29,640
going to do concatenation.

150
00:13:30,210 --> 00:13:31,890
So plus equal.

151
00:13:33,030 --> 00:13:39,060
Then we can just send a list item, so this is just basic HTML.

152
00:13:41,730 --> 00:13:50,640
Here we are going to close the list item and in the middle, we are just going to send the name of the

153
00:13:50,760 --> 00:13:51,450
child.

154
00:13:53,300 --> 00:13:55,340
So now we can erase this.

155
00:13:56,930 --> 00:14:01,370
If we do this, let's go back there, let's refresh the page.

156
00:14:03,730 --> 00:14:12,070
We can see that now we are able to print the names of all the children now we still have this inside

157
00:14:12,070 --> 00:14:12,960
this element.

158
00:14:13,110 --> 00:14:19,300
How can we erase this without having to go into the HTML file?

159
00:14:19,330 --> 00:14:27,420
Well, this is pretty simple to do here where where we are incrementing the enraged HTML of the element.

160
00:14:27,760 --> 00:14:37,880
What we need to do is just before starting all that, we can just set the HTML for an empty string.

161
00:14:38,320 --> 00:14:43,270
So now when we start the loop, we are just going to start fresh with this element.

162
00:14:44,610 --> 00:14:46,050
Refreshing the page.

163
00:14:48,090 --> 00:14:55,410
Now we can see that we only have the children, so I hope this wasn't too complicated, if you need

164
00:14:55,420 --> 00:15:02,040
just go back, watch this video again, and if you have any questions, you can always post in the Q&A

165
00:15:02,070 --> 00:15:02,820
section.

166
00:15:02,910 --> 00:15:04,830
So that was all for this lesson.

167
00:15:04,860 --> 00:15:06,510
I'll see when the next video.