On: Callback Hell (2016)

[kraftman]

Could you elaborate? Coming from Lua I always found the nesting of anonymous functions messy and wondered why they weren't done as in the article.

[realharo → kraftman]

You can now use async/await directly in node (no transpiler necessary), and both Babel and TypeScript can compile them for browser use.

Also there are now many more libraries that use native ES6 promises.

Before:

    function getPhoto(callback) {
        someCustomHttpGet("/favorite_photo_id", function(err, data) {
            if (err) {
                return callback(err)
            }
            try {
                var dataJson = JSON.parse(data)
                someCustomHttpGet(dataJson.url, function(err, data) {
                    if (err) {
                        return callback(err)
                    }
                    callback(undefined, processData(data))
                })
            }catch(e) {
                callback(e)
            }
        })
    }

After:

    async function getPhoto() {
        const data = await fetch("/favorite_photo_id")
        const dataJson = await data.json()
        const photoData = await fetch(dataJson.url)
        return processData(photoData)
    }

The example may be a bit contrived, but you get the idea.

[camus2 → realharo]

Your try catch is useless here, AFAIK JSON.stringify doesn't throw. and you can't catch someCustomHttpGet() "exceptions" if the latter is supposed to be asynchronous.

relevant:

http://journal.stuffwithstuff.com/2015/02/01/what-color-is-y...

[realharo → camus2]

Yeah, I messed it up when quickly typing the code without thinking, it should've been JSON.parse, I fixed it now.

Also regarding that article: you can call async functions from non-async functions - you will simply get the Promise object instead of the data.

If you're using TypeScript, your editor will immediately highlight the error if you try to use that Promise object as though it were the data, so zero chance of getting it wrong. Try it yourself - https://goo.gl/vDk3Gz - hover over the `n` inside the `formatName` call.

[camus2 → realharo]

> Also regarding that article: you can call async functions from non-async functions - you will simply get the Promise object instead of the data.

    async function() getZ(){ return promise }

    function() getX(){
        return x = y * getZ()
    }

    // sync call globally.
    let x = getX(); // NaN

async/await makes things more readable, it doesn't change the issue of leaky abstraction and you need to know whether the call is blocking or non blocking when calling getZ and using a function that calls getZ. What should you do? assume everything is asynchronous by default?

Imagine you have a validation lib, you don't need it to be asynchronous to validate a string of length > 10, but you need to rewrite your whole API if you need to validate the fact a unique index has to be validated from a database.

[realharo → camus2]

That's kind of exactly what the second half of my comment was about - if you have static typing, then this problem just doesn't exist.

If not, then the problem is really no different from not knowing what your functions are returning (are they returing a Promise object? are they returning the data itself?). Not knowing the return type of the functions you use is hardly something new. You would have the exact same issue with functions that take callbacks.

See the link I sent there https://goo.gl/vDk3Gz - you can hover over all the variables and functions (once the editor fully loads), try typing "n.", hover over the highlighted errors, etc. The tooling takes care of everything.

[jusssi → camus2]

> let a = []; a.push(a); JSON.stringify(a)

TypeError: Converting circular structure to JSON

[awjr → kraftman]

Promises and, more recently, Observables.

Simply put: A promise resolves to a single value asynchronously, an observable resolves to (or emits) multiple values asynchronously (over time).

Taken from here: http://stackoverflow.com/questions/36064303/what-are-the-dif...

[awjr → awjr]

Oh I also forgot async/await

"The purpose of async/await functions are to simplify the behavior of using promises synchronously and to perform some behavior on a group of Promises. Just like Promises are similar to structured callbacks, async/await is similar to combining generators and promises." https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

[Kiro → kraftman]

Promises and async/await. This page is so outdated it shouldn't exist.

[mromanuk → Kiro]

He addressed more modern solutions at the bottom. I think, he is trying to evangelize "you should write readable code, no matter of the limitations of the language."

[insertnickname → Kiro]

The page does mention those.

[awjr → Kiro]

TBH it shouldn't be on the front page of HN.