56

It seems to me that, in ES6, the following two functions are very nearly identical:

function () {
  return this;
}.bind(this);

() => {
  return this;
};

The end result seems the same: arrow functions produce a JavaScript function object with their this context bound to the same value as the this where they are created.

Obviously, in the general sense, Function.prototype.bind is more flexible than arrow functions: it can bind to values other than the local this, and it can bind any function's this at any point in time, potentially long after it is initially created. However, I'm not asking how bind itself is different from arrow functions, I'm asking how arrow functions differ from immediately calling bind with this.

Are there any differences between the two constructs in ES6?

4
  • With bind you are essentially creating two functions. Other than that, the things you mentioned and the fact that arrow functions have a more concise syntax, there is no difference. Commented Sep 12, 2015 at 5:06
  • As this question doesn't seek and it's answers do not offer any times where you might have good reason to use bind over an arrow function, I have asked a new question about when to do so: runkit.com/embed/yhv29j5sybvn Commented Sep 25, 2017 at 1:57
  • Possible duplicate of Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?
    – Alex
    Commented Oct 17, 2018 at 12:34
  • 1
    In the bind version it returns a new function which partially applies the arguments to bind . Arrow doesn't have this so use of it is as any free variable from a higher scope.
    – Sylwester
    Commented Feb 14, 2019 at 23:40

3 Answers 3

39

There are no (significant) differences.

Well, okay, that's a little premature. There are three tiny differences unique to arrow functions.

  1. Arrow functions cannot be used with new.

    This means, of course, that they do not have a prototype property and cannot be used to create an object with the classically-inspired syntax.

    new (() => {}) // TypeError: () => {} is not a constructor
    

    This is probably for the best, though—the way new works would not make much sense with bound functions.

  2. Arrow functions do not have access to the special arguments object that ordinary JavaScript functions have access to.

    (() => arguments)(1, 2, 3) // ReferenceError: arguments is not defined
    

    This one is probably a little bit more of a gotcha. Presumably this is to remove one of JavaScript's other oddities. The arguments object is its own special beast, and it has strange behavior, so it's not surprising that it was tossed.

    Instead, ES6 has splats that can accomplish the same thing without any magic hidden variables:

    ((...args) => args)(1, 2, 3) // [1, 2, 3]
    
  3. Arrow functions do not have their own new.target property, they use the new.target of their enclosing function, if it exists.

    This is consistent with the other changes to remove "magically" introduced values for arrow functions. This particular change is especially obvious, considering arrow functions can't be used with new anyway, as mentioned above.

Otherwise, arrows are just like bound functions, semantically. It's possible for arrows to be more performant, since they don't have to carry around the extra baggage and since they don't need to be converted from ordinary functions first, but they're behaviorally exactly the same.

3
  • 4
    I wouldn't say arguments was tossed because of "strange behavior" (which is fixed in strict mode anyway). Rather, arrow functions can access their enclosing function's arguments object, consistent with how they access its this binding and new.target.
    – Bergi
    Commented Sep 12, 2015 at 12:29
  • 4
    @Bergi Even in strict mode, arguments is considerably strange: it still isn't an array, so a splat is still more useful and predictable. Commented Sep 12, 2015 at 16:43
  • @AlexisKing, you should definitely mention accepting the parent context in your answer. Commented Jun 27, 2018 at 20:51
31

There are a few differences:

  • Arrow functions cannot be constructed. While both arrow functions and bound functions both don't have a .prototype property, the former do throw an exception when called with new while the latter just ignore the bound value and call their target function as a constructor (with the partially applied bound arguments, though) on the new instance.

    function F() {}
    var f = () => {},
        boundF = F.bind({});
    console.log(new boundF(), new boundF instanceof F) // {}, true
    console.log(new f) // TypeError
    
  • Arrow functions do have lexical arguments, new.target and super as well (not only lexical this). A call to an arrow function does not initialise any of those, they are just inherited from the function the arrow function was defined in. In a bound function, they just refer to the respective values of the target function.

  • Arrow functions don't actually bind a this value. Rather, they don't have one, and when you use this it is looked up like a variable name in the lexical scope. This does allow you to lazily define an arrow function while this is not yet available:

    class X extends Object {
        constructor() {
             var f = () => this, // works
                 boundF = function(){ return this; }.bind(this);
    //                                                    ^^^^ ReferenceError
             super(); // initialises `this`
             console.log(f(), f() == this); // {}, true
        }
    }
    new X;
    
  • Arrow functions cannot be generator functions (though they can return generators). You can use .bind() on a generator function, yet there is no way to express this using an arrow function.

9

Here is one more subtle difference:

Arrow functions can return a value without using the 'return' keyword, by omitting the {} braces following the => immediately.

var f=x=>x;           console.log(f(3));  // 3
var g=x=>{x};         console.log(g(3));  // undefined
var h=function(x){x}; console.log(h(3));  // undefined
var i=x=>{a:1};       console.log(i(3));  // undefined
var j=x=>({a:1});     console.log(j(3));  // {a:1}
2
  • 2
    I don't think this is a particularly useful answer. Yes - curly braces can be omitted - and that's convenient but that's just a difference on syntax, not functionality.
    – dwjohnston
    Commented Sep 13, 2018 at 0:33
  • I think this is an excellent answer especially if you're not across all short-hand syntax Commented May 12, 2020 at 4:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.