Everyone in this video, we are going to talk about nested loops and conditionals when we use loops,
inside loops and conditionals, inside conditionals.
This is called nesting.
So let's see a few examples so we can understand how it works.
So let's suppose our page receives two pieces of information about a person her age and membership status,
which can be a member or not a member.
Then we need to show the price of a product based on the following rules.
So for members, the product is free and for all people above 65 years old, the product is also free.
Then we have nonmembers under 18 years old for which the price is going to be six.
And we have nonmembers above 18, which the price is going to be twelve.
So how can we solve this using a little bit of logic and using nested conditionals?
So let's just copy the first two lines to Visual Studio Code.
So let's start in if statement.
And now we can test two conditions at the same time, so if the person is.
A member now we know that we can evaluate this, we don't need to type is member equals true.
We can just type is member.
Or.
The age is greater than or equal to 65.
If one of these conditions are true, then we know that the product is free, so consult log.
Free, if you're tired of sending stuff to the console, don't worry, we're going to start interacting
with our e-mail elements.
In fact, in the next exercise.
You have opportunities to do this already, so let's do this just for a little while more.
So now, in case of the.
Now, we still need to do another test, because if we enter in the House statement, it means that
the person is not a member and the person is not above 65.
But now we still have two different prices for above 18 and below 18.
So here we are going to have to start another condition which is going to be nested inside this other
condition.
So here we just start another one.
So if.
Age.
Is below 18.
Then we know that the price is six otherwise.
The price is going to be 12, so in some situations, we are going to have multiple levels of if statements,
not only to.
But this is for another time.
So let's save this in this case, the person is not a member and is twenty five years old, so the price
should be twelve.
So let's make a few tests.
So the price is 12.
Now let's try.
Twenty five, but let's say the person is a member.
So the product is free.
Now, let's go back, the person is not a member, but the person is 70 years old, which should be
free again.
That's correct.
And now the person is not a member and the person is 12 years old.
And now the price is six.
So we just solved this problem using nested conditionals.
Now, just one thing to pay attention is that sometimes we can replace the nested conditionals by using
the end and or operator, and sometimes we just don't need them at all.
So I'm going to show why in this case, we didn't have to do this.
So I just wanted to show you an example of how it works.
But in fact, we didn't need to do this.
So let's go back to the code and understand why.
So if this condition is true, which means either this is true or this is true because we are using
the operator, this is going to be executed.
And if this is executed, JavaScript is just going to ignore all the rest, which means that instead
of doing the nice thing, we could just start another else if statement and now just make the test.
For below 18.
So let's delete this.
And now just and with an else statement.
So how is this going to work?
Well, if this is true, then JavaScript is just going to stop here.
It's not going to test the rest of the code.
But if this is not true, it means that the person is not a member and the person is not above 65,
five years old.
In this case, we just need to test if the person is below 18, because in this case, if the person
is below 18, it means that the person is below 18 and also the person is not a member, because if
the person was a member, we would have stopped here.
If we are still testing this condition, it means that the person is not a member.
And now we know that the person is below 18, so we can just print this.
Otherwise, we know that we are talking about a nonmember above 18.
So this is just another way of writing this.
But be a bit careful because if we had our conditionals written in a different order, we could have
a few problems with this.
So by using the nested conditionals, our code was actually a bit safer.
So let's just heat control Z to go back to that.
And now we can be sure that this is going to work, so I just wanted to say this.
Because when we are solving problems, there's never just one way of solving problems.
There's always multiple ways, so I just showed you two different ways of doing it.
So now let's just quickly talk about nested loops.
So when we deal with multidimensional arrays and objects, it is fairly common to use nested loops.
So here I'm just going to show you an example.
So we have an array of employees.
So each employee is an object.
And inside each employee, we have the children of the employee, which is a list because the employee
can have no children, two children, five children.
So we need an array for this.
So how could we print the names?
Of all the children, of all the employees we are going to need to loop's, so the first loop is going
to run through each of the employees and then inside this loop, we need to start another one to run
through each of the children.
So let's do this now.
I'm just going to copy this variable.
And then after doing this, we are going to print all the employees, children inside this list.
So let me select this element.
I have this ULLE element with an ID of children, and then I'm going to print all the names inside here.
So let's go back to visuals, to the code.
I'm just going to comment all this.
So here's the employees variable.
Now you need to pay close attention, because when we do, we have nested loops.
Things can get a bit complicated.
So let's do this step by step, as always.
So now the first thing we are going to do is start a loop to run through all the employees so we know
we can do this.
By starting.
A variable to be the counter, then the condition is going to be that A is less than.
Employees that lenth.
And the code to be executed at the end of each iteration is going to be incrementing a.
All right, so now that we are inside each employee, so at every iteration of the loop.
The list of children is going to be employees with an index of a dot.
Children, because that's the name of the property.
So we can create a variable to start this at every iteration, so var.
Children.
List or something like this, or let me just use Cammo case.
All right, so far, children list.
Then we just got the list now what do we need to do with this list, just start another loop to run
through each of the children.
So here we start another loop.
And this time we're going to have to pick a different variable name in the next lesson, I'm going to
talk about why we can have problems with nested loops if we use the same variable name.
For now, let's just pick another one so we can be B, so B equals zero.
Think of this as a separated loop from this first one, just forget all the rest, just think that inside
here we have an array, which could be this one, for example, and we are just starting a loop to run
through these elements.
So the condition is going to be that B is less than children list.
The plants and now we just need to increment be.
All right, so inside here, let's create another variable for child, so at every iteration of this
loop, we are going to have one child and the child is going to be children list.
We have an index of beat, so again, doing this step by step so we don't get confused.
So now I know that at every iteration of this loop, I'm getting this child before we move ahead and
do anything.
So I encourage you to do this every time I send it to the console, just so you can see if this is working.
So console that log.
Let's send the child to the council and see if this is working.
So saving this.
Refreshing the page.
Let's go to the council and now this seems to be working.
So here we have the names of all the children, which is pretty good.
But this is not what we needed to do.
We just needed to send all the children to this age.
HTML element.
So selecting this element, we can see that the idea is children.
So at every iteration of the loop, instead of doing console that log, we're just going to do document.
That that element by BIID.
Not enraged tml and now we're just going to increment the age which we know with strings, we're just
going to do concatenation.
So plus equal.
Then we can just send a list item, so this is just basic HTML.
Here we are going to close the list item and in the middle, we are just going to send the name of the
child.
So now we can erase this.
If we do this, let's go back there, let's refresh the page.
We can see that now we are able to print the names of all the children now we still have this inside
this element.
How can we erase this without having to go into the HTML file?
Well, this is pretty simple to do here where where we are incrementing the enraged HTML of the element.
What we need to do is just before starting all that, we can just set the HTML for an empty string.
So now when we start the loop, we are just going to start fresh with this element.
Refreshing the page.
Now we can see that we only have the children, so I hope this wasn't too complicated, if you need
just go back, watch this video again, and if you have any questions, you can always post in the Q&A
section.
So that was all for this lesson.
I'll see when the next video.