Composable

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

Callbacks are not composable, but Promises are.

My simple understanding of composing two functions is just calling one function inside another:

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

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

The example 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))
})

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.