The last time the loop will be executed is when i is equal. Loops and iterations
Since while and do...while are based on conditions, they are executed when given operator evaluates to true. The for statement is also based on conditions, but it provides additional functions, such as a loop counter, which allows you to set the number of loop iterations in advance.
This tutorial will teach you how to use for, for...of and for...in loops, which are integral elements of programming in JavaScript.
for loopsA for loop can use up to three optional expressions to re-execution block of code.
Let's look at the loop syntax.
for (initialization; condition; final expression) (
// code to be executed
}
- Initialization (if specified) starts the counter and declares the variables.
- The condition is processed next. If true, the program will execute the following code; if it is false, the loop will break.
- Then the code that needs to be executed is processed.
- If a final expression is specified, it is updated, after which the loop returns to processing the condition.
To understand how this works, let's look at a basic example.
for (let i = 0; i< 4; i++) {
// Print each iteration to the console
console.log(i);
}
If you run this code, you will get this result:
0
1
2
3
In the above example for loop starts with the variable let i = 0, which will start the loop with the value 0. The condition i is specified in the loop< 4, а это означает, что до тех пор, пока значение i меньше 4, цикл будет продолжать работу. Финальное выражение i++ определяет счетчик для каждой итерации цикла. console.log(i) выводит числа, начиная с 0, и останавливается, как только i равняется 4.
Without the loop, the code doing the same thing would be:
// Set initial variable to 0
let i = 0;
// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);
Without a loop, a block of code consists of more lines. To increase the number of numbers, we would have to add even more lines to the code.
Let's look at each expression in the loop.
InitializationThe first expression in the loop is initialization.
It declares a variable i using the let keyword (you can also use the var keyword) and assigns it the value 0. You can use any variable name in your loops, but the variable i is associated with the word “iteration” and does not overload the code.
ConditionLike while and do...while loops, for loops usually have a condition. IN in this example This:
This means that the expression evaluates to true as long as the value of i is less than 4.
Final expressionThis is an expression that is executed at the end of each loop. It is most often used to increase or decrease the value of a variable, but it can be used for other purposes.
In this example, the loop increments the variable by one. The expression i++ does the same thing as i = i + 1.
Unlike the start and condition, the final expression does not end with a semicolon.
Loop bodyNow you know all the components of a for loop. Let's look at the code again.
// Initialize a for statement with 5 iterations
for (let i = 0; i< 4; i++) {
console.log(i);
}
The first expression specifies the initial value of the variable (0), the second defines the condition (the loop is executed as long as i is less than 4), and the third specifies the step of each iteration (in in this case the value will increase by 1).
The console will output the values: 0, 1, 2 and 3. The loop will then break.
Optional ExpressionsAll for loop expressions are optional. For example, you could write the same for loop, but skip the initialization and initialize the variable outside the loop.
let i = 0;
// Initialize the loop
for(; i< 4; i++) {
console.log(i);
}
0
1
2
3
In this case, the first semicolon indicates that the beginning is missing.
Note: Even if you do not use one of the expressions, you must include a semicolon, otherwise the loop will be interpreted incorrectly.
Also, as an example, you can remove the condition from the loop. To stop the loop when the value of a variable becomes greater than 3, use if and break.
// Declare variable outside the loop
let i = 0;
//Omit initialization and condition
for (; ; i++) (
if (i > 3) (
break;
}
console.log(i);
}
0
1
2
3
Important! In loops without a condition, you must use the break statement. Otherwise, the loop will not be able to break (such loops are called endless) and will cause the browser to crash.
You can also remove the final expression from the loop. The step can be specified at the end of the loop code. In this case, you must leave both “;” characters in brackets, otherwise the loop will not work.
// Declare variable outside the loop
let i = 0;
//Omit all statements
for (; ;) (
if (i > 3) (
break;
}
console.log(i);
i++;
}
0
1
2
3
As you can see, loop expressions produce the most concise and readable code.
Changing ArraysA for loop can be used to modify arrays.
IN following example shows how to create an empty array and fill it with variables using a loop counter. Create a modifyArray.js file and add the following code to it:
// Initialize empty array
let arrayExample = ;
// Initialize loop to run 3 times
for (let i = 0; i< 3; i++) {
// Update array with variable value
arrayExample.push(i);
console.log(arrayExample);
}
Launch the program. It will output:
[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]
The given loop is executed until i< 3 перестанет быть истинным. Массив arrayExample выводится в консоль в конце каждой итерации. Так вы можете увидеть, как массив пополняется новыми значениями.
Array lengthSometimes a loop needs to be executed several times, but determining the required number of iterations is difficult. Instead of declaring the number of iterations, as in the previous examples, you can use the length property to make the loop run as many times as there are elements in the array.
// Declare array with 3 items
let fish = [ "flunder", "salmon", "pike" ];
//Initalize for loop to run for the total length of an array
for (let i = 0; i< fish.length; i++) {
// Print each item to the console
console.log(fish[i]);
}
Such a program will produce the result:
flounder
salmon
pike
This loop iterates through each array index using fish[i]. This causes the index to be dynamically updated with each iteration.
Cycles
To understand the effect of conditional statements, we suggested imagining them as forks in the road along which the JavaScript interpreter moves. Loops can be thought of as a U-turn in the road that takes you back, forcing the interpreter to go through the same piece of code over and over again.
IN JavaScript There are four loops: while, do/while, for and for/in. One of the following subsections is devoted to each of them. One common use of loops is to traverse the elements of an array.
while loopThe if statement is the basic conditional statement in JavaScript, and the basic loop for JavaScript is the while loop. It has the following syntax:
while (expression) (instruction)
The while loop begins by evaluating an expression. If this expression evaluates to false, the interpreter skips the statement that makes up the body of the loop and goes to following instructions in a programme. If the expression evaluates to true, then the statement that forms the body of the loop is executed, then control is transferred to the beginning of the loop and the expression is evaluated again. In other words, the interpreter executes the loop body instruction over and over again as long as the value of the expression remains true. Please note that it is possible to create an infinite loop using the while(true) syntax.
Typically you don't want the JavaScript interpreter to perform the same operation over and over again. In almost every loop, with each iteration of the loop, one or more variables change their values. Because the variable changes, what the instruction does may differ each time it passes through the loop body.
Additionally, if the variable(s) being modified are present in the expression, the value of the expression may change with each pass of the loop. This is important because otherwise the expression whose value was true will never change and the loop will never end! Below is an example of a while loop that prints the numbers from 0 to 9:
Var count = 0; while (count
As you can see, the count variable is set to 0 at the beginning, and then its value is incremented each time the body of the loop is executed. After the loop has been executed 10 times, the expression will return false (that is, the count variable is no longer less than 10), the while statement will end, and the interpreter will move on to the next statement in the program. Most loops have counter variables similar to count. Most often, variables named i, j and k act as loop counters, although in order to do program code more understandable, counters should be given more descriptive names.
do/while loopA do/while loop is similar in many ways to a while loop, except that the loop expression is tested at the end rather than at the beginning. This means that the body of the loop is always executed at least once. This instruction has the following syntax:
do (statement) while (expression);
The do/while loop is used less frequently than its sister while loop. The fact is that in practice, the situation when you are sure in advance that you will need to execute the body of the loop at least once is somewhat unusual. Below is an example of using a do/while loop:
Function printArray(a) ( var len = a.length, i = 0; if (len == 0) console.log("Empty array"); else ( do ( console.log(a[i]); ) while (++i
There are two differences between a do/while loop and a regular while loop. First, a do loop requires both the do keyword (to mark the start of the loop) and the while keyword (to mark the end of the loop and specify a condition). Second, unlike a while loop, a do loop ends with a semicolon. The while loop does not need to end with a semicolon if the body of the loop is enclosed in braces.
for loopA for loop is a loop construct that is often more convenient than a while loop. The for loop makes it easy to construct loops that follow a pattern common to most loops. Most loops have some kind of counter variable. This variable is initialized before the loop starts and is checked before each iteration. Finally, the counter variable is incremented or otherwise modified at the end of the loop body, just before the variable is checked again. Initialization, verification and update are the three key operations performed with loop variable. The for statement makes these three steps explicit part of the loop syntax:
for(initialization; checking; increment) (instruction)
Initialize, check, and increment are three expressions (separated by semicolons) that are responsible for initializing, checking, and incrementing a loop variable. Placing them on the first line of the loop makes it easier to understand what the for loop is doing and prevents you from forgetting to initialize or increment a loop variable.
The easiest way to explain the for loop is to show the equivalent while loop:
initialization; while(check) ( instruction; increment; )
In other words, the initialization expression is evaluated once before the loop begins. This expression is typically an expression with side effects (usually an assignment). JavaScript also allows the initialization expression to be a var variable declaration statement, so it is possible to declare and initialize a loop counter at the same time.
The test expression is evaluated before each iteration and determines whether the body of the loop will be executed. If the result of the test is true, the instruction that is the body of the loop is executed. At the end of the loop, the increment expression is evaluated. For this expression to be meaningful, it must be an expression with side effects. Typically this is either an assignment expression or an expression using the ++ or -- operator.
You can also print the numbers 0 through 9 using a for loop, as shown below, as opposed to the equivalent while loop shown in the example earlier:
For (var count = 0; count
Of course, the cycles can be much more complex than these simple examples, and sometimes multiple variables change in each iteration of the loop. This situation is the only time in JavaScript where the comma operator is often used - it allows you to combine multiple initialization and incrementing expressions into a single expression suitable for use in a for loop:
Var i,j; for (i = 0, j = 0; i
for/in loopThe for/in loop uses the for keyword, but it is completely different from a regular for loop. The for/in loop has the following syntax:
for (variable in object) (statement)
The variable here is usually the name of the variable, but you can also use the var statement, which declares a single variable. The object parameter is an expression that returns an object. And as usual, an instruction is an instruction or block of instructions that forms the body of a loop.
To traverse the elements of an array, it is natural to use a regular for loop:
Var arr = ; for (var i = 0; i
The for/in statement also naturally allows you to traverse the properties of an object:
// Create a new object var obj = (name:"Alex", password:"12345" ); for (var i in obj) ( // Print the value of each object property console.log(obj[i]); )
To execute a for/in statement, the JavaScript interpreter first evaluates the expression object. If it returns null value or undefined, the interpreter skips the loop and moves on to the next instruction. If the expression returns a simple value, it is converted to an equivalent wrapper object. Otherwise, the expression returns an object. The interpreter then executes one iteration of the loop for each enumerable property of the object. Before each iteration, the interpreter evaluates the value of the expression, stores it in a variable, and assigns it a property name (a string value).
Loops are designed to execute the same instructions over and over again.
There are 4 types of loops in JavaScript:
- The for loop. This loop is used when the exact number of repetitions of the same instructions is known.
- While loop. It is designed to execute the same instructions as long as a given condition is true.
- The do...while loop. This cycle similar to a while loop, but the condition is checked not before executing repeated statements, but after them. This way, unlike a while loop, even if the condition is initially false, the statements will be executed at least once.
- The for...in loop. It is used when you need to iterate through all the properties in an object or each element in an array.
For loop syntax:
For (initialization; condition; final expression) ( /* loop body */ )
- initialization is an expression that is executed once before the loop is executed; usually used to initialize a counter;
- a condition is an expression whose truth is checked before each iteration; if the expression evaluates to true, then iteration is performed, otherwise the for loop exits;
- the final expression is the expression that is executed at the end of each iteration; usually used to change the counter;
- loop body - instructions that need to be repeated.
Let's look at an example of a loop that will print numbers from 1 to 9 to the console:
Var i; // For loop from 1 to 9, in steps of 1 for (i = 1; i 4) ( console.log(j); j -= 1; if ((j % 2) != 0) ( continue checkj; ) console.log(j + " even."); ) console.log("i = " + i); console.log("j = " + j); )
for...inThe for...in statement iterates through all enumerable properties of an object. JavaScript will execute the specified expressions for each individual property. The for...in loop looks like this:
For (variable in object) (expressions)
ExampleThe following function takes an object and its name as its argument. It then iterates through all the properties of the object and returns a string that contains the property names and their values.
Function dump_props(obj, obj_name) ( var result = ""; for (var i in obj) ( result += obj_name + "." + i + " = " + obj[i] + "
"; ) result += ""; return result; )
For a car object with make and model properties, result will :
Car.make = Ford car.model = Mustang
Example No. 2You can also display the value by key:
Let obj = (model: "AUDI A8", year: "2019", color: "brown") for (key in obj) ( console.log(`$(key) = $(obj)`); ) // model = AUDI A8 // year = 2019 // color = brown
ArraysAlthough it is tempting to use for...in as a way to iterate through all the elements of an Array, this operator returns the name of user-defined properties in addition to the numeric indexes. Thus, it is better to use standard for for numeric indexes when interacting with arrays, since the for...in statement iterates over user-defined properties in addition to the array elements if you modify the array, such as adding properties and methods.
For ( variable of object) { expressions}
The following example shows the difference between for...of and for...in loops. While for...in iterates over property names, for...of iterates over property values:
Let arr = ; arr.foo = "hello"; for (let i in arr) ( console.log(i); // prints "0", "1", "2", "foo" ) for (let i of arr) ( console.log(i); / / outputs "3", "5", "7")
JavaScript loops allow you to perform repetitive calculations over and over again. They optimize the coding process by executing the same statement or block of statements that form the body of a loop a specified number of times (using a counter variable) or while a specified condition is true. Loops iterate over a sequence of values. Executing a loop once is called iteration.
The performance of a loop is affected by the number of iterations and the number of operations performed in the loop body of each iteration.
In JavaScript there are the following operators cycle:
1) for is used when you know in advance how many times you need to do something;
2) for...in is used to traverse the properties of objects;
3) while is used when you don’t know how many times you need to do something;
4) do...while works similarly to the while statement. It differs in that do...while always executes the expression in curly braces, but at least once, even if the condition test returns false .
The for loop is used to iterate through the elements of arrays or array-like objects such as arguments and HTMLCollection. The condition is checked before each iteration of the loop. If the check is successful, the code inside the loop is executed, otherwise the code inside the loop is not executed and the program continues from the first line immediately following the loop.
The next loop will print the line Hello, JavaScript! Five times.
For (var i = 0; i< 5; i++) {
console.log(i + ": Hello, JavaScript!");
}
Rice. 1. Result of executing a for loop on the console
The for loop consists of three different operations:
Step 1. initialization var i = 0; — declaration of a counter variable that will be checked during loop execution. This variable is initialized with the value 0. Most often, variables named i, j and k act as loop counters.
Step 2. checking condition i< 5; — условное выражение, если оно возвращает true , тело цикла (инструкция в фигурных скобках) будет выполнено. В данном примере проверка условия идёт до тех пор, пока значение счётчика меньше 5 .
Step 3. The final i++ operation is the counter increment operation, which increases the value of the variable var i by one. Instead of the increment operation, the decrement operation can also be used.
At the end of the loop, the variable var i is stored at 1. The next iteration of the loop is executed for (var i = 1; i< 5; i++) { } . Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i < 5; возвращает true .
1.2. Printing array valuesTo print array values using a for loop, you need to use the property array length. This will help you determine the number of elements in the array and loop the same number of times.
The script below will display five messages with the names of the colors:
Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"]; for (var i = 0; i< flowers.length; i++){ alert(flowers[i] + " - это цветок."); }
If the value length properties doesn't change as the loop runs, you can store it in a local variable and then use that variable in a conditional expression. This way, you can increase the speed of the loop, since the value of the length property will be retrieved only once during the entire duration of the loop.
Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"], len = flowers.length; for (var i = 0; i
2. Loop for...inFor...in loops are used to traverse the properties of non-array objects. This kind of traversal is also called enumeration. When traversing, it is recommended to use the hasOwnProperty() method to filter out properties that were inherited from the prototype.
For example, let's create an object using an object literal.
Var user = ( name: "Alice", age: 25, country: "Russia" ); for (var prop in user) ( console.log(prop + ": " + user); ) 
Rice. 2. Result of executing the for...in loop on the console
Suppose that in a scenario before or after the user object was created, the prototype of the Object object was extended additional method clone() .
If (typeof Object.prototype.clone === "undefined") ( Object.prototype.clone = function () (); )
Since the prototype inheritance chain is constantly checked by the interpreter, all objects automatically gain access to the new method.
Rice. 3. Result of repeating the for...in loop on the console To avoid detection of this method while enumerating the properties of the user object, the hasOwnProperty() method is used, which will filter out the properties of the prototype.
Var user = ( name: "Alice", age: 25, country: "Russia" ); if (typeof Object.prototype.clone === "undefined") ( Object.prototype.clone = function () (); ) for (var prop in user) ( if (user.hasOwnProperty(prop)) ( console.log (prop + ": " + user); ) ) 
Rice. 4. The result of listing the properties of an object using the hasOwnProperty() method
The while loop is a loop with a preliminary check of a conditional expression. The statement inside the loop (block of code in curly braces) will be executed if the conditional expression evaluates to true . If the first check returns false , the block of instructions will not be executed even once.
After the loop iteration completes, the conditional expression is again tested for truth and the process is repeated until the expression evaluates to false . In this case, the program will continue from the first line immediately after the loop (if there is one).
This loop will display the multiplication table for the number 3:
Var i = 1; var msg = ""; while(i< 10) {
msg+= i + " x 3 = " + (i * 3) + "
"; i++; ) document.write(msg); 
Rice. 5. Result of executing the while loop
Loop do...while; checks the continuation condition after the loop is executed. Unlike the while loop, in do...while; The body of the loop is executed at least once, since the condition is checked at the end of the loop, and not at the beginning. This loop is used less frequently than while , since in practice a situation where at least one loop execution is required is rare.
Var result = ""; var i = 0; do ( i += 1; result += i + " "; ) while (i< 5);
document.write(result);
Rice. 6. Result of executing the do...while loop
In the following example, the statements within a loop are executed once, even if the condition is not true.
Var i = 10; do ( document.write(i + " "); i++; ) while (i< 10);
5. Infinite loopsWhen you create any loop, you can create an infinite loop that will never end. Such a loop could potentially continue to run as long as the user's computer is running. Majority modern browsers can detect this and prompt the user to stop running the script. To avoid creating an infinite loop, you must be sure that the given condition will return false at some point. For example, the following loop specifies a condition that never returns false because i will never be less than 10:
For (var i = 25; i > 10; i++) ( document.write("This sentence will run forever...
");
}
A loop inside another loop is called a nested loop. With each iteration of the loop, the nested loop is executed completely. Nested loops can be created using a for loop and a while loop.
For (var count = 1; count< 3; count++) {
document.write(count + ". Строка цикла
"); for (var nestcount = 1; nestcount< 3; nestcount++) {
document.write("Строка вложенного цикла
");
}
}
Rice. 7. Result of executing a nested for loop
The loop can be controlled using break statements; and continue; .
7.1. Operator break;Operator break; ends execution of the current loop. It is used in exceptional cases when the loop cannot execute for some reason, such as if the application encounters an error. Most often the break operator; is part of the if construct.
When the statement break; used without a label, it allows you to exit a loop or switch statement. The following example creates a counter whose values should range from 1 to 99, but the break statement breaks the loop after 14 iterations.
For (var i = 1; i< 100; i++) {
if (i == 15) {
break;
}
document.write(i);
document.write("
");
}
Rice. 8. The result of the break operator in the for loop
For nested loops, the break statement; used with a label that terminates the named instruction. A label allows you to exit any block of code. A named statement can be any statement external to a break statement; . The label can be the name of an if statement or the name of a block of statements enclosed in curly braces just to assign a label to that block. Between keyword break; and the label name does not allow a newline.
Outerloop: for(var i = 0; i< 10; i++) {
innerloop:
for(var j = 0; j < 10; j++) {
if (j >3) break; // Exit the innermost loop if (i == 2) break innerloop; // Same thing if (i == 4) break outerloop; // Exit outer loop document.write("i = " + i + " j = " + j + "
"); ) ) document.write("FINAL i = " + i + " j = " + j + "
");
Operator continue; stops the current iteration of the loop and starts a new iteration. In this case, the while loop returns directly to its condition, and the for loop first evaluates the increment expression and then returns to the condition.
This example will display all even numbers:
Var i; for(i = 1; i