Like other languages we have for loop in javaScript as well this is a very important and famous loop structure because this is very easy to use. The way for loop runs in its like a function which takes first argument like the current counter number if its 1 2 3 4 whatever and second argument is condition let’s say we declare less than 10 and third argument is after running the code block this increase a number plus plus into counter. That’s all.
Let’s say we have an array of students and we have 10 students in that array.
[code lang=”js”]
var students = array("Ateeq Rafeeq", "Saira", "Zaib", "Dania Arshad", "Abdul Rehman", "Abubakar", "Samar", "Ibrahim", "Rafeeq", "Usman");
[/code]
Now what? If you need to print these all values in a div or anything you would need to call them like following using their index as you know array index starts from 0 and so on in that way we have index from 0 to 9 tenth number is 0 actually cause it starts from 0 not 1 to index arrays. To print above array in regular array method we use following way
[code lang=”js”]
<script type="text/javascript">
//declaring an array of ten students.
var students = array("Ateeq Rafeeq", "Saira", "Zaib", "Dania Arshad", "Abdul Rehman", "Abubakar", "Samar", "Ibrahim", "Rafeeq", "Usman");
//printing array in regular method.
document.write(students[0])+'<br>’;
document.write(students[1])+'<br>’;
document.write(students[2])+'<br>’;
document.write(students[3])+'<br>’;
document.write(students[4])+'<br>’;
document.write(students[5])+'<br>’;
document.write(students[6])+'<br>’;
document.write(students[7])+'<br>’;
document.write(students[8])+'<br>’;
document.write(students[9])+'<br>’;
</script>
[/code]
Okay they were only ten names what if there are 100 ? 600 ? or thousand or more than that names? what will you do will you write such line codes for each element again and again? Will not this make your page heavy? Will not this make your code lengthy? Will not this increase the chances of mistake?
Well answer is simple we can use for loop to print all elements of array. For that we need to know the length of array we can use javaScript built in method length like students.length and we can save that in condition variable. See the example below where in for loop first element is starting value of loop counter, second element checking if that reached the limit and third element increase 1 number in counter after completion of block code.
[code lang=”js”]
<script type="text/javascript">
//declaring an array of ten students.
var students = array("Ateeq Rafeeq", "Saira", "Zaib", "Dania Arshad", "Abdul Rehman", "Abubakar", "Samar", "Ibrahim", "Rafeeq", "Usman");
var condition = students.length(); //getting length of array.
var counter = 0; //starting counter from 0
for(counter; counter<=condition; counter++) {
document.write(students[counter])+'<br>’;
}
</script>
[/code]
See how this reduced the lines of code? and how this is very clean and understandable? This is the beauty of for loop. This will do same as above code block but its faster and easy to use.
What does ++ do in JavaScript?
Using plus plus sign with a number will always increase 1 number in that line if you have a value in counter 0 and after running counter++; the value in counter will become 1. After each run of this line include 1 number in that. This works only with numbers.
What does + do in javaScript?
This also uses to add two numbers but this also use to combine two strings or two lines. As you see above one string closed and i continued using plus sign to add another string ‘<br />’; but when we add numbers we do not use strings that way javaScript understand weather to combine them or plus them.