In my last article, , I tried to convince you to abandon the loop for a more functional solution. In return, you raised a great question, “What about ?” Death of the for Loop for break break is the of loops and should be avoided. GOTO should be placed in the rubbish bin in the same exact way has. break GOTO You may be thinking, “Come on Joel, surely you are just being sensational. How is break like ?” GOTO // bad code. no copy paste. outer:for (var i in outerList) {inner:for (var j in innerList) {break outer;}} I am offering labels as the proof. In other languages, labels were the counterpart to . In JavaScript, label is the counterpart of and . Because and come from the same label family, this also makes them very close relatives of . GOTO break continue break continue GOTO JavaScript’s label, break and continue are leftover legacy from the days of GOTO and unstructured programming. xkcd “But It’s not hurting anyone, so why not leave it in the language so that we have ?” options Why should we place limits on how we write software? It sounds counter-intuitive, but limits are a good thing. The removal of is a perfect example of this. We also welcomed the limitation with open arms and even lecture those who don’t use it! GOTO “use strict” “limitations can make things better. A lot better. “— Charles Scalfani Limits make us write better software. _Limits make for better Art, Design and Life._medium.com Why Programmers Need Limits What are our alternatives to break? I’m not gonna sugar coat this, there is no one size fits all quick and easy replacement. It’s a completely different way of programming. A completely different way of thinking. A functional way of thinking. The good news is there are libraries and tools out there to help us like , , , recursion, etc. many Lodash Ramda lazy.js We’ll start with a simple collection of cats and a function called . These will be used in all of the examples to follow. isKitten const cats = [{ name: 'Mojo',    months: 84 },{ name: 'Mao-Mao', months: 34 },{ name: 'Waffles', months: 4 },{ name: 'Pickles', months: 6 }] const isKitten = cat => cat.months < 7 Let’s start out with a familiar old-school loop example. This will loop through our cats and break when it finds the first kitten. for var firstKitten for (var i = 0; i < cats.length; i++) {if (isKitten(cats[i])) {firstKitten = cats[i]break}} Now let’s compare that to the lodash equivalent. const firstKitten = _.find(cats, isKitten) OK, so that example is fairly simple. Let’s kick it up a notch and try something a little more . Let’s enumerate our cats and break after we have found 5 kittens. edge case var first5Kittens = [] // old-school edge case kitty loopfor (var i = 0; i < cats.length; i++) {if (isKitten(cats[i])) {first5Kittens.push(cats[i]) if (first5Kittens.length >= 5) {  
  break  
} }} The easy way lodash is amazing and does tons of great things, but sometimes you need something more specialized. . And lazy is what we want. This is where we bring in a new friend, lazy.js . It’s “Like Underscore, but lazier” const result = Lazy(cats).filter(isKitten).take(5) The hard way Libraries are all fun and games, but sometimes what’s is to create something from scratch! really fun So how about we create a generic function that will act like and also add the limit functionality. filter The first step is to encapsulate our old-school edge case kitty loop in a function. Next, let’s generalize the function and extract out all the cat specific stuff. Replace with , with and with . Then add those as parameters to the function. 5 limit isKitten predicate cats list Now we have a working and reusable function that has been completely separated from our cat business logic! takeFirst Our function is now also a . This means the output is derived solely from the inputs. Given the same inputs, it will produce the same output 100% of the time. pure function We still have that nasty loop in there, so let’s keep refactoring. The next step is to move and to the argument list. for i newList We want to break the recursion ( ) when the reaches ( will count down during the recursive process) or when we reach the end of the list. isDone limit 0 limit If we are not done, then we check to see if our filter has a match. If we get a match then we’ll call , decrement and append to our . Otherwise, move onto the next item in the list. predicate takeFirst limit newList If you have yet to read , it will explain this final step of replacing the 's with a ternary operator. Rethinking JavaScript: The if statement if _Thinking functionally has opened my mind about programming._medium.com Rethinking JavaScript: The if statement Now we can call our new method like this: const first5Kittens = takeFirst(5, isKitten, cats) For extra credit we could curry and use it to create other functions. (more on currying in another article) takeFirst const first5 = takeFirst(5)const getFirst5Kittens = first5(isKitten) const first5Kittens = getFirst5Kittens(cats) Summary There are many great libraries we can use like lodash, ramda or lazy.js. If we are so daring, we can even create our own methods using recursion! I must warn that while is super awesome, . Recursion in JavaScript-land can be very dangerous and it’s easy to get the infamous error message. takeFirst recursion comes from a monkey’s paw wish Maximum call stack size exceeded I’ll be covering recursion in JavaScript in my next article. Stay tuned. I know it’s a small thing, but it makes my day when I get those follow notifications on Medium and Twitter ( ). Or if you think I’m full of shit, tell me in the comments below. @joelnet Cheers! Related articles _Function composition has got to be my favorite part of functional programming. I hope to provide you with a good real…_hackernoon.com Functional JavaScript: Function Composition For Every Day Use. _JavaScript’s for loop has served us well, but it is now obsolete and should be retired in favor of newer functional…_hackernoon.com Rethinking JavaScript: Death of the For Loop _In my last 3 articles I convinced you to remove the if statement, kill the for loop, and never use break._medium.com Rethinking JavaScript: Eliminate the switch statement for better code _I love the new Promise library that ships with ES6, though one thing has been left out, a function to sequentially…_medium.com Functional JavaScript: Resolving Promises Sequentially

Super

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Rethinking JavaScript: Replace break by going functional

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Rethinking JavaScript: Replace break by going functional

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES