开发者

Is using labels in JavaScript bad practice?

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 rea开发者_开发技巧son 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?


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.


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.


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


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


There is a workaround to use while loops instead of inner for loops for better readability.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜