Proper way to break out of an if block in JavaScript?

Question

In an if block structure, such as below, suppose that condition_1 and condition_2 are mutually exclusive but there are times when condition_2 and later conditions can both be true; and, when condition_2 is true, all that is desired is to break out of the if block and continue with the rest of the code, similar to a switch statement.

All the conditions, except condition_2, are matches statements for a listener on a parent container with several buttons. When condition_2 is true, the buttons below it should be disabled.

if ( condition_1 ) { }
else if ( condition_2 ) {  }
else if ( condition_3 ) {  }
else if ( condition_4 ) {  }
// ...
else if ( condition_n ) {  };   
// More code in the function before returning.

It could be coded as:

if ( condition_1 ) { }
else if ( !condition_2 && condition_3 ) {  }
else if ( !condition_2 && condition_4 ) {  }
// ...
else if ( !condition_2 && condition_n ) {  };   
// More code in the function before returning.

or

if ( condition_1 ) { }
else if ( !condition_2 )
  {
    if ( condition_3 ) {  }
    else if ( condition_4 ) {  }
    // ...
    else if ( condition_n ) {  };   
  };
// More code in the function before returning.

Would it be a "bad" programming practice to just code as in the first block and just place no code between the braces for condition_2, such that when condition_2 is true, there's no code to perform but the other conditions are not tested and it picks up with the code at the end of the if block?

Is there a better more professional way to do accomplish the same?

I read about putting a label on the if statement and then using break label, but I don't see what that adds; and it was mentioned that the method might not be efficiently employed by the compiler/interpreter.

Thank you.

I would personally prefer the last style because the intention is clear although I see no harm in using the first method with an empty block. Method 2 is extra verbose and a performance hit as condition 2 is being re-evaluated unnecessarily , I wouldn't recommend that. — Avin Kavish
– Avin Kavish, Commented Jun 14, 2019 at 6:41
Thank you for your comment. The empty block appears to be the simplest and easiest for the browser but unclear for someone else reading the code. — Gary
– Gary, Commented Jun 14, 2019 at 7:02

Nina Scholz · Accepted Answer · 2019-06-14 20:47:44Z

7

You could take a labeled statement and break the block statement{}, if a condition is true.

var a = 2;
block: {
    if (a === 1) {
        console.log(1);
        break block;
    }
    if (a === 2) {
        console.log(2);
        break block;
    }
    if (a === 3) {
        console.log(3);
        break block;
    }
    console.log('end of block');
}

Or take another nested function in the same scope and return early.

function check () {
    if (a === 1) {
        console.log(1);
        return;
    }
    if (a === 2) {
        console.log(2);
        return;
    }
    if (a === 3) {
        console.log(3);
        return;
    }
    console.log('end of function');
}

var a = 2;
check();

edited Jun 14, 2019 at 20:47

answered Jun 14, 2019 at 6:40

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gary Over a year ago

Thanks for your response. I thought of using the function but figured it was more work for the browser. I would have never thought of the block method. I assume it is no more work for the browser than the if, else if..

Glenn Carver Over a year ago

javascript labeled statements deserve more attention than they have now

Collectives™ on Stack Overflow

Proper way to break out of an if block in JavaScript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related