Coding for Beginners: Understanding JavaScript For Loops.

Photo by Ryan Stone on Unsplash

For loops, when properly utilized, act as very powerful tools in our code. Utilizing them allows programmers to save time and create concise, easy to read, non-repetitive code. If you are a coding beginner, these are all the things you want!

Requirements

• A great resource for practicing coding is Codepen. It allows you to code in HTML, CSS, and JavaScript without having to set up a text editor or download any software.
• All of the examples of code in this article are from code I typed into codepen.

What Are For Loops

In general, loops are pieces of code that allow programmers to repeat something over and over again. That something could be anything from calling a function to searching through an array for a specific item. Using a well-placed loop creates an iterative process that does not require the programmer (you)to explicitly type it out. Since one of the fundamental principles of programming is having code that is DRY (Don’t Repeat Yourself), using loops is a way for us to achieve this goal.

For loops in particular, create an iterative process that occurs for a set number of times. According to MDN, for loops “repeat until a specified condition evaluates to false.” Put another way, we can predetermine when a for loop will stop repeating whatever thing it is repeating.

Take the example below:

for(let i = 0; i < 5; i++){ console.log("Hello World") }

This produces the following lines in the console:

“Hello World”

“Hello World”

“Hello World”

“Hello World”

The alternative to using a for loop for this would be to write out:

console.log("Hello World")console.log("Hello World")console.log("Hello World")console.log("Hello World")console.log("Hello World")

The result in the console is the same, but the amount of space and time expended is greater.

Writing a For Loop

Now that we have some background on what for loops are and we’ve seen an example of a for loop, we can break down the syntax. The for loop can be broken down into 3 parts:

1. The word for, which is a reserved word in JavaScript.
2. The conditional statement, which defines a variable, sets the number of times the loop should iterate, and increment the variable. (let i = 0; i < 3; i++)
3. The code that will be repeated surrounded by curly braces. { console.log("This will print to the console 3 times"}

All together the syntax looks like: for(let i = 0; i < 3; i++){ console.log("This will print to the console 3 times")}

One of the most confusing parts of the for loop syntax is what is happening within the conditional statement so let’s break this down even further.

First, we have let i = 0;. This assigns the variable i the value zero. This is our starting point. This statement ends with a semicolon (this is important to include, think of it like the period at the end of a sentence).

Next we have i < 3;. This sets the condition. It tells our program that "while i is less than three, do this thing". When this statement is no longer true, when i is no longer less than three, the loop will stop. And again, we end with a semicolon.

Finally, we have i++. This is shorthand for i = i+1. We are telling the program to increase the value of i. This is important because if left out, i will be less than three forever. Which means our for loop would run forever. i needs to increase so that eventually our conditional statement is false and our loop will stop running.

Why this is Useful

As you begin to write more complex code for loops are a great tool for saving time. Some examples of ways that I have used for loops in my personal projects include:

• Adding event listeners to a multiple buttons on a webpage I was designing to be interactive.
• Searching through an array for a specific item or piece of data.
• Repeatedly calling a function.
• Create several list elements on my webpage and fill the list with data pulled from an API.

Finally, loops are an iterative process, understanding how to use loops to solve simple problems can build a foundation for understanding how to solve higher order problems.

Take Aways

• For loops can be used to make your code DRY.
• For loops are an iterative process that will continue until a conditional statement becomes false.
• For loop syntax is comprised of the for keyword, a variable with a set value, a conditional statement that determines how many times the loop will run, and a change to the variable that moves the conditional statement closer to being false with each iteration of the loop.

As someone who is still relatively new to coding, my goal is to break down concepts the way that I would want someone to do for me.

If you are interested in learning more about loops and taking it a step further my colleague, Jenna Dean, has a fantastic article on nested loops here.

Originally published at http://github.com.