"XY Problem" in the Wild.

From the Wikipedia XY Problem entry.

The real issue ("X") of the person asking for help is obscured, because instead of asking directly about issue X, they ask how to solve a secondary issue ("Y") which they believe will allow them to resolve issue X.

For the last month or so I've been making a card game as a personal project. I'm using JS and the PhaserJS game engine to get better at both because why not. Tonight, I was working on building a pyramid of cards, setting up an abstraction. When you click on a card, it gets an array of the selected cards children, ones it covers. It then goes to all children cards and removes the clicked card from the childs list of parents. When any card's parent list is zero length, the card goes face up.

But it wouldn't work. Instead of removing the one card as a parent, it was just completely clearing the array. Why? What the hell is wrong with you?

But wait. . . What? When the javascript array.filter runs, ALL the relevant variables are becoming undefined? What, why?

Here's a pic of chrome devtools before the filter,
and then here it is after the filter.

As you can see in the list of variables on the right, javascript has lost its mind, and is clearing my variables for seemingly no reason (or so I thought).

So I dig and dig. Web searches, info about array.filter, etc... and nothin works. Finally I break down and post to Stack Overflow. A Nice Guy (rarity these days) hops on the comments pretty quickly and makes some suggestions, including a couple of links on variable scope.

. . . Do you see it? the XY Problem?

I spent a good 5 hours trying to figure out why my variables were being cleared, only to be reminded that they were completely out of scope inside the callback function of array.filter. I mean, I knew that's how it should work but I was so zoned in on "shit disappearing" that I couldn't see the forest for the trees.

Even better (or worse, depending on how you look at it), with the blinders on, I completely missed the actual problem. I had fully forgotten that the real question at hand had nothing to do with variable scope involving callback functions. It was about an array being cleared.

Once I reminded myself of what the true problem was, it took an almighty several seconds to fix it.

The true solution? Look at line 131 in the images.

---

The moral of the story is this:

When you hear hooves, think horses, not zebras.

If you're having an impossible problem where something reliable seems to have gone completely off the deep end, you're most likely looking in the wrong place for the problem. Take a step back, defocus for a minute, grab the rubber duck off your desk and have a nice relaxed conversation.

Comments

[Basti Ortiz]

This has happened to me a lot of times. I remember how I once made a utility function that takes in a URL string as an argument to sanitize some user input. The utility function returns true or false depending on the URL's "cleanliness" and validity. This utility function soon became the reason why I spent four months trying to figure why a side project of mine is failing.

I had blamed the dependencies I used (since I was using the URL to fetch a resource) for the bug, so I waited... and waited... and waited for it to get fixed. It never got fixed until I realized later that the error was on my part. The utility function sanitizes the URL string by invoking its toLowerCase method. By converting the string to lower case, the case-sensitive URL becomes invalid and results in a 404. It was the dumbest thing I have ever done.

In my case, I tried to solve a problem by seeing if my dependencies caused the error, when I should have taken a step back, defocused for a minute, grabbed a rubber duck off my desk, and had a nice relaxed conversation to solve my seemingly impossible problem that lingered for months.