DONATE  
MENU
JSON
JAVASCRIPT
HTML
AJAX

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Loops » For Loops
Share Tweet WhatsApp

For Loops

Looping is the continuous execution of a code block. In programming, we create loops to execute statements contained in a code block continuously until a condition is met. For example, You may create a statement that adds a number to a variable,
var x = 5; //variable

x += 1; //statement to add 1 to x
You may thereafter decide that this number (1) should be added to the variable four times. We therefore create a loop to add the number four times by executing the statement to add the number to the variable four times. One of the prominent use of loops is in accessing or getting all the values of an array. Arrays contain multiple values that can be access one at a time. But we can create a loop to continuously access all those values one at a time until we have access all. The for - loop enables us to execute statements contained in its code block for a specified number of time, which may be 10 or 100 or 1000 or whatever. It is formed as shown below,
for (initializer; condition; incremental/decremental){
//statements to execute
}

//EXAMPLE
for (var i = 0; i <= 4; i++){
x = x + 1;
}
In the above, we first declared the for keyword, followed by the parentheses(()) and finally a code block ({ }) containing all the statements to execute anytime the loop runs. Inside the parentheses(()) are three statements that determine how many times our loop will execute or run. We categorized these statements into: 1. The initializer (var i = 0) 2. The condition (i <= 4 ) 3. The Incremental/Decremental (i++) THE INITIALIZER To understand what the initializer is, it is important to understand that there is an increment or decrement that takes place whenever the loop is about to execute at any given time. The increment/decrement is done using the last statement contained in the parentheses which we called INCREMENTAL/DECREMENTAL So, the initializer simply specify the variable that will be increase or decrease and what its first value should be before increase or decrease takes place. In the second example above, we declared a variable "i" which should be use for the increment/decrement and initialized i with 0. This means, the first time the loop will run, variable i should be 0. THE CONDITION The condition specify the requirement for the continuous running of the loop. Whenever the loop wants to run at any given time, it checks if the condition is still true. When the condition becomes false, the loop stops running meaning it has ended. In the second example above, the condition is i <= 4 which translates to (i is less than or equal to 4). Meaning, if variable "i" is less than or equal to 4, the loop should run but once variable "i " is greater than 4 e.g 5, the loop should stop running. THE INCREMENTAL/DECREMENTAL The incremental/decremental enables us to continuously increase the value of the initialized variable whenever the loop is about to run at any given time so as to meet up with the condition for the loop to stop running. Assuming the incremental/decremental does not exists, our initialized variable (i) which was initialized with 0 would have continued to be 0 whenever the loop runs and therefore be unable to meet the condition (i <= 4) for the loop to stop running. This means the loop would have continued execution till eternity and hang or break down our browser. So, the incremental/decremental basically allows us to continuously increase or decrease the initialized variable as the loop is continuously executing and this will help meet a condition for the loop to stop executing. In the example above, the incremental/decremental is i++ meaning the initialized variable should increase by 1 every time the loop is about to run after first execution (Remember post incremental operator). This will result to, FIRST LOOP ATTEMPT - variable "i" was initialized with 0. Therefore i is 0. LOOP RUNS SECOND LOOP ATTEMPT - 1 added to i . i is now 1. LOOP RUNS THIRD LOOP ATTEMPT - 1 added to i . i is now 2. LOOP RUNS FOURTH LOOP ATTEMPT - 1 added to i . i is now 3. LOOP RUNS FIFTH LOOP ATTEMPT - 1 added to i . i is now 4. LOOP RUNS SIXTH LOOP ATTEMPT - 1 added to i . i is now 5. But guess what? LOOP will not RUN because the condition (i <=4) is now false. So the loop has ended Therefore, the statements in our above example code block will be executed 5 times.
NOTE:
  • The for loop is not a function rather it is an iteration operator used in executing a code block for a specified number of time until a condition is met.
From the explanations given so far on the for loop, you should have understood now that the various statements contained in the parentheses of the for loop basically and technically tells the loop the number of times it should execute.
for (var y = 1; y < 3; y++)
The above loop will run for 2 times. CONDITION: loop should run whenever "y" is less than 3. INCREMENTAL/DECREMENTAL: y++ which means "y" should be increased by 1 whenever the loop is about to run after first execution. First loop attempt: y was initialized with 1. y is less than 3. LOOP RUNS Second loop attempt: 1 is added to y. y is now 2. LOOP RUNS Third loop attempt: 1 is added to y. y is now 3. LOOP ENDS CAUSE CONDITION (y < 3) is now false. y is no longer less than 3 rather y is now equal to 3.
for (var x = 5; x > 1; x--)
The above loop will run for 4 times. CONDITION: loop should run whenever "x" is greater than 1. INCREMENTAL/DECREMENTAL: x-- which means "x" should be decreased by 1 whenever the loop is about to run after first execution. First loop attempt: x was initialized with 5. x is greater than 1. LOOP RUNS Second loop attempt: 1 is deducted from x. x is now 4. LOOP RUNS Third loop attempt: 1 is deducted from x. x is now 3. LOOP RUNS Fourth loop attempt: 1 is deducted from x. x is now 2. LOOP RUNS Fifth loop attempt: 1 is deducted from x. x is now 1. LOOP ENDS CAUSE CONDITION (x > 1) is now false. x is no longer greater than 1 rather x is now equal to 1. EXAMPLE
<script>
var num = 10;

alert("BEFORE LOOP, NUMBER IS "+num);

for (var i = 1; i<=5; i++){
num = num + 1;
}

alert("AFTER LOOP, NUMBER IS "+num);

</script>

Copy PRACTICE IT

Above, we have created a for loop to execute 5 times and whenever it runs, it has a statement to add 1 to the variable "num". SUMMARY
  1. Looping is the continuous execution of a code block.
  2. We create loops whenever we want to execute a statement or group of statements repetitively.
  3. Loops have proven importance in accessing all the values of an array.
  4. The for loop is a kind of loop that allows us to specify the number of times a code block should be executed.
  5. We technically do this by defining some statements in the for loop parentheses.
  6. This statements working together will determine the number of times the loop will execute.
  7. We categorized these statements into 3. The initializer, condition and incremental/decremental.
  8. The initializer initializes a variable that will be used in determining the length of the loop while the condition specifies a condition to check whenever the loop is about to run. If the condition is true, the loop runs else it ends.
  9. The incremental/decremental increases or decreases the initialized variable whenever the loop wants to run.
  10. The whole summary therefore is that the initializer initializes a value to start with. The incremental/decremental increases or decreases the value whenever the loop wants to run and then, a check is carried out to know whether the condition is now false. If it is not, the loop runs and the sequence continues till it becomes false.
Take a short quiz on For Loops.
Ask a question or tell us if For Loops is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode