JavaScript Iteration

This weekend I spent some time working on a stock trading application (still under construction) that uses end-of-day stock price information from the Quandl WIKI Prices Database. While the main focus of the project is to build a full-fledged React/Redux app, I found myself spending a significant amount of my time tweaking my back-end code for fetching and parsing the stock data. While, to be fair, a lot of that time was spent refactoring silly mistakes, a lot of it was spent trying out different ways to iterate over different parts of the data set.

Iteration: what even is it?

Iteration is the process of repeating the execution of a block of code through some structure. Iteration should be distinguished from the other common technique for repeating execution: recursion. Recursive functions call themselves in order to perform a set of actions repeatedly. While recursion is an excellent tool for many tasks, I’m going to focus on iteration today. Iteration is a key building block of most programming languages and there are a ton of different ways to iterate in JavaScript.

The most basic iterative structures are the for and while loops. The former allow you to repeat a block of code a set number of times while the latter allow you to repeat that code so long as a condition is true. Like most things in programming, you can use them both to do the same thing, but one is a better tool for the job:

I generally find that plain for and while loops are rarely the tool that I reach for. In my stock ticker app, I have only used one of each (though I did also use two do...while loops, which are just while loops that execute at least once). One key part of my struggles is that the API does not include prices for every day, which means you may not get any results back if you query for a weekend or holiday.

To solve the problem I wrote a for loop that would retry the request for several days in the future if necessary. The API always returns an object with an outline like: {datatable: { data: []}}. If the data array contains any values I use the break keyword to exit the loop immediately, otherwise the loop runs a set number of times (so as to not hammer the API indefinitely):

This example makes use of the excellent Moment date, which allows for easy manipulation of dates. If you’re curious about the async actions, I wrote an article explaining how they’re great.

Object Interlude

Loops are often used to iterate over a variable; to apply the same block of code to each element in an array, perhaps. This works a treat for any variable that has an index: strings and arrays, in JavaScript. These are easy to loop over with a plain for loop. If you want to loop over an object, you need to find some new tools.

Fortunately, the Object constructor has a few methods that can easily convert your object into just the sort of array you need:

• Object.keys standard since ES5.1, returns an array of the keys of your object
• Object.values standard since ES2017, returns an array of the values of your object
• Object.entries standard since ES2017, returns an array of arrays containing [key, value] pairs

JavaScript has a couple more tricks for iterating over objects (and other things)…

Fancy Fors

As a Python lover, I was disheartened to learn that JavaScript’s for each…in loop has been deprecated. In Python the for...in loop is the only sort of for loop you get. Fortunately It iterates over just about any kind of variable you throw at it. As I cut my teeth on this style of loop, I was frustrated by the need to access array elements by their index when I started writing JavaScript.

Fortunately, JavaScript provides two more for loops: for...in and for...of. The former can be really nice when you need to loop over the keys in an object. Watch out for using it on an array, though… you’ll get the indexes, rather than the values! Appropriately, the latter loops over the values of an object or an array. Lovely. Unfortunately, while for...in loops return the keys of objects in insertion order, they are not guaranteed to return the indexes of an array in any particular order. Thankfully for...of loops are guaranteed to return array values in order.

Despite the fact that I was initially quite excited about these loop constructs, I may actually use them the least of all. They are certainly perfectly usable, but lately I find myself drawn to…

Functional Iteration Methods

JavaScript’s Array.prototype contains a whole posse of methods for iteration. These methods all accept a function that is called with each element of the array. Some of these, like every and some, are somewhat niche, while others, like map and reduce are iteration workhorses. Combine these methods with arrow functions and you create a powerful and concise iteration framework.

Since I’ve been harping on for loops, lets start with Array.prototype.forEach. It’s callback, like most of these functions, accepts three parameters: the current element, its index in the array, the array itself. The callback is called for each item in the array, in order. Easy as pie:

map is probably the one that I use the most. It returns a new array composed of the callback’s return values. It’s super useful for whenever you need to change all of the elements of an array. I have included it at least 10 times in my stock ticker app, mostly turning arrays of values into arrays of React components.

filter returns a new array composed of the values for which true was returned in the callback. You simply write a callback that performs some comparison on the value and returns a boolean.

reduce is super useful, but somewhat difficult to explain. It returns a single value from the return value of the callbacks. It accepts a second parameter, the accumulator, which is then passed into the callback as the first parameter the first time it’s called. The return value from the first execution is then passed in as the first parameter to the to the second calling, etc. Whatever is returned from the final callback call is returned from reduce. It can be tricky to get the hang of, but it’s the perfect tool for any time that you have an array and need a single value (or an object).

Here is an example of using reduce to create a structured object from an array of arrays, very much like code I wrote for my stock picker app. I’m using array destructuring for the second argument to the callback (the current item) as well as ternary operators to ensure that I have sub-objects to assign the current values to.

Full Metal Itarist

My favorite new thing I have discovered to do with functional iterator methods is to perform dependant async actions. Say you need to make a bunch of web requests simultaneously. They don’t depend on one another, but you need to perform an additional asynchronous action on each request as it comes in. If you pass in an async callback function, Node will perform all of the fetches and follow up actions asynchronously, returning an array of promises. It’s glorious:

Anywho, there’s tons of ways to iterate with JavaScript. If I haven’t sufficiently whet your whistle and you’d like some more reading, be sure to check out the ever-amazing Mozilla Developer Network. They have a whole page on loops and iteration. Don’t forget the Array.prototype page for all of the fun functional methods, if you think they might float your boat too.