What is the main difference between these two loops as a solution to this exercise? (learning javascript)

Question

I am learning JS and came across this exercise:

Write a loop which prompts for a number greater than 100. If the visitor enters another number – ask them to input again.

The loop must ask for a number until either the visitor enters a number greater than 100 or cancels the input/enters an empty line.

Here we can assume that the visitor only inputs numbers. There's no need to implement a special handling for a non-numeric input in this task.

My solution works and was as follows:

let value;
while (true)    {
    value = prompt('Enter a number greater than 100', 0);
    if (value > 100 || value === '');
    console.log(value);
    break;
} 

The MDN solution was this, and though it is shorter and more simple, it seems to accomplish the same task.

let num;

do {
  num = prompt("Enter a number greater than 100?", 0);
} while (num <= 100 && num);

Is my solution still valid? Is the MDN one more proper?

I just want to make sure I am understanding things correctly as I go.

Answer 1

If your solution worked before, I think you probably typed in your solution incorrectly here. I am going to assume you meant to write:

 if (value > 100 || value === '') {
    console.log(value);
    break;
 }

Since you're just starting out with JS, you will eventually learn that there will be multiple ways you can handle any given coding problem. It will not always be a good answer/wrong answer type of scenario. Sometimes there are multiple ways to accomplish the same thing.

In this example, the MSN solution is better in terms of readability and possibly safety.

The MSN solution creates a while loop with the exit condition identified in the while statement. This loop will exit when that condition is met.

In your solution, the loop will never exit on it's own, the while() statement will always evaluate to 'true'. This loop needs an explicit exit statement, which you provide with the if() condition.

Your method, although it works, is a little bit less safe in terms of code readability and overall maintenance profile. For example, a future developer could by mistake change the if() condition and inadvertently create a never ending loop.

Or, if the loop contained several dozen lines of code, a developer may miss the if condition, and may add some important code after the if condition (such code would not execute when the exit condition is met.)

Yes, this specific sample exercise is trivial, so the code complexity and readability may not matter. But in large enterprise applications with hundreds of lines of code, such code choices carry serious risks with costly implications.

That said, I'll reiterate - as you learn more about JS, you will often find that there are multiple ways of solving any given problem. Sometimes you do want to create an explicit exit condition through an if() statement, on rare occasions you will want to create a never ending loop.

As you explore more complex problems, you will find needs for such solutiosn. So keep learning, keep trying different solutions, and keep asking questions.