DEV Community

JavaScript, stuff you've never heard of (probably): labeled loops?

Adam Crockett πŸŒ€ on January 24, 2020

I have been in the JavaScript scene for maybe 6 years and I love it when I find that I really ought to know about something fundamental especially ...
Collapse
Β 
fraxken profile image
Thomas.G β€’

You can label a code block too !

myLabel: {
    const something = fn();
    if (something) {
        break myLabel;
    }

    // Do work here!
}
Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

That's the spirit, take the wierd to the next level.

Does have the effect of early return without a function?

I think labels are just so out of place in js, cool as they are, they are not defined like variables and are more meta.

Saves writing an IFFE. Im certain this would be a touch faster then an IFFE (but it costs in reasoning about)

Collapse
Β 
rasata profile image
Rasata'Ninja β€’ β€’ Edited

wow,So I just discovered that label exists in JS!
It seems that this give you a thinner control on loop breaking ! an example here

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’ β€’ Edited

Interesting I doubt a nested labeled code block would work, for fun reasons. Perhaps if it where encapsulated ()

Collapse
Β 
samthomson profile image
Sam Thomson β€’

Hey, nice post.
I can't think when I'd use this. Usually if there are exit conditions I use a while loop. When would I use a named for loop and not a while loop containing a for loop - or merged together like this:

for (let i = 0; i < ar.length && !extrenousCondition; i++) { }

Are named for loops just stylistic or?

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’
parent: for ( ... ) {
     child: for ( ... ) {
         if (exitConditionParent) break parent;
     }
}

You could do a labeled while loop as well.

I don't advocate or not advocate that anyone use this technique just that it's there and it's trivia.

Collapse
Β 
samthomson profile image
Sam Thomson β€’

Yeah I see. Interesting either way, thanks.

Thread Thread
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

Your most welcome 😁

Collapse
Β 
dangoslen profile image
Dan Goslen β€’

mind = blown

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

Gooooood πŸ‘¨β€πŸ”¬

Go checkout my oporater overloading posts for more wierdness.

Collapse
Β 
mjstelly profile image
Michael Stelly β€’

A foundational concept in software engineering is to translate business rules into code in the clearest, most maintainable way possible. I’ve developed mobile apps using JavaScript for over 10 years. Rarely have I ever revisited the same code after delivery, but I guarantee some else has. And there’s the rub.

Think of your typical day. You’re billing a hefty hourly rate. You’re new to a project and inherit a code base which makes extensive use of this feature. What’s the first thing you do apart from muttering expletives under your breath? You have to stop and ask someone or google it. Time that is usually not billable if it takes more than a few minutes.

My point isn’t to berate or cast aspersions. Quite the contrary. It’s to remind us that we as devs should choose clarity over cleverness whenever possible. Keep up the contributions.

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’ β€’ Edited

There was no advocation of this technique from me, (it's a light hearted post) nor did you state if what you saw was good or bad, I don't know what you define as clever code, but as I have already stated elsewhere, clever code is a terrible idea, this post is designed to expose a strange syntax nothing more.

Collapse
Β 
konstantinklima profile image
Konstantin Klima β€’

Thanks for the tip!

I am usually the first one to criticise JS hack, but this one is pretty cool.
Great potential for Spaghetti code tho :D

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

That's absolutely why it's unheard of I believe the community pick and choose the features they want to see and further publicity is brought to that instead of this, probably because it MAY lead to spegetti, although without using this seriously I couldn't say.

Collapse
Β 
joemaffei profile image
Joe Maffei β€’

Typo: firmiliar -> familiar

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’ β€’ Edited

Thanks, Dyslexia -> won't fix on purpose, because I keep track of how my spelling is improving naturally.

Also in the south west of England, anything goes. 😁

Collapse
Β 
mariewie profile image
MarieWie β€’

That's both weird and very nifty!

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

Glad you liked it, I think there is so much to JavaScript to learn and this is just one way to achieve this.

Collapse
Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

Good that you knew this, it sort of does doesn't it. I didn't say I like it it's just good to know that it's a thing. I want to do one on with statements as well.

Β 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

Your most welcome 😁