Decompressing 33 signal bytes [blog]

In my RSS reader, I stumbled upon this code-golfed (i.e. minimised to death) snippet that's fairly clever, but from the code, utterly opaque.

I couldn't immediately see how it worked, and since Copilot autocompletes most of my code for me - whether I want to or not, I figured it was a good bit of practice to decompress and understand.

First things first: snooze the little copilot bastard for an hour!

Side note: because I got this post through my reader, I didn't happen to clock the link right after (in the newsletter) that read "a Redditor breaks down exactly what's going on". So…um…yeah, I guess wasted energy, but probably good for my brain.

Here's the original author's code:

// 33 bytes
const signal = F=>(f,G=F)=>F=f?_=>f(G?.()):F?.();

The crux is that it creates a wrapped stack of callbacks. Effectively recursion through locally defined (and overwritten) variables (G in this case).

I started by unpacking the implicit returns so I could see more of what was going on (and renamed F to callback)

const __signal = (callback) => {
  return (f, G=callback) => {
    return callback = f ? _ => f(G?.()) : callback?.()
  }
};

From there, I "simplified" everything as far as I could so that that all the neat tricks could be seen. This certainly isn't better code (probably a version of the one above with nicer names would work).

/**
 * The function stores local variables that are
 * overwritten * with a call stack of passed in
 * functions. When the argument is falsy, then
 * the stack is unwound.
 *
 * Call stack looks like: four(three(two(one())))
 */
function signal(/*F*/ callbackStack) {
  return (/*f*/ callback) => {
    // Each new time the signal singleton is called, it
    // creates a new copy of the `callbackStack`,
    // originally as an argument which saves on the
    // `const` part.
const localCopy = callbackStack; /G=F/
// if we're passed a callback, then redefine
// callbackStack with where the local copy is
// called first, then we run the callback.
// Calling this singleton multiple times creates
// a stack of functions like:
//
// four(three(two(one())))
//
// there's also the initial protection with ?.()
// to allow for callbackStack to be undefined.
// In the example below, I've just unrolled the code.
if (callback) { /F=f?/
/f(G?.())/
callbackStack = _ => {
if (localCopy) {
localCopy();
}
return callback();
}
} else {
// otherwise, when called without any arguments,
// and the callbackStack is executed and
// overwritten at the same time.
if (callbackStack) {
callbackStack = callbackStack(); /F?.()/
}
}
// the original code returns the callbackStack
// through the implicit return, but it's not actually
// used for anything, it's just a side effect of
// compressing the code.
}
}

Obviously this isn't the point of code-golf, to take someone's hard work and walk them back to the start (and probably even further back), but it was a good bit of brain exercise for me.

For comparison, here's the Redditor's explanation.

Originally published on Remy Sharp's b:log