You Should Know 'This'

What is 'This'?

---

First of all, as the MDN docs will tell you

this keyword behaves a little differently in JavaScript compared to other languages

this allows you to bind a property to the the object that you are writing your code in. So if you are assigning the value of Hello World to this.helloWorld, you give yourself the ability to reference that property from the name of the object with the dot operator. If you assign a value to a property with this to the window (for web) or for the global (for node js) objects you can access them with the window.OBJECT or global.OBJECT.

In React we constantly use this to assign properties on a class to the scope so the object will be available to all functions and properties in the class.

this also allows you to use similar naming conventions when declaring variables within an object. The following is an example.

function scope(first, last) {
  this.first = first;
  this.last = last;

  console.log(this.first + " " + this.last);
}

scope("Marco", "Chavez");

result of the example

Marco Chavez

in the console.

Why do you use 'this' with React?

---

By default, we cannot access properties, state and methods within the components from the event handlers used in our render methods. I will use methods for example (since this is what I have to bind more often then anything else). In order to use a method within your component for an event handler in your JSX you have to bind the method in either your constructor, or the event handler itself.
It would look something like below.

<input onChange={this.METHOD.bind(this)} />

or you could bind it in the constructor (which is much easier to remember)

constructor(props) {
    super(props);

    this.METHOD = this.METHOD.bind(this);
}

render() {
    return <input onChange={this.METHOD} />
}

I typically bind it in the constructor so I don't have to remember later in the render method to bind it to this. Either way, binding allows you to use component methods in your event handlers because the event handler has its contents bound to the component's instance. I know that last sentence was sort of confusing, but what you should take out of it is that the property becomes a part of the component you are using when you bind it.

Here is some of my info

• My Website
• GitHub
• CodePen

I want to thank you for taking the time to read this article. I am also very happy that you are taking the time to become a better developer yourself. I highly encourage that you join this platform and start writing yourself, since there is no better way to completely understand something until you are able to teach it. This is my first article, and I want to prepare you for a whole lot of React and Express articles, since that's what I work with the most. This was MarCode, have a great day!

The image in the header was created by Value Coders