while Keyword

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;
 }

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());
}

const iterator = document.createNodeIterator(
  document, NodeFilter.SHOW_COMMENT);
let currentNode;
while ((currentNode = iterator.nextNode()) !== null) {
  console.log(currentNode.textContent.trim());
}