Is using labels in JavaScript bad practice?

Question

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?

Toscana

your use of labels is incorrect: you need to add the label to your looping construct, ie doThis: for(... – Mahau

Also not using hasOwnProperty is definitely bad practice. See: bonsaiden.github.com/JavaScript-Garden/#hasownproperty – Gullet

@IvoWetzel if it's an object that doesn't inherit, it's fine to not use hasOwnProperty. Nothing on the Object prototype is enumerable. – Daugava

Answer 1

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.

Azo

Ahh, so can you not break out into code that is not inside a loop? – Toscana

@Ryan: You do not need to break out of code that is not inside a loop. You are wanting to use something like GO TO i suppose. You can put up conditions using if instead. – Azo

They are useful if you have nested loops: or a switch statement inside a loop, which uses the break keyword for control as well. – Nudism

Answer 2

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.

Precinct

BTW, let is an ecmascript 6 / ecmascript 2015 keyword. developer.mozilla.org/en/docs/Web/JavaScript/Reference/… – Racism

@Danield nothing. – Extract

@Danield In the above code, the variable k initializes a block scope variable holding the number value 5 :P – Secondguess

Answer 3

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

Racism

That text was removed from MDN in May 2015, with these comments in the revision history: "Removing recommandation not supported by clear evidence." "Clearing technical review. I think it is true that there is no need for the big red banner that discourages labels. Havent found anything that says differently." – Guyenne

2017 update: "Labeled loops or blocks are very uncommon. Oftentimes function calls can be used instead of loop jumps." – Racism

I don't get the "function calls can be used instead of loop jump" part, how would one use a function call to continue a loop ? – Notum

ok @GalMargalit, how? eye: for (i=0; i<m; i++){ prepareEye(); for (j=0; j<n; j++){ doSomething(j); if(j==13) continue eye; /* skipping to next eye */ } processEye(); // should get skipped for j==13 } – Sardanapalus

Answer 4

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

Seamark

in this case you can only break but not continue – Bourque

Answer 5

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

Privatdocent

You should probably detail what that workaround is rather than just saying there is one – Cancan