Need of this.functionName

JavaScript
1

why do I need to use this.functionName
can’t I simply use function name ?


class Counter extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
   // change code below this line
this.increment = this.increment.bind(this);
   // change code above this line
 }
 // change code below this line

 // change code above this line
 render() {
   return (
     <div>
       <button className='inc' onClick={this.increment}>Increment!</button>
       <button className='dec' onClick={this.decrement}>Decrement!</button>
       <button className='reset' onClick={this.reset}>Reset</button>
       <h1>Current Count: {this.state.count}</h1>
     </div>
   );
 }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Write a Simple Counter

Link to the challenge:

2

I guess “this” refers to the instance of the object you created. You can use function name directly but this keyword helps to create multiple instance of an object. Like, you’re using multiple buttons here. Code reusability is what functions are good for.