As you might guess, it draws 1,000 overlapping blue squares, and then a single green one.

This code works, but if you increase the number of blue squares, say to 1,000,000 then it crashes. If you’ve got a Javascript console open then you’ll see an error:

Uncaught RangeError: Maximum call stack size exceeded

Otherwise you’ll just wonder why the green square doesn’t get drawn.

Recursion

The key to understanding this problem is to realize that in many functional languages, including Purescript, loops are often implemented recursively. So, naively, each step of the loop corresponds to a subroutine call.

In Javascript the size of the call stack is limited. Inevitably, this has been discussed on Stack Overflow: