For i=0…

At some point in your web dev career, perhaps around your 5,000th for loop, you’re gonna look yourself square in your coffee slurping face through the glare on your monitor and think, ‘What in the fuck? How many more loops can I possibly crank out? There must be a better way.’ You sit there, pondering your first world code problems and then crank out another 28 for loops before clocking out and drowning yourself in burritos and kombucha.

Life doesn’t have to be this way. Seriously, I know how it goes, you end up recycling so many pieces of helper code, especially in JS to iterate over the most common data structure ( an array) and you start feeling like a hack, a code monkey, a charlatan!

Unless you’re developing for older versions of IE, you need to step into ES6, or fancy pants javascript as it’s known in some circles and take advantage of the different ways to iterate over arrays. Map, reduce, filter are all better ways to do what you’re likely doing with for loops anyway.

Map is great when you want to run a function over each element in an array and return a new array with all those values. Here:


var myArray = [1,2,3,4];
var myNewArray = myArray.map(function(elemInArray){
return elemInArray * 2;
})

In this case our map function would return an array of the original elements multiplied by two and in much cleaner fashion than the dirty alternative.

Check out this fucking filter function:


var filterArray = myArray.filter(function(elem){
return elem %2 ===0;
})

Besides being nominally less code to achieve our desired effect of returning only even numbers, it also says 'filter' right there in the got damn code. I'm all for intuitive functions that help others know exactly what the hell I'm doing.

Finally, one of my favorites, reduce:

var reducedArray = myArray.reduce(function(prevVal, curVal){
return prevVal + curVal;
})

This reducer will take our array and add the next value to the accumulated value (our prevVal) summing up our whole array, or 'reducing' it from an array to a single element (10 in this case), though you could really reduce your array to another array, a value, or even an object you sick bastard.

This nerd has a great set of videos using regular human speak which goes over all these iterators and more: https://medium.freecodecamp.com/my-giant-javascript-basics-course-is-now-live-on-youtube-and-its-100-free-9020a21bbc27

Wow other devs, make your life less loopy and learn to frustrate yourself with love these new built in methods!

2 thoughts on “For i=0…

  1. hahah I loved this article. I love how you tried holding down the whole adulting tone in the beginning, then suddenly the real you came out a few paragraphs into the article and the f-bombs were dropped! Love it

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s