Categories
ecmascript-6 ecmascript-harmony javascript

Methods in ES6 objects: using arrow functions

132

In ES6, both of these are legal:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

and, as shorthand:

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

Is it possible to use the new arrow functions as well? In trying something like

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

or

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

I get an error message suggesting that the method does not have access to this. Is this just a syntax issue, or can you not use fat-arrow methods inside of ES6 objects?

13

  • 1

    While using the fat arrow syntax? Only if you alter the this value by first creating the chopper object, then doing the assignment in a function that has this pointing to that object. This can be accomplished pretty cleanly with a constructor function.

    – user1106925

    Jun 28, 2015 at 3:09


  • 2

    This demo will run in Firefox. Chrome doesn’t have it yet. jsfiddle.net/bfyarxfe

    – user1106925

    Jun 28, 2015 at 3:12


  • 2

    @fox, you must use ‘use strict’ on that jsfiddle.

    Jun 28, 2015 at 3:32

  • 1

    @fox: It works fine in a supported environment. Firefox doesn’t yet have complete support. Try it in Continuum and console.log() the result of the method call. It works.

    – user1106925

    Jun 28, 2015 at 3:39

  • 1

    Mozilla docs says Does not have its own bindings to this or super, and should not be used as methods Mozilla Arrow function documentation

    Sep 26, 2020 at 15:20


213

Arrow functions are not designed to be used in every situation merely as a shorter version of old-fashioned functions. They are not intended to replace function syntax using the function keyword. The most common use case for arrow functions is as short “lambdas” which do not redefine this, often used when passing a function as a callback to some function.

Arrow functions cannot be used to write object methods because, as you have found, since arrow functions close over the this of the lexically enclosing context, the this within the arrow is the one that was current where you defined the object. Which is to say:

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

In your case, wanting to write a method on an object, you should simply use traditional function syntax, or the method syntax introduced in ES6:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

(There are small differences between them, but they’re only important if you use super in getOwner, which you aren’t, or if you copy getOwner to another object.)

There was some debate on the es6 mailing list about a twist on arrow functions which have similar syntax but with their own this. However, this proposal was poorly received because that is mere syntax sugar, allowing people to save typing a few characters, and provides no new functionality over existing function syntax. See the topic unbound arrow functions.

3

  • If I’m reading this correctly, it seems to suggest that the mailing list deprioritizes syntactic sugar, even if it would lead to greater uniformity/readability of code. As it stands, it’s much more challenging to use the fat-arrow functions in an OOP context under ES6 than, say, under coffeescript.

    – fox

    Jun 28, 2015 at 4:25

  • As I understand it, syntactic sugar is considered a valid reason for considering language extensions, but as you say with a lower priority–in other words, the bar is higher for such proposals.

    – user663031

    Jun 28, 2015 at 5:07

  • A bit confused. From what I understand for the function keyword notation, this points to the context of execution, where it is called, not where it is defined. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . In the example above, can you really relay on on this.owner the be equal to the value that is defined on the chopper object?

    – Ben Carp

    Jan 20, 2021 at 15:48

16

In this line getOwner: () => this.owner should be:

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

console.log(chopper.getOwner());

You would have to declare this into a function:

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

console.log(chopper.getOwner());

Or:

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

6

  • 1

    I’m getting an error here: "TypeError: Cannot read property 'owner' of undefined\n at Object.chopper.getOwner

    – fox

    Jun 28, 2015 at 3:04

  • I see, it is the correct use, however the method esta always returns window Object. You would have to declare this within a function.

    Jun 28, 2015 at 3:10

  • 3

    this doesn’t necessarily refer to window. It refers to whatever the current value of this is in the enclosing environment, which may or may not be window. Maybe that’s what you meant. Just want to make sure he understands it isn’t some default value.

    – user1106925

    Jun 28, 2015 at 3:18

  • @torazaburo That is fine for me, I tried it, this now refers to class

    Jun 28, 2015 at 3:39


  • 2

    What you have written is equivalent to, but more verbose than, simply writing var chopperFn = function() { this.owner = 'Jhon'; this.getOwner = () => this.owner; }.

    – user663031

    Jun 28, 2015 at 3:42

5

If you have to use arrow function, you can change this to chopper,

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

Although this is not best practice, when you change the object name, you have to change this arrow function.