The joy of recursion, immutable data, & pure functions: Making mazes with JS

Summary

Let’s start by addressing the elephant in the room. Why the heck am I talking about making mazes? Normally, I try to be practical when I’m writing or speaking. I want to give people tools they can use to make their coding lives better. So, I try to discuss things like creating DOM elements and processing JSON data. Because those things are practical. I would rather not waste people’s time on things they’re not going to use. But, mazes, they’re not so practical. Unless you’re working in game development, it’s unlikely that you’re going to need a maze in your web app. So, in that sense, knowing how to build a maze is useless. You’re never going to use it. However, the nice thing about generating mazes is that they’re a challenge. A challenge that’s not too big, and not too small. You see, an issue I often have is that people ask me for ‘real world’ examples. But the trouble with ‘real world’ examples is that they’re complex. Much more complex than you can reasonably talk about in a blog post. There are all these edge cases that you have to handle. Things like error-handling, network outages, and input validation. But a maze is a contained problem that’s just complex enough to be interesting. And it’s not a to-do list. Furthermore, we can build our maze in such a way that we’ll learn about immutable data and recursion while we’re at it. So let’s get into it. Building a maze How, then, do we build a maze? Let’s start with an example. We’ll work through building a small maze, step-by-step. We start with a grid. The one in the picture below is a 4 × 4 grid with 16 ‘rooms’ and ‘walls’ between each room. A 4 × 4 grid. The starting point for our maze. Next, we pick a room at random. I’ve picked one near the middle, but it could be any room in the grid. We’ve selected the room at (1, 1) as our starting-point. Then, we make a list of the adjoining rooms to the north, south, east, and west. But only if they that aren’t already connected to another room. The room at (1, 1) has f...