What does it mean to say that something is composable in JavaScript? These are some notes after watching the funfunfunction Promises video.

Composing two functions is calling one function inside another:

const f = x => x*x
const g = x => x*2

console.log(g(f(1)))

The video compares callbacks:

loadImageCallbacked('images/cat1.jpg', (error, img1) => {
    if (error) throw error
    addImg(img1.src)
    loadImageCallbacked('images/cat2.jpg', (error, img2) => {
        if (error) throw error
        addImg(img2.src)
    })
})

vs Promises:

Promise.all(
    loadImage('images/cat1.jpg'),
    loadImage('images/cat2.jpg')
).then(images => {
    images.map(img => addImg(img.src))
})

Callbacks are not composable, but Promises are.

Or in individual terms, we can return a promise from each then call until we’re done:

loadImage('images/cat1.jpg').then(img => {
    addImg(img.src)
    return loadImage('images/cat2.jpg')
}).then(img => {
    addImg(img.src)
    // it's a good habit to always return something from a Promise
    return null
})

So a callback in the simplest terms is a function g that just calls the callback f that is passed in:

const f = x => x * x
const g = (x, f) => {
    f(x)
}
console.log(g(1, f))

Now compare this to composable functions: g(f()). We are not passing the output of f to g, we are passing f itself. The console.log will output undefined because g doesn’t return anything, it could but that’s not typically how we use callbacks.

So now at least it makes sense to me why callbacks aren’t composable.