Is using labels in JavaScript bad practice?

JavascriptLoopsLabelNested LoopsBreak

Javascript Problem Overview


I just found out about using label s in JavaScript, such as:

for (var i in team) {
    if(i === "something") {
        break doThis: //Goto the label
    } else {
        doThat();
    }
}

doThis: //Label
doIt();

I've not heard about this until now and I can't find much information online about it and I'm beginning to think there is a reason for that.

It seems to me like this is similar to a GOTO statement in other languages and would be considered bad practice. Would I be right in assuming this?

Javascript Solutions


Solution 1 - Javascript

The labels in JavaScript are used mainly with break, or continue in nested loops to be able to break the outer, or continue the outer loop from the code inside inner loop:

    outer:
    for (let i = 0; i < 10; i++)
    { 
       let k = 5;
       for (let j = 0; j < 10; j++) // inner loop
          if (j > 5) 
               break; // inner 
          else
               continue outer;  // it will go to next iteration of outer loop
    }

If you used continue without 'outer' label, it would go to the next iteration of inner loop. That's why there is a need for labels in Javascript.

Solution 2 - Javascript

Those are loop breaker identifiers. They are useful if you have nested loops (loops inside loops) and using these identifiers, you can conditionally specify when and which loop to break out from.

Solution 3 - Javascript

2020 edit, according to MDN:

> Labelled loops or blocks are very uncommon. Usually, function calls > can be used instead of loop jumps.

My 2015 answer: > Avoid using labels > > Labels are not very commonly used in JavaScript since they make > programs harder to read and understand. As much as possible, avoid > using labels and, depending on the cases, prefer calling functions or > throwing an error.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

Solution 4 - Javascript

labelled breaks can break out of any block of code not just loops

<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>
<p id="test4"></p>
<p id="test5"></p>

test: {                            
    document.getElementById('test1').innerHTML = "test 1 passed";
    document.getElementById('test2').innerHTML = "test 2 passed";
    document.getElementById('test3').innerHTML = "test 3 passed";
    break test;
    document.getElementById('test4').innerHTML = "test 4 passed";
    document.getElementById('test5').innerHTML = "test 5 passed";
}

result:

test 1 passed

test 2 passed

test 3 passed

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRyanView Question on Stackoverflow
Solution 1 - JavascripttdobekView Answer on Stackoverflow
Solution 2 - JavascriptSarfrazView Answer on Stackoverflow
Solution 3 - JavascriptGal MargalitView Answer on Stackoverflow
Solution 4 - JavascriptPall ArpadView Answer on Stackoverflow