{"id":12560,"date":"2020-10-19T13:35:19","date_gmt":"2020-10-19T20:35:19","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12560"},"modified":"2023-12-01T04:01:39","modified_gmt":"2023-12-01T12:01:39","slug":"javascript-for-loop","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-for-loop\/","title":{"rendered":"JavaScript For Loop: A Step-By-Step Guide"},"content":{"rendered":"\n

A JavaScript for loop executes a block of code as long as a specified condition is true. JavaScript for loops take three arguments: initialization, condition, and increment. The condition expression is evaluated on every loop. A loop continues to run if the expression returns true.<\/em><\/p>\n\n\n\n

\n\n\n\n

Loops repeat the same block of code until a certain condition is met. They are useful for many repetitive programming tasks.<\/p>\n\n\n\n

For example, you may have two lists of names\u2014first names and surnames\u2014that you want to merge into a list of full names. You could write a line of code for every name, but that could require hundreds of lines of code if the list is long. In addition, what if you aren\u2019t sure how long the list will be? Here you could use a loop that repeats a similar block of code merging each list item.<\/p>\n\n\n\n

There are two main types of loops used in JavaScript: while loops<\/a> and for loops. While loops are based on a condition and run while that condition is equal to true. For loops run while a certain set of conditions are true. They can count the number of iterations the loop makes.<\/p>\n\n\n\n

In this guide, we are going to explore the basics of JavaScript for<\/em> loops. We\u2019ll also discuss the for… in<\/em> and for…of<\/em> JavaScript loops, and use a few examples to illustrate how these loops work in JavaScript.<\/p>\n\n\n\n

JavaScript for Loops<\/h2>\n\n\n\n

A for loop runs the same code repeatedly as long as a condition is met. Each iteration of a loop runs the same code with a different value. The syntax for a for<\/em> loop is as follows:<\/p>\n\n\n\n

for (initialization; condition; increment) {\n\t\/\/ Execute code\n}<\/pre><\/div>\n\n\n\n
This syntax is rather complex, so let\u2019s break it down and define each term we have used.<\/p>\n\n\n\n
Initialization<\/strong> is used to declare a counter variable. This variable that we keeps track of how many times our loop has been executed.<\/p>\n\n\n\n
Condition<\/strong> is the condition that is evaluated before each loop starts. If the condition is equal to true<\/em>, the code within the for loop will run. If the condition becomes false<\/em>, the loop will stop running.<\/p>\n\n\n\n
Increment<\/strong> updates the loop counter each time the loop executed.<\/p>\n\n\n\n
Let\u2019s use a basic example to show how a for<\/em> loop works in JavaScript. Here\u2019s a loop that prints out the numbers between 0 and 5:<\/p>\n\n\n\n
for (let i = 0; i < 5; i++) {\n\tconsole.log(i);\n};<\/pre><\/div>\n\n\n\n
Our code returns the following:
<\/p>\n\n\n\n
0\n1\n2\n3\n4<\/pre><\/div>\n\n\n\n
You can see that our code has been executed repeatedly until our loop condition has been met. When the number 4 is printed to the JavaScript console<\/a>, our loop stops. This is because we instructed our loop to print out numbers in the range of 0 and 5.<\/p>\n\n\n\n
Components of a For Loop in JavaScript<\/h3>\n\n\n\n
Let\u2019s break our example down in terms of the components of a for loop:<\/p>\n\n\n\n
Initialization<\/strong><\/p>\n\n\n\n
Our loop\u2019s initialization<\/em> declares a variable<\/a> that keeps track of how many times our loop has executed. In the above example, we used let i = 0;.<\/em> This tells our program to start a counter called i<\/em> that has the initial value 0.<\/p>\n\n\n\n
Typically, initialization variables have the name i.<\/em> But, you can use any variable name you want.<\/p>\n\n\n\n
Condition<\/strong><\/p>\n\n\n\n
Our loop uses the i < 5<\/em> condition. This tells our program that our loop should only run when the i<\/em> variable is less than 5<\/em>.<\/p>\n\n\n\n
If i<\/em> is equal to or greater than 5<\/em>, our loop will stop.<\/p>\n\n\n\n
Increment<\/strong><\/p>\n\n\n\n
At the end of our for loop, our code uses i++<\/em>, as an increment. This feature tells our program to add 1<\/em> to the variable i<\/em> each time the loop is executed.<\/p>\n\n\n\n
For Loop JavaScript: How it Works<\/h2>\n\n\n\n
Now that we\u2019ve broken down our loop, we can discuss how the loop works as a whole. Here\u2019s the code from the loop we used above:<\/p>\n\n\n\n
for (let i = 0; i < 5; i++) {\n\tconsole.log(i);\n};<\/pre><\/div>\n\n\n\n
To start, we declare a for<\/em> loop. This loop has an initializing variable set to 0. So, our counter starts at 0.<\/p>\n\n\n\n
Then, we state that our loop should run when i<\/em> is less than 5.<\/p>\n\n\n\n
Our code increments the i<\/em> counter by one every time our loop is run. If our condition is met, the code within our loop is run, which gives us the result we saw above. So, our code loops through a block of code until i<\/em> is equal to or greater than five, then our code stops.<\/p>\n\n\n\n
If we created a situation where our condition always evaluates to true, the loop would become infinite. Infinite loops continue indefinitely unless we add a break statement.<\/p>\n\n\n\n
Our code then prints out i<\/em> when the for statement is executed.<\/p>\n\n\n\n
It\u2019s worth noting that every argument in a for loop is optional. For example, if we have already declared an initialization variable, we don\u2019t need to declare a new one in our for loop. Below is an example of a for loop being used with two arguments: a condition and an increment.<\/p>\n\n\n\n
let i = 0;\n\nfor (; i < 5; i++) {\n\tconsole.log(i);\n};<\/pre><\/div>\n\n\n\n
Our code returns:<\/p>\n\n\n\n
0\n1\n2\n3\n4<\/pre><\/div>\n\n\n\n
We have to include the semicolon even though we have not specified an initializing variable for our loop. This is because semicolon is used to tell the program where the initialization, condition, and increment appear. Without a semicolon, JavaScript cannot interpret our loop.<\/p>\n\n\n\n
JavaScript For… In Loops<\/h2>\n\n\n\n
for…in<\/em> loops can be used to iterate over the items within an iterable object. Here\u2019s the syntax for a for…in<\/em> loop in JavaScript:<\/p>\n\n\n\n
for (variable in object) {\n\t\/\/ Execute code\n}<\/pre><\/div>\n\n\n\n
for…in<\/em> loops are useful if we want to run a certain block of code based on the number of attributes in an object. For example, we may have a student object whose properties we want to print out to the console.<\/p>\n\n\n\n
Here\u2019s an example of a for…in<\/em> loop that will loop through every item in a student<\/em> object and print out each attribute:<\/p>\n\n\n\n
const student = {\n\tname: "Mark Redmond",\n\tgpa: 3.7,\n\tage: 17\n};\n\nfor (item in student) {\n\tconsole.log(item);\n}<\/pre><\/div>\n\n\n\n
Our program returns the following:<\/p>\n\n\n\n
name\ngpa\nage<\/pre><\/div>\n\n\n\n
As you can see, our program has iterated through each item in the student<\/em> object and printed out its property name. If we wanted to print out the value of each item, we could use this code:<\/p>\n\n\n\n
for (item in student) {\n\tconsole.log(student[item]);\n}<\/pre><\/div>\n\n\n\n
Our code returns the following:<\/p>\n\n\n\n
Mark Redmond\n3.7\n17<\/pre><\/div>\n\n\n\n
We used the student[item]<\/em> code to get the value of each item in our iterable object. Then, we printed the item to the console using console.log()<\/em>.<\/p>\n\n\n\n
JavaScript For…Of Loops<\/h2>\n\n\n\n
For…in<\/em> loops are useful when you want to iterate over properties in an object. You should use a for…of loop if But if you want to iterate over items<\/strong> in an object.<\/p>\n\n\n\n
Let’s iterate through an array of students and print their names to the console:<\/p>\n\n\n\n
let students = ["Paul", "Andy", "Reba", "Erin"];\n\nfor (let student of students) {\n    console.log(student);\n};<\/pre><\/div>\n\n\n\n
Our code returns the following:<\/p>\n\n\n\n
Paul\nAndy\nReba\nErin<\/pre><\/div>\n\n\n\n
As you can see, our for…of<\/em> loop has iterated through every item in the students<\/em> array. Each item is printed to the console.<\/p>\n\n\n\n
For…of loops are more concise than a regular for loop. This makes a for…of loop easier to read. The general rule of programming is to use the right tools for the job. For…of loops are easier to understand if you want to iterate over a list. So, you should use for…of loops when possible.<\/p>\n\n\n\n
Similarly, we can use for…of<\/em> on a string to iterate through its component characters. Here\u2019s an example of this in action:<\/p>\n\n\n\n
let name = "Paul";\n\nfor (let character of name) {\n\tconsole.log(character)\n};<\/pre><\/div>\n\n\n\n
The result of our code is:<\/p>\n\n\n\n
P\na\nu\nl<\/pre><\/div>\n\n\n\n
Our program has iterated through each letter in the name<\/em> variable, then printed them out individually to the console.<\/p>\n\n\n\n
This could be useful if you want to check whether a character appears in a string, for instance.<\/p>\n\n\n\n