(Instructor) Now with "if" statements we explored one
super important control structure,
which you will use all the time in programming.
It's super important,
and we will see it being used a lot throughout this course.
But, you'll learn that besides if statements,
we also have loops as another super important
kind of control structure or a set of control structures,
because loops allow you to execute certain code multiple
times, depending on different circumstances, we will learn.
And there's also not just one kind of looping code,
but there are different kinds of loops you can write
depending on what you want to achieve.
Now, the concept of having the loops
is a concept you will find in all programming languages.
It's just the exact kinds of loops that are supported,
that will differ throughout those different languages.
Now, before we dive into the different kind of loops
JavaScript supports,
let me show you a little demo page, which I prepared,
which we are going to build throughout this course section.
This demo page consists of four examples,
and these examples use different kinds of loops
JavaScript supports.
So these examples use JavaScript code that utilizes loops to
achieve the result we see here on this page.
For example, in this first example, here,
we can calculate a number where we sum up all the numbers
leading up to a number of our choice, from zero up to this
number here and we then show this result here.
And under the hood, we are repeating some code here
when we add up that number,
and that will be done with a loop.
We also have another example where this button will
highlight all the links you see in the text below.
And again,
this performs basically the same operation three times on
these three different elements.
So again, we have repeated code, which loops are all about.
I have another example where I display some dummy user data
once I click this button.
And here I'm basically displaying
the content of a JavaScript object, the different properties
of that object, and their values.
And if you'll look closely at this example, it's again,
basically a repeated operation.
I'm adding list items to a list and every list item contains
a property name and its value.
And this operation is repeated three times.
Again, another example for a loop,
which you will see in action as we will rebuild these exact
examples later in this section.
Last but not least, here we can test our luck
and see how often we need to roll the dice
until we roll a four in this example, or a three here.
So that's another little example here
with some randomness included,
where we actually use loops to implement this functionality.
And these are things we can do with loops and JavaScript.
These are all examples that rely on some code repetition and
therefore we will rebuild these examples
later on in the section to see how loops work.
But before we get there, let's first explore,
which kind of loops JavaScript supports and which problems
they solve before we then dive into some actual code.
In JavaScript, you have "for" loops,
you have "for...of" loops,
you have "for...in" loops, and you have "while" loops.
And of course, I'll explain all of these loops with concrete
examples over the next minutes.
With "for" loops,
you can basically define a certain number of times
some code should be executed.
With "for...of" loops on the other hand,
you can loop through all the elements in an array,
and then do something with every array element.
So "for...of" is used for working with arrays,
and "for" can also be used for working with arrays,
but it can also be used without arrays.
Again, I will show you some concrete examples soon.
"For...in" loops are a bit like "for...of" loops,
the difference is, just that with "for...in" loops,
you can loop through all the properties of an object.
So "for...in" loops are used for objects.
And while loops are a bit different, there
you don't define a certain number of times at advance and
you don't loop through an object or an array, instead with
"while" loops, you define a condition,
so you work with Boolean values, and a loop, the code in the
loop will be executed as long as a certain condition is met.
Now all of these loops have their purposes and you might
need them for different purposes therefore,
but especially "for...of" and "for...in"
are used quite frequently.
Nonetheless, you need to know all "for" loops and hence,
I will show you all "for" loops here.
Now, one short word about this demo page before we continue,
by the way, this demo page has four examples,
and for each example, I'm using a different kind of loop.
I'm using all the loops you saw on the slide
before basically.
And therefore let's now explore
the theory behind these loops, let's write some code,
and then, let's rebuild these examples.