The last time the loop will be executed is when i is equal. For Loops in JavaScript

The history of the formation of modern programming language syntax is akin to understanding the processes of formation of the Universe. What and how it was in the beginning... But now everything is simple and accessible.

Ultimately, the algorithm is always a sequential chain of commands. Parallelism in programming is a set of somehow combined sequences. serial or parallel chain of command has never been more practical. Labels, transitions and conditions - everything was enough for any solution. Functional languages ​​have made these ideas irrelevant, but the need to repeat sections of code remains.

Browser: DOM, its language + server

In JavaScript, loops remain, although functional ideas have acquired a special meaning. There may be something left over from "Lisp" and "Prolog", but most likely the area where JavaScript lives led to what is there, but it is doubtful that this is the last solution.

JavaScript runs inside the browser, which receives the page, parses it into the DOM, and runs the first script. All other pages, including those loaded on this one, are the work of the developer manipulating the language, through which the code on the server can be called and the result obtained using the AJAX mechanism.

The browser executes JavaScript code, which can use browser objects, including the one that transmits information to the server and receives a response, which can be HTML markup, styles, and the code itself. The response can be represented by arrays and objects. The point of using loops in JavaScript is lost, there are plenty of opportunities to do without them, and the risk of hanging the browser with an endless sequence of commands is not the best solution.

Loops themselves are present in most JavaScript syntactic constructs; the developer can supplement the standard constructs with his own functions.

JavaScript's Position in Code Space

A modern programmer doesn’t even think that the while, do while, ...) he uses is ultimately a series of processor cycles, a simple sequence binary operations, interrupted by counter checks, that is, conditions.

There is no loop as such at the machine language level: there is a combination of ordinary commands, conditional operations and transitions. One level up, no matter what tool is used to develop the browser and JavaScript interpreter, there will definitely be loops. Moreover, the “pieces of code” will be presented at different times and different generations programmers. The floor above is the JavaScript "building". The syntax of which offers modern JavaScript loops.

JS is a wonderful language: practical, modern and full-featured. The syntax of this tool includes all the constructs that have stood the test of time and have become the unshakable foundation of any algorithm. But are cycles really necessary? Progress in programming often asked itself questions of a fundamental nature, but only in some cases did it find a solution.

Objective grounds

A cycle can have only two options: by condition or by counter, but essentially (at the lowest level) any cycle is only by condition. In some languages ​​there is a cycle "for each". In JavaScript foreach loops are represented by the prop in object construct, but you can use the array.forEach(...) option.

In any case, there are two options: the programmer who ultimately executes all the programmer’s algorithms, even those writing in interpretive languages, has no other options for repeating the chain of commands: he can execute something again until:

• the counter counts;
• as long as the condition is met.

JavaScript is a typical interpreter. Its peculiarity: it operates inside the browser, uses its objects and allows you to execute algorithms on the client side, both when the page is loaded into the browser and during its operation.

Simple loop one by one

In JavaScript, foreach loops look like applying a function to an array:

The use of such cycles does not pose any difficulties. Formally, there is no cycle as such. There is a sequential function call to the elements of the array.

Loop on a counter

For loops look more familiar in JavaScript:

Here the counter is a variable whose value changes according to a formula and a condition is a sign of the end of the cycle. The formula and condition do not need to include a loop variable. But control over the moment the cycle ends is completely determined by their content.

Conditional loops

JavaScript offers an option with while depending on when the condition needs to be checked. If the body of the loop may not be executed even once, this is one thing; if the body must be executed at least once, this is another:

In the first case, when interpreting the while construct, JavaScript first checks the condition, and if it is true, it executes the loop. In the second case, the loop will be executed first. If, as a result of changing the variables specified in the design condition do while, it will evaluate to false and the loop will stop executing.

Massive combinations of simple algorithms

The main task (component part) of any algorithm is to find, and only then make a decision about what to do next. The most primitive search option is accessing a variable, the result is obtained directly. If there are many variables, or it has many values ​​(an array), then to select a value it is necessary to find something that will determine the further behavior of the script.

Such a simple doctrine made loop with counter in JavaScript a kind of panacea for all problems. Modern computers differ in speed. There is plenty of time to run scripts in the browser, there is no need to rush. It’s easier than ever to go through something for the sake of something. As a result, on J AvaScript for loops have become very popular.

There seems to be nothing bad about this. But behind this approach, the essence for which this or that algorithm is written is easily lost. Data is not meaningless. Everything for which any program is written has meaning. Excessive use on J avaScript for loops, the developer may not recognize the required entity and not create an adequate algorithm.

Functionality, another reflection of reality

Applying JavaScript loops, examplescode of the same type can be represented by functions - the algorithm will immediately transform, the main body of the script will decrease in size, everything will become readable and understandable.

This is not a radically new solution, but in essence it does not go beyond other language constructs. In particular, J avaScript loops can be found in classical function split():

var cResult = "9,8,7,6,5,4" ;
var aResult = cResult .split ( "," );

There is no loop here, but how else can this be done other than by looking for the "," symbol and using it to separate one number from another.

Abstracting from how this is implemented inside the split() function, you can supplement JavaScript with your own functionality that uses loops, which is more convenient from a usage point of view. It is important that this approach leads to the development of functionality for each task, respectively, but the general will still be with this approach.

These functions allt(), padc(), padl() and padr() are something that JavaScript doesn't have, but sometimes you need to remove spaces from a string or align the length of a string on the left, right, or both sides. The bodies of these functions contain JavaScript loops. Simple, accessible, and the algorithm that uses this will never crash.

Variants of functions for converting numbers from hexadecimal to 10th number system and vice versa, more simply, from one data format to another, are performed here using do while loops. Very compact and efficient language syntax.

Correct cycles - a reflection of reality

JavaScript is no match for other programming languages ​​and does not differ in the variety of versions, and most importantly, it strives not to change the syntax, but to develop and expand it.

The mindset of a programmer using JS is different from the thinking of a PHP programmer (in particular, and other languages ​​in general, except that “Prolog” and its followers are not included in the general mainstream), when the algorithm is not limited to variables, arrays, assignment operators, and cyclic constructs.

If we imagine that there are no cycles, but the problem needs to be solved, then the simplest option (blindfold) is to assume that the program processes data that is a point or a system of points in information space. What is a point and what is a system of points is a matter of specific subject area. For a programmer, this thesis means: there is a simple given and there is a collection of simple data. Naturally, a simple datum of one level will be a system for a level below, and a point for a level above.

With this approach, the point's concern is to manifest its essence through its methods. When a point is in a supersystem, then the function of the system is to manifest its essence as a collection of essences of the points included in it.

This approach is as old as the idea of ​​programming languages, but has not yet been adequately reflected in programming. Many programmers think correctly, but the result of their creativity leaves much to be desired.

It helps to wear a blindfold sometimes to see the world!

Like other programming languages, JavaScript implements cycles .
A few words about their main purpose. Suppose we have a block of code that definitely needs to be repeated a certain number of times in a row:

Var mew = "Mew!";
console.log("Cat says:");

// here is repeating code
console.log(mew);
console.log(mew);
console.log(mew);
console.log(mew);

IN in this case we repeat writing the line "Mew!" to the console. exactly 4 times. We see that if we have to repeat some more complex block of code, it will be very cumbersome. Thus, a mechanism is needed that will repeat a certain block of code the required number of times. This is exactly what it does cycle .

JS uses loops similar to other popular programming languages ​​(C/C++, PHP, JAVA):

• for ( ) - repeats a certain block of code depending on the specified parameters


• while(booleanExpression) - repeats some block of code depending on a boolean value booleanExpression


• do-while(booleanExpression) - analogous to the previous type of cycle, but with its own peculiarity

After each of these constructions, you must indicate the grouped one using curly braces { } block of code that will be repeated. The repetitions in the cycle itself are called iterations . A block of code that is repeated is called body of the loop .

In this tutorial we'll look at the for() loop. As options value you need to specify three "parameters" S1; C1; S2 , which are separated by semicolons:

For (S1; C1; S2) (
code-to-repeat;
}

Parameter S1 - this is the instruction that will completed before the first iteration . This is actually the initialization of the loop.

Parameter C1 is a Boolean expression or value that will be will be checked before each iteration cycle. If this expression is true, then the next iteration is performed. Otherwise, the cycle ends. In fact, this is a condition for the continuation of the cycle. Note that for the first iteration this check will be performed after the instruction is executed S1 .

Parameter S2 - this is an instruction that executed after each iteration .

This can be represented schematically in the following image:

Now let's go back to our example and rewrite it using a for loop:

Here the S1 instruction is the definition and initialization of the variable i. The condition for continuing the cycle is the expression i<= 4 . В качестве инструкции S2, которая выполняется после каждой итерации, выступает операция инкремента переменной i - увеличение ее значения на 1 . Таким образом, получим повторение записи в консоль значения переменной mew ровно 4 раза. Переменная i в таких циклах называется counter .

Let's look at another example of using this loop - iterating through the values ​​of an array.

Var arr = ;

For (i = 0; i console.log(arr[i]);
}

In this case, we dynamically created a variable i, which is the iteration counter, and in the condition we used a property of the array object, which contains the number of its elements.

The main purpose of JavaScript's while is to repeatedly run a specific piece of code, over and over again. It is very similar to a for loop with one important difference. Let me take a little of your time to explain the difference between these two types of cycles.

What is the difference between while and for loops?

The difference between these loops is how they stop executing a piece of code.

The for loop executes a set number of iterations. We know exactly how many times the loop will execute the code fragment contained in its body.

In while, everything happens differently. A JavaScript while loop runs as long as a certain condition is true. Once the condition evaluates to false, then the while loop terminates.

The reason these loops are different is that we can't necessarily know in advance when a given condition will no longer be true. Therefore, we cannot predict how many iterations of the while loop will complete before it breaks.

Pros and cons of the while loop

Let me start by looking at the only major downside to the while loop. It can work forever!

If you find yourself in a situation where the while loop continues to execute indefinitely, your program will get stuck (or freeze). Then you need to close the browser to interrupt the execution of the JavaScript code.

I should note that JavaScript's unmanaged while loop usually doesn't run forever. Because as programmers, we always have a responsibility to make sure that at some point the condition of our while loop becomes false .

Now regarding the “advantages” - they are very obvious. While will run continuously as long as the condition is met. An example of using a while loop is to ask the user to enter data. The loop will prompt you to enter data again and again until the user enters the correct data.

While loop syntax

The syntax of for and while loops is very similar.

Need to use keyword while , and also define the condition under which the loop will be executed. Like other control structures, the while loop defines its scope.

This is what the code should look like:

while () ( // insert code here that should be executed in a loop)

The hardest part is determining what condition or conditions need to be placed in the loop for it to work properly.

Remember that as long as the condition is true, the loop will continue to run. Let's look at an example of using while in JavaScript.

Example while loop

Let's say we want to ask the user to enter a number between 1 and 10. But what happens if he enters the wrong number?

In this case, we must ask him to enter the value again, and check if the condition is met ( whether a number from 1 to 10 is entered).

This is a case where a for loop would fail miserably. Because we cannot know in advance how many times we will have to ask the user to enter the correct number. In this case, the while loop comes to our aid.

Here's what our code might look like:

var theNumber = prompt("Please enter a number between 1 and 10."); while (theNumber< 1 || theNumber >10 || isNaN(theNumber)) ( theNumber = prompt("Invalid value entered, please enter a number between 1 and 10!"); ) alert("Excellent! You entered a number: " + theNumber);

It's worth noting that in the above example we have three separate conditions in a JavaScript while loop.

These are the three conditions: theNumber 10 || isNaN(theNumber). They indicate the following:

• IF theNumber is less than 1, OR;
• IF theNumber is greater than 10, OR;
• IF theNumber is NOT a number, then continue the loop.

Since we are using the OR operator (||) between all the conditions, this means that if any of the conditions are true, then general condition the while loop will evaluate to true and the loop will continue executing.

Only if all three conditions evaluate to false will the while loop's overall condition evaluate to false and it will stop.

Conclusion

JavaScript while loop is the only real loop in programming languages. for is just a special variation of the while loop.

This is a case where you can recreate a for loop yourself using the while loop syntax, watch and learn:

var counter = 0; while(counter< 10) { counter = counter + 1; console.log("The counter is currently at: " + counter); }

The code will be repeated exactly 10 times, no more and no less. This is exactly how the for loop works.

There's no need to be afraid to use JavaScript while . Because without it, many applications simply would not work properly!

I hope you enjoyed this article.

The translation of the article “While Loop in JavaScript” was prepared by the friendly project team.

Good bad

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.

JavaScript has 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 loop

The if statement is basic conditional operator in the JavaScript language, and the basic loop for JavaScript can be considered 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 loop

A 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 loop

A 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 loop

The 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).

The for loop is the most commonly used loop in JavaScript.

Its design looks like this:

For (start; condition; step) ( /* loop body */ )

It's really simple. Let's look at an example:

Var i; for (i = 1; i

In this example:

• Start of the cycle: i = 1 (starting from value i = 1)
• Cycle condition: i
• Cycle step: i++ (at each loop step i is increased by 1)
• Loop Body: document.write("

  The cycle step number is executed: " + "

  "); (display a message on the screen)

Step-by-step algorithm for executing this for loop, in more detail:

1. Start of the loop: variable i is set to 1. This part of the loop is executed once.
2. The loop condition (i 5) is checked - the end of the loop.
3. The body of the loop is executed.
4. The loop step is executed. In our case i++. It is always executed after the body of the loop.
5. Return to point 2.

If the body of the loop consists of one instruction, then the curly braces {...} it is not necessary to put it.

The variable i does not disappear after the loop ends. It continues to exist and its value after the end of the cycle will be equal to 6.

Let's summarize this data in a new example:

Var i; for (i = 1; i

Here, curly braces were not used to create the loop body.

Braces {...} form a block in JavaScript - this is one of the language constructs. That is, if there are curly braces after the for loop statement, this means that the JavaScript handler must execute the entire JavaScript block.

Similar to a block, you can specify a function in a for loop. Here's an example:

For (var i = 1; i

But when declaring a function, there are curly braces {...} required. Their absence will result in an error.

Please note that in this loop the variable i is declared at the beginning of the loop: for ( var i = 1; i

Skipping for parts

In general, the beginning of the cycle need not be written:

Var i = 1; for(; i

You see, at the beginning of the loop there is just a semicolon, and the loop works fine.

You can also remove the step:

Var i = 1; for(; i

This for loop has turned into an analogue of the while loop (i

You can put an expression in a condition that changes a variable.

For (i = 10; i--;) ( document.write("

The loop step is executed: " + i + ".

"); }

Since the JavaScript interpreter expects to receive a Boolean value, any value results in a Boolean type, so when the variable i becomes 0 (false) as a result of the next decrement, the loop will stop.

Infinite for loop

Yes, yes, I know that it’s correct to write infinite :)

So, the loop will be endless if the condition is always true. Here's an example:

For (var i = 1; i

In this example, the variable i will decrease and never become greater than five. The loop will run forever. Try running this script. For me, Chrome “got lost in thought” and didn’t display anything on the screen, but continued to think and think.

Be careful and avoid random creation endless loops.

Interrupting the for loop

To interrupt a for loop, just like to interrupt any other loop, use the break command. When the JavaScript engine encounters a break command in the body of a loop, it stops executing the loop and begins executing the script instructions that follow the loop. if there are any.

IN following example we will stop the loop at the third iteration (third step).

For (var i = 1; i

Let's complicate the example a little

Let's perform only 100 iterations of the infinite loop.

Var $counter = 1; for (var i = 1; i

Next iteration: continue

The continue command ends the current iteration and begins the next one.

The continue directive is the “younger sister” of the break directive; it stops only the iteration, and not the entire loop.

For (var i = 1; i

The loop below uses continue to output odd values:

For (var i = 0; i

Of course, odd values ​​can be output using a loop like this without a continue directive:

For (var i = 0; i

The break / continue directives in the "?"

Let's briefly describe the operator question mark"? ". It is similar to an if construct.

Logical design:

If (condition) ( a(); ) else ( b(); )

Works the same as code with the "?" operator.

Condition? a() : b(); var i = 2; document.write("

Part 1.

"); if (i == 2) document.write("

The condition worked.

"); else document.write("

The condition didn't work.

"); document.write("

Part 2.

"); i == 2 ? document.write("

The condition worked.

") : document.write("

The condition didn't work.

");

So, important, you cannot use break/continue to the right of the "?" operator

In JavaScript, syntactic constructs that do not return values ​​are prohibited from being used in the "?" operator.

The below example is not working, it contains an error:

For (var i = 0; i

Labels for break / continue

Sometimes it becomes necessary to create nested loops. In such a case, while the nested loop is running, it may be necessary to stop the parent loop or stop iteration of the parent loop. Tags are used for this.

You can use labels to designate loops, then use break or continue to exit the loop or continue the loop with a new iteration.

Markers are the only way for break and continue commands to affect the execution of the outer loop.

The label instruction is used only in conjunction with break or continue to provide an alternative exit from a loop.

The label has the syntax "name:", the label name must be unique. The mark is placed before the cycle, in the same line or with a line break.

Similarly, you can use the break directive in this place. But if you use it, as you understand, the execution of cycles will stop.

Var i, j; metka1: for (i = 0; i

JavaScript does not have a goto statement like PHP; it is only possible to use break or continue labels.

Tags are rarely used in JavaScript programming because they are thought to make the code harder to read and understand. It is recommended to use functions when coding.