While not loop javascript

JavaScript While Loop

Loops can execute a block of code as long as a specified condition is true.

The While Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax

Example

In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:

Example

If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

The Do While Loop

The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax

Example

The example below uses a do while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:

Example

Do not forget to increase the variable used in the condition, otherwise the loop will never end!

Comparing For and While

If you have read the previous chapter, about the for loop, you will discover that a while loop is much the same as a for loop, with statement 1 and statement 3 omitted.

The loop in this example uses a for loop to collect the car names from the cars array:

Example

const cars = [«BMW», «Volvo», «Saab», «Ford»];
let i = 0;
let text = «»;

The loop in this example uses a while loop to collect the car names from the cars array:

Example

const cars = [«BMW», «Volvo», «Saab», «Ford»];
let i = 0;
let text = «»;

Источник

while

The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.

Try it

Syntax

while (condition) statement 

An expression evaluated before each pass through the loop. If this condition evaluates to true, statement is executed. When condition evaluates to false, execution continues with the statement after the while loop.

An optional statement that is executed as long as the condition evaluates to true. To execute multiple statements within the loop, use a block statement ( < /* . */ >) to group those statements.

Note: Use the break statement to stop a loop before condition evaluates to true.

Examples

Using while

The following while loop iterates as long as n is less than three.

let n = 0; let x = 0; while (n  3)  n++; x += n; > 

Each iteration, the loop increments n and adds it to x . Therefore, x and n take on the following values:

• After the first pass: n = 1 and x = 1
• After the second pass: n = 2 and x = 3
• After the third pass: n = 3 and x = 6

After completing the third pass, the condition n < 3 is no longer true, so the loop terminates.

Using an assignment as a condition

In some cases, it can make sense to use an assignment as a condition — but when you do, there’s a best-practice syntax you should know about and follow.

Consider the following example, which iterates over a document’s comments, logging them to the console.

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); let currentNode; while (currentNode = iterator.nextNode())  console.log(currentNode.textContent.trim()); > 

That’s not completely a good-practice example, due to the following line specifically:

while (currentNode = iterator.nextNode())  

The effect of that line is fine — in that, each time a comment node is found:

1. iterator.nextNode() returns that comment node, which gets assigned to currentNode .
2. The value of currentNode = iterator.nextNode() is therefore truthy.
3. So the console.log() call executes and the loop continues.

…and then, when there are no more comment nodes in the document:

1. iterator.nextNode() returns null.
2. The value of currentNode = iterator.nextNode() is therefore also null , which is falsy.
3. So the loop ends.

But although the code works as expected, the problem with that particular line is: conditions typically use comparison operators such as === , but the = in that line isn’t a comparison operator — instead, it’s an assignment operator. So that = looks like it’s a typo for === — even though it’s not actually a typo.

Therefore, in cases like that one, some IDEs and code-linting tools such as ESLint and JSHint — in order to help you catch a possible typo so that you can fix it — will report a warning such as the following:

Expected a conditional expression and instead saw an assignment.

But there’s a best-practice way to avoid that warning: Make the code more-explicitly indicate it intends the condition to be whether the value of the currentNode = iterator.nextNode() assignment is truthy. And you do that minimally by putting additional parentheses as a grouping operator around the assignment:

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); let currentNode; while ((currentNode = iterator.nextNode()))  console.log(currentNode.textContent.trim()); > 

But the real best practice is to go a step further and make the code even more clear — by adding a comparison operator to turn the condition into an explicit comparison:

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); let currentNode; while ((currentNode = iterator.nextNode()) !== null)  console.log(currentNode.textContent.trim()); > 

Along with preventing any warnings in IDEs and code-linting tools, what that code is actually doing will be much more obvious to anybody coming along later who needs to read and understand it or modify it.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 5, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник