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


The example compares callbacks:

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

vs Promises:

).then(images => { => 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 => {
    return loadImage('images/cat2.jpg')
}).then(img => {
    // 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) => {
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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.