What is a Loop?
In programming, loops
are used to perform repeated tasks based on a set condition. As an example, if we wanted to run a piece of code x
amount of times.
'for' Loop
// A random array with my items from my football kit
const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];
for (let i = 0; i < kit.length; i++) {
console.log(kit[i]);
}
/*
Breakdown
for (begin; condition; step) {
// ... loop body ...
}
*/
The for loop
is the most commonly used and it can be tricky to understand what is going on at first, but lets break it down. Firstly, look at the syntax
which is like an if
statement. You have the for
keyword, followed by parentheses for the conditions and the curly braces for the code that will be looped.
const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];
We are declaring an array toloop
over (which is just another way of saying checking through / going through).for
Similar toif
, we are starting thefor loop
(let i = 0; i < kit.length; i++)
This is where it gets a little confusing. For me, thei
was the part which didn't click. So we can start with that. Thei
can be any letter or word, it is just used similar to a variable to indicate the element in question.Looking at the example above, when we declare
i = 0
, we are asking theloop
tobegin
at point0
in the array, which will be the beginning (sweater). (To see why 0 is at the first item you can read this article).i < kit.length
is setting ourcondition
stating whilei
is less than thelength
of ourkit
array, carry onlooping
.Finally
i++
is the step to be taken on eachloop
. In our example, after eachloop
we wanti
to increment by one.{ console.log(kit[i]); }
Within theloop
body, we are asking it toconsole.log()
the element on each iteration of theloop
.Specifically the
kit[i]
is referring to each element of the array, wherekit
is our array and[i]
is pointing to the element.
😬 It may be a little crazy at first, but run through it a few times then try typing the example code out and watch the console for the output. There is also a for/in loop
which we will cover in the future, enough 🤯 for now.
'while' Loop
let i = 0;
while(i < 4){
console.log(i)
i++;
}
/*
Breakdown
while (condition){
code
loop
}
*/
Just be careful with ALL loops as you could end up running an endless loop if all the elements are not input correctly.
With the while loop
you can see the similarities in structure and syntax. These are less common but once you've understood the for loop
it should make sense enough. 😉
As loops
can be awkward to get to grips with, practice as much as possible. Why not try out the tasks below?
Further Learning
for (let i = 0; i < 10; i++) {
console.log( i );
}
Read the code above and write down what you think it will output before coding it yourself.
Change the
for loop
in to awhile loop
.
If you get stuck drop me a tweet 😃. Good Luck and happy coding!
This will be the last part of Coding Bytes for this year. For those celebrating, have a great time, see you next year. Happy holidays! 🎄
Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.
Top comments (1)
May I ask why you choose to merely present the quite deprecated
for(let …;…;…)
in aes6
context?If your article target very
es6
beginners, thenfor(const … of …)
is way better/easier than the old loop style.And if you stick with the current one, may you present why it is useful, what features it has. In 2018, in a es6 context, I think you should justify the use of
if(let …;…;…)
.Also, you could loose the brackets in single line statement;