1 2 3 4 5 6 7 8 9 10 | console.log("1"); console.log("2"); console.log("3"); console.log("4"); console.log("5"); console.log("6"); console.log("7"); console.log("8"); console.log("9"); console.log("10"); |
or if we use a variable then it might look like this:
1 2 3 4 5 6 7 8 9 10 11 | var i = 1; console.log(i++); console.log(i++); console.log(i++); console.log(i++); console.log(i++); console.log(i++); console.log(i++); console.log(i++); console.log(i++); console.log(i++); |
Let us see how it looks if use a for loop:
1 2 3 | for (var i = 1; i <= 10; i++) { console.log(i) } |
So as you see, using a for loop is very compact and efficient. The for loop has basically 3 parts in it like this:
(this code will not work; it is just for demostration purposes)
1 2 3 | for (initialization; condition; step) { // something to do. } |
Initialization: for loop takes help from a variable to decide how many repetitions it needs to do at the time of running. So, in the initialization we declare a variable where the loop starts. Mostly in simple examples it is declared like a simple variable:
var i = 0;
Condition: The end of the loop is decided by the middle part of the for loop which can be any condition. The loop runs until the condition is true and when the condition is false it just stops and anything what is written after the for loop start getting executing. A simple condition to run a loop for 10 times can be the maximum value of the variable i, so we can write it like "run until i is smaller than 10"; In code we would write it like this:
1 2 3 | for ( var i = 0; i < 10; step) { // body } |
Step: The step part of the for loop decides how the value of the variable i increases or decreases. Since want the loop to start at i = 0; and stop when i exceeds 9 (i < 10) this means we need to put the step for increasing the value of i; which can be written like this:
i = i + 1;
OR
i +=1;
OR
i++
There are multiple ways to increment a variable by 1; the most common short form used is i++;
so now the full loop becomes this:
1 2 3 | for ( var i = 0; i < 10; i++) { // body } |
this kind of loop is going to make 10 repetitions where the value of i is going to be from 0 to 9;
if we want the value of i from 1 to 10; then we can write it like this:
1 2 3 | for ( var i = 1; i <= 10; i++) { // body } |
Notice that now the condition has changed to less than or equal to (<=), we could have also done it by making it less than 11 (i < 11) so this is up to us how we want it to be defined.
Here is a graphical flow of the execution of for loop:
To explain, the execution of for loop starts with initializing the variable i and then the condition is checked. If the condition is "true" then the body of the loop is executed and only after then the value of i is incremented.
The point here is that it is possible that the condition is false even before the first execution of the body of the loop in which case the loop just exits after the first time the condition is checked after the initialization of the variable.
Conditions:
Based on the conditions which can be put in the for loop there can be many variants of the for loop because any expression which can result in true or false can be used as a condition in the for loop.
For example consider this for loop:
1 2 3 4 | var nums = [1, 2, 3, 4, 0, 5, 6]; for (var i = 0; nums[i]; i++) { console.log(nums[i]); } |
this loop prints the following on the console:
1
2
3
4
The reason this loop prints the above on the console is because when the value of i becomes 4, in the condition part of the for loop the value is evaluated as nums[4] which is actually 0 and since in javascript 0 is equal to false the loop terminates and comes out.
This trick can be applied many times in various situations.
Here are some points to be noticed about for loops:
- The for loop generally has initialization, condition and increment parts;
- The initialization and increment parts can be empty also like this:
- Any condition which can be taken as true or false in javascript can be used as the condition in for loop.
1 2 3 | for (; true;) { } // The above is an infinite loop |
Here are some practice questions:
- Given an array like this: [2, 4, 6, 7, 8, 6, 5, 4], print all the numbers on the console.
- Given an array like this: [1, 2, 3, 4, 6, 8, 5, 4, 3, 7], print all numbers which are greater than 5.
- Given an array like this: [1, 2, 3, 4, 6, 8, 5, 4, 3, 7], print the two numbers for which the sum is a give number X. assume X is 9 and test your program. the output should be 1, 8 (Hint: use nested loops)
- Given an array like this: [1, 2, 3, 4, 6, 8, 5, 4, 3, 7] print the sum of all the numbers;
- Given an array like this: [1, 2, 3, 4, 6, 8, 5, 4, 3, 7] print the only odd numbers;
- Give an array like this: [1, 2, 3, 4, 6, 8, 5, 4, 3, 7] print the sum of odd numbers.
- Given a number X; print if the number is prime.