DEV Community

tummytucker94
tummytucker94

Posted on

For-Loop in JavaScript

Alt Text

I am writing this post because recently I had seen an image of a pyramid, I will refer to it as the Hierarchy of Information Retention (HIR), in which it shows that we only retain 10% of the information that we gain from reading, 30% by demonstration or seeing it, 50% through discussion, and 70% through practice doing it, and 90% through teaching. This is because teaching shows us the gaps in our knowledge, and as a result it forces us to reckon with this gap by searching for the answers.

As such, the purpose of this post is to teach other beginners like me about the for-loop in JavaScript and to spark discussion in the comments section in order to sharpen each other's knowledge base. So, with no further ado, let's get into for-loops.

What Is a Loop?

A loop is an operation that executes a block of code repeatedly. When something is executed repeatedly, it is said to iterate. Thus, ultimately, a loop is an operation that iterates a block of code.

What Is a For-Loop?

Alt Text

A for-loop is a type of loop that executes a block of code for a known number of times as long as a condition is true and then terminates. A for-loop is composed of two general parts: the loop head and the loop body.

I like to think of the for-loop as a body in which the loop head does the reasoning: it initializes the loop; then, it sets a condition; and if the condition evaluates true, then the loop continues to execute the statements within the loop body. After the statements are carried out, the computer executes the final expression, which is either incremented(++) or the decremented(--), in order to keep count of the loop.

Loop Head

Alt Text

The loop head is comprised of three parts:

1)The initializer is the part of the loop head that sets the value to begin the loop. It acts as the loop counter and is typically, though not always, denoted by what is known as the iterator variable ( i )--the variable whose value counts a loop's number of iterations.

2)The continuation condition is the set condition that determines whether or not the loop will execute the statements contained within the loop body. I like to think of the continuation condition as sort of a question that you ask yourself if it is true or not, and based on that answer it will determine if the program will continue the loop or not.

3)The final expression is the last part of the instructions in the loop head that is performed. And, the operations that are typically executed in this part is either an increment or a decrement.

Loop Body

Alt Text

The loop body is the second part of the loop structure and is composed of statements that execute when the continuation condition is true. The loop body is denoted by a code block, { }, in which the statements are contained.

Lastly, I would like to note that a loop is also known as a control flow statement because when it is executed it controls the natural execution flow of a program. The diagram below shows the control flow of a for-loop in which the execution flow continues one way if the continuation condition is true and another way if it evaluates false.

Alt Text

Conclusion

Overall, the for-loop is an operation that executes a block of code repeatedly a known number of times as long as a condition evaluates true. Additionally, it is composed of two general components--the loop head and the loop body. The loop head is made up of three subcomponents: the initializer, the continuation condition, and the final expression. And, the loop body contains the statements to be executed. For-loops are imperative to understand and master, which is why I recommend that you practice using them and writing basic programs in order to master it.

Top comments (0)