Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

while

BaselineWidely available

Thewhile 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

let n = 0;while (n < 3) {  n++;}console.log(n);// Expected output: 3

Syntax

js
while (condition)  statement
condition

An expression evaluatedbefore each pass through the loop. If this conditionevaluates to true,statement is executed. When conditionevaluates to false, execution continues with the statement after thewhile loop.

statement

A statement that is executed as long as the condition evaluates to true. You can use ablock statement to execute multiple statements.

Description

Like other looping statements, you can usecontrol flow statements insidestatement:

  • break stopsstatement execution and goes to the first statement after the loop.
  • continue stopsstatement execution and re-evaluatescondition.

Examples

Using while

The followingwhile loop iterates as long asn is less thanthree.

js
let n = 0;let x = 0;while (n < 3) {  n++;  x += n;}

Each iteration, the loop incrementsn and adds it tox.Therefore,x andn 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 conditionn < 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. 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.

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()) {

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

  1. iterator.nextNode() returns that comment node, which gets assigned tocurrentNode.
  2. The value ofcurrentNode = iterator.nextNode() is thereforetruthy.
  3. So theconsole.log() call executes and the loop continues.

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

  1. iterator.nextNode() returnsnull.
  2. The value ofcurrentNode = iterator.nextNode() is therefore alsonull, which isfalsy.
  3. So the loop ends.

The problem with this line is: conditions typically usecomparison operators such as===, but the= in that line isn't a comparison operator — instead, it's anassignment operator. So that=looks like it's a typo for=== — even though it'snot actually a typo.

Therefore, in cases like that one, somecode-linting tools such as ESLint'sno-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:

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 agrouping operator around the assignment:

js
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'sno-cond-assign's default configuration, as well asPrettier, 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:

js
while ((currentNode = iterator.nextNode()) !== null) {

There are other ways to write this pattern, such as:

js
while ((currentNode = iterator.nextNode()) && currentNode) {

Or, forgoing the idea of using awhile loop altogether:

js
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.

Specifications

Specification
ECMAScript® 2026 Language Specification
# sec-while-statement

Browser compatibility

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp