HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
let n = 0; while (n < 3) { n++; } console.log(n); // Expected output: 3
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 the while loop.
statement
A statement that is executed as long as the condition evaluates to true. You can use a block statement to execute multiple statements.
Like other looping statements, you can use control flow statements inside statement:
break
continue
The following while loop iterates as long as n is less than three.
n
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:
x
After completing the third pass, the condition n < 3 is no longer true, so the loop terminates.
In some cases, it can make sense to use an assignment as a condition. This comes with readability tradeoffs, so there are certain stylistic recommendations that would make the pattern more obvious for everyone.
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()
currentNode
currentNode = iterator.nextNode()
console.log()
…and then, when there are no more comment nodes in the document:
null
The problem with this 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 code-linting tools such as ESLint's no-cond-assign rule — in order to help you catch a possible typo so that you can fix it — will report a warning such as the following:
no-cond-assign
Expected a conditional expression and instead saw an assignment.
Many style guides recommend more explicitly indicating the intention for the condition to be an assignment. You can 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()); }
In fact, this is the style enforced by ESLint's no-cond-assign's default configuration, as well as Prettier, so you'll likely see this pattern a lot in the wild.
Some people may further recommend adding a comparison operator to turn the condition into an explicit comparison:
while ((currentNode = iterator.nextNode()) !== null) {
There are other ways to write this pattern, such as:
while ((currentNode = iterator.nextNode()) && currentNode) {
Or, forgoing the idea of using a while loop altogether:
const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); for ( let currentNode = iterator.nextNode(); currentNode; currentNode = iterator.nextNode() ) { console.log(currentNode.textContent.trim()); }
If the reader is sufficiently familiar with the assignment as condition pattern, all these variations should have equivalent readability. Otherwise, the last form is probably the most readable, albeit the most verbose.
Enable JavaScript to view this browser compatibility table.
do...while
for