Print bookPrint book

while Keyword

Site: Saylor Academy
Course: PRDV401: Introduction to JavaScript I
Book: while Keyword
Printed by: Guest user
Date: Friday, 2 May 2025, 7:59 PM

Table of contents

while Keyword

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

Click here to try an example using Code Runner.

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 the while 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 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.