blogccasion

What a diff'rence a semicolon makes

The other day, I was hit by a baffling TypeError: console.log(...) is not a function. Like, WTF πŸ€”? Turns out, I was sloppily adding a quick console.log('here') statement for debugging purposes (as one does πŸ™ˆ), which happened to be right before an IIFE. I didn't put a ;, as it was a throwaway statement I'd remove after finding the bug, but turns out that's the issue. StackOverflow contributor Sebastian Simon had the explanation:

It's trying to pass function(){} as an argument to the return value of console.log() which itself is not a function but actually undefined (check typeof console.log();). This is because JavaScript interprets this as console.log()(function(){}). console.log however is a function.

Minimal repro:

console.log()
(function(){})

Andre on Mastodon reminded me of Chris Coyier's excellent Web Development Merit Badges, so I'm now proudly wearing mine: "Debugged something for over one hour where the fix was literally one character":

Debugged something for over one hour where the fix was literally one character