DEV Community

Romain Guillemot
Romain Guillemot

Posted on • Edited on • Originally published at rocambille.github.io

For...else in JavaScript

A common pattern when using a for loop is to combine it with an else statement. This is possible in many template engines, such as Twig, as shown below:

<ul>
  {% for user in users %}
    <li>{{ user.username|e }}</li>
  {% else %}
    <li><em>no user found</em></li>
  {% endfor %}
</ul>
Enter fullscreen mode Exit fullscreen mode

Yet in programming languages like JavaScript, a for...else construct is not supported:

for (const user of users) {
  console.log(user.username);
} else { // ❌ this is not working
  console.log("no user found");
}
Enter fullscreen mode Exit fullscreen mode

The else keyword only works in combination with the if keyword. That's the limit, but also a solution:

if (users.length > 0) {
  console.log("no user found");
} else {
  for (const user of users) {
    console.log(user.username);
  }
}
Enter fullscreen mode Exit fullscreen mode

"Reversing" the logic let us approach the for...else pattern. Instead of writing the loop first then the else, we're checking the "no user" case first, to end up in the loop after the else. Here the else block only contains one statement: the for statement. We can remove some curly brackets and shorten the code:

if (users.length > 0) {
  console.log("no user found");
} else for (const user of users) {
  console.log(user.username);
}
Enter fullscreen mode Exit fullscreen mode

That's the closest I get from a for...else pattern in JavaScript. What do you think? Do you see a closer one?

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)