JavaScript’s has served us well, but it is now obsolete and should be retired in favor of newer functional programming techniques. for loop Fortunately, this is a change that doesn’t require you to be a functional programming master. Even better, this is something you can do in existing projects today! What is the problem with JavaScript’s for loop anyway? The ’s design encourages and usage of , both of which are potential sources of buggy and unpredictable code. for loop mutation of state side effects We have all heard that global state is bad and should be avoided. Though, , we just don’t notice it as often because it’s on a smaller scale. So we never actually solved the problem, we just minimized it. local state shares the same evils as global state With a mutable state, at some unknown point in time, a variable will change for an unknown reason and you will spend hours debugging and searching for the reason that value changed. I have already pulled a dozen hairs out of my head just thinking about this. Next, I would like to quickly talk about . Those words just sound terrible, side effects. Yuck. Do you want your program to have side effects? No, I don’t want my programs to have side effects! side effects But what is a side effect? . It could be changing the value of a variable, reading keyboard input, making an api call, writing data to disk, logging to a console, etc. A function is considered to have side effects is when it modifies something outside of the function’s scope Side effects are powerful, but with great power comes great responsibility. Side effects should be eliminated when possible or encapsulated and managed. , so get them out whenever you can. Fortunately we aren’t going to worry about side effects here. Functions with side effects are harder to test and harder to reason about Okay, less words more code. Let’s take a look at a typical that you’ve probably seen a thousand times. for loop const cats = [{ name: 'Mojo',    months: 84 },{ name: 'Mao-Mao', months: 34 },{ name: 'Waffles', months: 4 },{ name: 'Pickles', months: 6 }] var kittens = [] // typical poorly written `for loop`for (var i = 0; i < cats.length; i++) {if (cats[i].months < 7) {kittens.push(cats[i].name)}} console.log(kittens) My plan is to refactor this code step by step so you can see how easy it is to transform your own code into something more beautiful. The first change I want to make is to extract the statement into its own function. if const isKitten = cat => cat.months < 7 var kittens = [] for (var i = 0; i < cats.length; i++) {if ( ) {kittens.push(cats[i].name)}} isKitten(cats[i]) It is a good practice in general to extract your statements. Now when you read the code the intent becomes clear. Why are we getting cats under 7 months? This is not clear at all. Our intent is to find kittens, so let the code say that! if The change in filtering from “less than 7 months” to “is a kitten” is a big deal. Another benefit is is now reusable and we all know, isKitten making our code reusable should always be one of our goals. The next change is to extract the transformation (or mapping) from an object of type cat to a name. This change will make more sense later, so for now you’ll just have to trust me. const isKitten = cat => cat.months < 7 const getName = cat => cat.name var kittens = [] for (var i = 0; i < cats.length; i++) {if (isKitten(cats[i])) {kittens.push( )}} getName(cats[i]) I contemplated writing a few paragraphs to describe the mechanics of and . But I think by not describing them and instead showing you how easily you can read and understand this code, even without ever having been introduced to or , would best demonstrate how readable your code can become. filter map map filter const isKitten = cat => cat.months < 7const getName = cat => cat.name const kittens = cats.filter(isKitten).map(getName) Also notice that we have eliminated . No more mutation of state and no more ! kittens.push(...) var Code that uses const (over var and let) is sexy as hell Full disclosure here, we could have used const the whole time because const doesn’t make the object itself immutable (more on this another time). But hey, it’s a contrived example, so cut me some slack! The last refactoring I would suggest is to also extract the filtering and mapping to its own function (you know, for that whole reuse thing). And all together now: const isKitten = cat => cat.months < 7const getName = cat => cat.name const getKittenNames = cats =>cats.filter(isKitten).map(getName) const cats = [{ name: 'Mojo',    months: 84 },{ name: 'Mao-Mao', months: 34 },{ name: 'Waffles', months: 4 },{ name: 'Pickles', months: 6 }] const kittens = getKittenNames(cats) console.log(kittens) Extra Credit For extra credit, take it further Decouple the and methods from their objects. And double extra credit you could research function composition. filter map _One thing I always end up doing in my project is decoupling methods from their objects. map, filter and reduce are not…_hackernoon.com Functional JavaScript: Decoupling methods from their objects _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. What about break? Many of you asked, “What about break?” (hint: recursion) Check out Part 2: Break is the GOTO of loops. _In my last article, Death of the for Loop, I tried to convince you to abandon the for loop for a more functional…_medium.com Rethinking JavaScript: Break is the GOTO of loops End Please let me know how you feel about this in the comments below. Is the now also dead to you? for loop 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 _Thinking functionally has opened my mind about programming._medium.com Rethinking JavaScript: The if statement _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 This article has been translated into Russian for my Russian friends.

Slack

Twitter

Too Long; Didn't Read

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

Rethinking JavaScript: Death of the For Loop

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Rethinking JavaScript: Death of the For Loop

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES