Hacker News Reader

Comment by Prefinem | Hacker News Reader

Life is more fun with fat arrows sometimes

    new Promise(function (resolve, reject) {
        methodOne(data, function (error, response) {
            if (erorr) {
                reject(error);
            } else {
                resolve(response);
            }
        })
    })

    new Promise((resolve, reject) => methodOne(data, (error, response) => error ? reject(error) : resolve(response)));

View on HN

Yes, there are cases when arrow functions are useful: when small functions are used inline, like this:

    var numbers = [1, 2, 3, 4].map(x => x * x);
    var bestUsers = users.filter(u => u.getRating() > 100);

But for a case when you have a large non-anonymous function, `function` keyword suits better. You don't need to use `const` keyword just becase it is something trendy now.

In your example, the code with arrow functions is smaller, but it is not more readable. Because there is no indentation, it is difficult to understand how code is nested. I cannot read that.

It can be rewritten using `deferred` pattern:

    var deferred = new Deferred;

    methodOne(data, function (error, response) {
        if (erorr) {
            deferred.reject(error);
        } else {
            deferred.resolve(response);
        }
    });

    return deferred.getPromise();

This way we can get rid of a callback in the Promise constructor. Please note that our code now looks sequential and we clearly see what happens after what. Asynchronous code is difficult to write and read; therefore we must put an extra effort to make it easier.

In my opinion it is generally bad idea to nest more that 1-2 levels of functions inside each other.

> A Deferred object is returned by the obsolete Promise.defer() method to provide a new promise along with methods to change its state.

> Starting from Gecko 30, this object is obsolete and should not be used anymore. Use the new Promise() constructor instead (or use the above backwards/forwards compatible Deferred function given below). For example, the equivalent of

Seems like it's obsolete. [0]

If you want to write async code, use async / await.

    const run = async () => {
        const response = await new Promise((resolve, reject) => methodOne(data, (e, res) => e ? reject(e) : resolve(res)));
    };

If you spend enough time with fat arrow, it's as easy to read as `function` is. On top of that, IMO it looks cleaner. It also allows you to do scope binding in a different manor which in React is much better.

This:

    <a onClick={this.onClickEvent.bind(this)}>Click Me</a>

becomes this:

    <a onClick={(event) => this.onClickEvent(event)}>Click Me</a>

[0] https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_...

> Seems like it's obsolete.

Then you can write your own Deferred implementation. I didn't even know it was implemented in browsers.

     const run = async () => { ... }

How to read this? run is a constant that equals the result of calling function async() thas maps to something in curly brackets? This is confusing.

> If you want to write async code, use async / await.

That is a good idea, but it has nothing to do with arrow functions.

> It also allows you to do scope binding in a different manor

`this` binding in JS in classic functions is broken by design, so yes, that is the advantage of arrow functions.

That one liner has a lot going on. The first one is easier to read.

Please also look at my idea how to rewrite the code for readability using `deferred` pattern: https://news.ycombinator.com/item?id=16933983

Reply on news.ycombinator.com