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
js
while (condition)
statement
condition
-
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 thewhile
loop. statement
-
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 beforecondition
evaluates to true.
Examples
Using while
The following while
loop iterates as long as n
is less than
three.
js
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 andx
= 1 - After the second pass:
n
= 2 andx
= 3 - After the third pass:
n
= 3 andx
= 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.
js
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:
js
while (currentNode = iterator.nextNode()) {
The effect of that line is fine — in that, each time a comment node is found:
iterator.nextNode()
returns that comment node, which gets assigned tocurrentNode
.- The value of
currentNode = iterator.nextNode()
is therefore truthy. - So the
console.log()
call executes and the loop continues.
…and then, when there are no more comment nodes in the document:
iterator.nextNode()
returns null.- The value of
currentNode = iterator.nextNode()
is therefore alsonull
, which is falsy. - 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:
js
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:
js
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
Specification |
---|
ECMAScript Language Specification # sec-while-statement |
Browser compatibility
BCD tables only load in the browser