Adam Crockett 🌀

Posted on Jan 24, 2020 • Edited on Jan 31, 2020

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

#javascript

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 something that isn't exactly bleeding edge.

You know this guy?

for (...) {}

The for loop is a loyal companion that reminds me of my dog, it's always there when I need it, it's finite attention span and predictable loyalty is commendable. For convenience to distinguish my dog from other less firmiliar dogs, I gave my dog a name, so instead of shouting 'dog' and getting all the dogs coming to bring my slippers I just get my dog. Ace!

My goodness if only I could name my for loops then I could address them by name and give the commands to do tricks like break and continue and kill okay that last one is not so easy to teach a for loop or a dog to do.

lizie: for (let paws of dogs) {}

Sooo, is that valid? ^^^

Yup,

What's it for?

A nested loop can break it's parent using the name break lizie or continue that works as well. But if you break Lizzie I will send you the bill.

I hope you are as shocked as I was.

Top comments (20)

Thomas.G • Jan 24 '20

You can label a code block too !

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

    // Do work here!
}

Adam Crockett 🌀 • Jan 25 '20

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)

Rasata'Ninja • Sep 29 '20 • 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

Adam Crockett 🌀 • Jan 25 '20 • Edited

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

Sam Thomson • Jan 29 '20

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?

Adam Crockett 🌀 • Jan 29 '20

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.

Sam Thomson • Jan 29 '20

Yeah I see. Interesting either way, thanks.

Adam Crockett 🌀 • Jan 29 '20

Your most welcome 😁

Dan Goslen • Jan 25 '20

mind = blown

Adam Crockett 🌀 • Jan 25 '20

Gooooood 👨‍🔬

Go checkout my oporater overloading posts for more wierdness.

Michael Stelly • Jan 29 '20

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.

Adam Crockett 🌀 • Jan 29 '20 • 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.

Konstantin Klima • Jan 26 '20

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

Adam Crockett 🌀 • Jan 26 '20

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.

Joe Maffei • Jan 25 '20

Typo: firmiliar -> familiar

Adam Crockett 🌀 • Jan 25 '20 • 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. 😁

MarieWie • Jan 25 '20

That's both weird and very nifty!

Adam Crockett 🌀 • Jan 25 '20

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

Adam Crockett 🌀 • Jan 26 '20

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 Crockett 🌀 • Jan 26 '20

Your most welcome 😁

View full discussion (20 comments)

DEV Community

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

Top comments (20)

Read next

Build a Simple Auto-Play Carousel with Clickable Controls Using Alpine.js

MUI Stack: Mastering One-Dimensional Layouts in React

Evolving Changes in JavaScript: A Look at the Language's Growth

Playing with raw image bytes