Search code examples
javascriptjsxarrow-functionsecmascript-nextclass-fields

Arrow vs classic method in ES6 class


Is there any reason to write classic syntax of ES6 methods?

class MyClass {

    myMethod() {
        this.myVariable++;
    }

}

When I use myMethod() as callback on some event, I must write something like this (in JSX):

// Anonymous function.
onClick={() => { this.myMethod(); }}

// Or bind this.
onClick={this.myMethod.bind(this)}

But if I declare method as arrow function:

class MyClass {

    myMethod = () => {
        this.myVariable++;
    }

}

than I can write just (in JSX):

onClick={this.myMethod}

Solution

  • The feature you are using is not part of ES6. It's the class fields proposal. It allows you to initialize instance properties without having to write a constructor. I.e. your code:

    class MyClass {
    
        myMethod = () => {
            this.myVariable++;
        }
    
    }
    

    is exactly the same as

    class MyClass {
    
        constructor() {
            this.myMethod = () => {
                this.myVariable++;
            };
        }
    
    }
    

    And this also shows you what the difference is between a normal class method an a method created via a class field:

    • A normal method is shared between all instances of the class (it is defined on the prototype)
    • A "class field method" is created per instance

    So all the same as reasons as presented in Use of 'prototype' vs. 'this' in JavaScript? apply, but in short:

    • Use "class field methods" if you need a method per instance. Such is the case for event handlers that need to access the current instance. Access to this also only works if you are using an arrow function.
    • Use normal class methods in all other cases.