CODEWITHSUNDEEP
javascriptreactjsecmascript-6
jojojohn
jojojohn

Reputation: 753

es6 function declaration in React class

Whats the difference between functions declared with const and functions declared without let or const and a function declared otherwise in an ES6 class?

class App extends Component {

    submitFood = () =>{
        // some code
    }

Why does the above work OK but the declaration below give an error:

class App extends Component {

    const submitFood = () =>{
        // some code
        }

Upvotes: 6

Views: 1904

Answers (2)

Felix Kling
Felix Kling

Reputation: 816452

First of all: None of the examples you provided is valid ES6. The grammar rules for ES6 classes only allow methods definitions inside the class body. I.e.

class MyClass {
  method1() {}
  method2() {}
}

The first example however is making use of the class fields proposal. This proposal extends the existing grammar to allow the definition of properties of the form

class MyClass {
  someProperty = value;
}

These assignments are not evaluated at class definition time but at instantiation time. It's syntactic sugar for assigning properties in the constructor:

class MyClass {
  constructor() {
    this.someProperty = value;
  }
}

Your second example is simply invalid syntax because there are no grammar rules that allow putting let or const before the class field.

Keep in mind that class fields are not variable declarations or variable assignments.

Upvotes: 5

Gamsh
Gamsh

Reputation: 545

const submitFood = () =>{ // some code }

Is the creation of function (submitFood=() {}) and the creation of a variable so usual rules in variable hosting blocked let and const.
so fail since submitFood() is not defined. (It will throw a ReferenceError).

Upvotes: -3

Related Questions