Regardless of the language, formatting can be important. Sometimes it’s an OCD thing… sometimes it’s not. Some languages even control flow based on formatting alone!

I recently spent about half an hour chasing down a weird bug in a Reflux (React) store. The store had a default data set:

return {
   var1,
   varTwo,
   moreVar,
   testThing,
   fooBar,
   bazCheck: {
   wantThis,
   hadThat,
   },
}

I kept getting an undefined variable error when I would try to access wantThis as a broadcast from the store. Why?

I was looking for what happens on first load. I checked that trigger, and it triggered the whole structure for initial load. That wantThis property should definitely be there!

So I scrubbed around to see if anything was deleting that property, and it wasn’t.

I tried to trigger specifically just that property, and I got an undefined error in the store itself. Something is weird here….

Dumped the entire data set of the store to the console immediately after initializing, and then, aha!

Turns out wantThis is a nested property and not a top level property. Frustrating that the data was structured like that at a technical level, but visually, everything looked like it was at the same data tier. It was not a question of tabs vs spaces, all tabs, all indented a single level, even the nested bits.

A couple seconds of attention to that little detail would have saved a half hour down the road.