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.
while
Try it
Syntax
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.
var n = 0; var 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.
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:
-
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:
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
Specification |
---|
ECMAScript Language Specification # sec-while-statement |
Browser compatibility
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | Deno | Node.js | |
while |
1
|
12
|
1
|
3
|
3
|
1
|
1
|
18
|
4
|
10.1
|
1
|
1.0
|
1.0
|
0.10.0
|
See also
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while