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
}
Let us first understand what exactly the function is and how to declare a function in ES6 using different syntaxes. function display(name) { console. log(name) } display("Geeksforgeeks"); let display = name = console. log(name); display("Geeksforgeeks");
ES6 introduced classes. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class , and the properties are assigned inside a constructor() method.
The () => { ... } is the function. It's an ES6-style "arrow" function expression. These are like function expressions ( tick = function() { ... } ) except that the this value within the function is inherited from the context in which it's defined rather than being set when the function is called.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With