Live data from Hacker News

Fat arrow functions in Javascript

robcee.net

21–30 of 48 posts

Re: Fat arrow functions in Javascript

#22
Having seen all the coffeescript pushback here already I'm not surprised at the pushback here now. The truth is, it takes maybe a day to get really comfortable with using the fat arrow, and after that you wonder why it was any other way before.

Sometimes I wonder if a lot of the anti-coffeescript people in this forum are simply Javascript native programmers and don't want any change period. I can't think of many programming languages that stop changing - seems to be the norm.

Re: Fat arrow functions in Javascript

#23
This pattern is incredibly useful, once I had it available I started seeing it constantly. Particularly for binding functions to events while retaining context -- very common in JavaScript.

Knowing the value of `this` at the beginning of a function makes for much more readable code. Fat arrow and all the other ES6 features available in CoffeeScript and Traceur are now too valuable to live without imho.

Re: Fat arrow functions in Javascript

#24
post #14

I am not pleased at seeing language bloat. Look at what happened with C++11. Languages are supposed to give a common base for developers to read and write the same code. New developers should be able to get up to speed quickly, and see the intent of the other developers, which is one of the reasons Linux is written in C instead of C++. "Look at all that saved typing!" Yeah, shockingly there were only a few characters…

Yeah, I am really having a hard time seeing what the fat arrow syntax even changes. Everyone keeps saying scope, but the scope is and always has been lexical, right? That isn't changed. All that seems to be changed is what "this" is. So we got a whole new syntax for locking the value of "this". I agree, that does not seem worth it. There are no mental hoops to see that in "self.foo()", "self" was defined 5 lines up.

Re: Fat arrow functions in Javascript

#26
post #17

This article is written for someone who already understands the old issue that this is fixing (there's nothing wrong with writing it like that). But for someone like me that doesn't understand when you need to use this `bind()` stuff and the context your function is in (if I'm even saying that correctly), what can I read to get a better understanding of what's going on here? In other words, what do I need to read bef…

If you're writing OO javascript, you often want to use "this" to refer to your object, but various things in js and especially jquery can change the meaning/scoping of "this". So for example, if you have:

    var myObj = {
        foo: 'bar',
        baz: function() {
            console.log(this.foo);  //would give you 'bar', as expected
            
            //but if you have some code that changes the meaning of this, for example:
            $('.button').click(function() {
                console.log(this.foo);  //undefined, since now "this" refers to the scope of the event's callback function
            });
            
            //but if you use bind:
            $('.button').click((function() {
                //now "this" is scoped to refer to the main object
                console.log(this.foo); //gives you 'bar'
            }).bind(this));
        }
    }

Re: Fat arrow functions in Javascript

#27
Did anyone else do a double take reading this?

> If you’re a JavaScript programmer, chances are you’ve seen (and done) something like this before:

    var listener = node.addEventListener("click", function(event) {
        let _target = event.target;
        this.handleClick(_target);
    }.bind(this));
I had to go look up `let` in JavaScript[1]. It appears to still be a bleeding-edge feature not widely supported[2] outside of Firefox... not even in Node with the --harmony flag. I wonder if this is meant to be subtle pro-ES6 propaganda, or the author really takes `let` for granted and doesn't realize most JS programmers have never seen it :)

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

2. http://kangax.github.io/es5-compat-table/es6/#let

Re: Fat arrow functions in Javascript

#28
post #14

I am not pleased at seeing language bloat. Look at what happened with C++11. Languages are supposed to give a common base for developers to read and write the same code. New developers should be able to get up to speed quickly, and see the intent of the other developers, which is one of the reasons Linux is written in C instead of C++. "Look at all that saved typing!" Yeah, shockingly there were only a few characters…

I understand your sentiment in general, but disagree in this particular case. I've been writing JavaScript for years in various projects, companies, partnerships, etc. If I had a nickel for every time I saw...

    asyncOperation(_.bind(function(x) { this.x += x; }, this));
or...

    asyncOperation(goog.bind(function(x) { this.x += x; }, this));
or...

    asyncOperation(function(x) { this.x += x; }.bind(this));
or...

    asyncOperation($.proxy(function(x) { this.x += x; }, this));
or even...

    var self = this;
    asyncOperation(function(x) { self.x += x; });
...then I'd have a lot of nickels. Binding a function to the current scope is _insanely_ common - adding syntax specifically for it makes sense. I would argue that it reduces the cognitive overhead of the language, since rather than needing to read another method call, examine arguments, etc. I can simply translate a 2-character symbol into the meaning "outer-context-bound function". There's a lot more bloat in the above examples than there is in this:

    asyncOperation((x) => { this.x += x; });
This is like arguing that the '+' operator bloats the language, when we could all just be using Number(17).plus(Number(43));

Re: Fat arrow functions in Javascript

#29
post #27

Did anyone else do a double take reading this? > If you’re a JavaScript programmer, chances are you’ve seen (and done) something like this before: var listener = node.addEventListener("click", function(event) { let _target = event.target; this.handleClick(_target); }.bind(this)); I had to go look up `let` in JavaScript[1]. It appears to still be a bleeding-edge feature not widely supported[2] outside of Firefox... no…

I was aware it's pretty modern but honestly didn't think about it much. We use it heavily in Firefox Devtools code and I much prefer its non-hoisting properties over var.
Post reply on HN