How come this arrow function has no initialiser? Is this syntax React exclusive?

Question

Can someone please explain how arrow functions syntax works? Why does onInputChange have no const, let, or var before it? I am trying to understand, but everywhere I look I can only find syntax similar to this one:

let arrowFunct = (a) => {a+1};

This makes sense. It creates a variable that is assigned what the arrow function returns.

On the other hand, onInputChange from the example below does not have any declaration. Can somebody please explain?

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      input: ''
    }
  }

  onInputChange = (event) => {
    console.log(event);
  }

  render() {
    return (
      <div className="App">
        <Particles className='particles' params={particleOptions}/>
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm onInputChange={this.onInputChange} />
        {/*
        <FaceRecognition />*/}
      </div>
    );
  }
}

I do have another question that is more about React. "event" gets passed down from React.Component, right? It is a prop passed down from the Component class, and it gets created when the super() function runs inside the constructor.

This is an example of a [class field](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields). `event` is not a prop, it is just a parameter to a function. When the inputChange event happens, the event object will be passed in to that function. — Nicholas Tower, Aug 06 '21 at 13:49
After having looked at the documentation for class fields, it has become more clear what that syntax meant. It is a way to create class methods, without making the constructor look busy. I do still have a question. Do class properties have types (like let, var, or const)? And can methods like onInputChange have types associated to them? — Bogdan Mihai Gligor, Aug 06 '21 at 14:57
Methods are functions stored in object properties. `let`, `var` and `const` are form declaring variables, not object properties. — Quentin, Aug 06 '21 at 15:06
Methods can have types associated with them in so much as anything in JavaScript can have a type associated with it (i.e. not really as JS uses duck typing everywhere). — Quentin, Aug 06 '21 at 15:06
As I understand, objects and classes in JS are somewhat different. Classes have inheritance, properties, constructor, and their syntax is quite different. And when using arrow functions like this ```const arrFct = (a) => {a+1};```, arrFct is an object, a variable, or a function? — Bogdan Mihai Gligor, Aug 06 '21 at 15:15
`arrFct` is a variable which holds a function which is also an object. "variable" has sort of a loose meaning. It could refer to the variable name, the variable value or even the pair. — MinusFour, Aug 06 '21 at 15:32

score -1 · Answer 1 · answered Aug 06 '21 at 13:56

this is not a function, this is a methode you can learn more about Object oriented and prototype oriented online.

The this is the 'function' is only for this object (so it's a methode) and so this is the way to declare it

By the way a function can also be a variable so the syntaxe

  onInputChange = (event) => {
    console.log(event);
  }

can be confusing but in fact, it's a real thing, the attribute onInputChange is this function, it's NOT the result of this function, this variable is the function

How come this arrow function has no initialiser? Is this syntax React exclusive?

1 Answers1