Getting Started - What Is The "This" Keyword?

In its short name, the "this" keyword is an object that is executing the current function. What all of that means is that the "this" keyword can be used to pass data through objects and grab data from methods and functions.

Getting Started - Setting Up Your Project

The first step is to create a project using your command prompt or window shell. Using the command,npm create-react-app you can create a new project. Once you create your new project, you want to cd into your project and continue by typing code . into your console line. Then it should come up with your Visual Studio Code project in a new tab like this.

This is what should come up if everything works

Now, once you have this up and running, we are going to do a bit of a cleanup. Get rid of the App.css, App.test.js, logo.svg, reportWebVitals.j, and the setupTests.js. After doing that, your project should look like this:

What your cleaned up version of your tabs should look like

Now that you have deleted these files, we need to get rid of some code. First, you need to go into App.js and delete all of the imports at the top, as well as all the code inside the div tags. After doing that, it should look something like this:

Another file we need to go to is index.js. In there, you need to delete the reportwebvitals import at the top as well as the reportwebvitals at the bottom of the file. After completing this, your index.js file should look something like this:

Now that you have completed the setup, we can move on to the code.

Writing Code - Basic Code

Now, in the App.js file, we do not need to use the return method so we can get rid of that and just under the function we are going to make an object/variable called video.

function App() {
  const video = {}


export default App;

Inside this video variable we are going to just put some data in it.

function App() {
  const video = {
title: 'a',
tags: ['a', 'b', 'c'],
}


export default App;

Here you can see that we have two properties, title and tags. Well, using the"this" keyword we can first create a method:

  ShowTags() {
      console.log(this.title);
    }

and then we can put in a console.log : this.title. What this does is that using "this" we can grab data from outside the method, allowing access to the title as well as tags. Then this console logs the title property, "a" and it displays it on the console. MAke sure to add the call function at the bottom to execute this code: Final code:

function App() {
  const video = {
title: 'a',
tags: ['a', 'b', 'c'],
  ShowTags() {
      console.log(this.title);
    }
video.ShowTags()
}


export default App;

Writing Code - Using "this" with functions

In this example, using the same knowledge as the last, we will be able to display the "tags" as well as the "title" together using the "this" keyword.

function App() {
  const video = {
title: 'a',
tags: ['a', 'b', 'c'],
  ShowTags() {
      console.log(this.title);
    }
}
video.ShowTags()
}


export default App;

Leaving off with the code we had we can add the "tags" property to display them.

function App() {
  const video = {
title: 'a',
tags: ['a', 'b', 'c'],
  ShowTags() {
      console.log(this.title);
      console.log(this.tags);
    }
}
video.ShowTags()
}


export default App;

As you can see in the console, the title and tags are output separately.

But in this example, I am going to show you how to make the title output in each of the letters. Well, to do that, we will be using the forEach method, which allows us to add different properties to an attribute individually.

function App() {
  const video = {
title: 'a',
tags: ['a', 'b', 'c'],
  ShowTags() {
      this.tags.forEach(function(tag)
      }, 
    }
}
video.ShowTags()
}


export default App;

Here we are just grabbing the tag property, and for each of the items inside that array, we will execute something, but for now, we are just going to put it in a function, and the function will have a property of tag.

function App() {
  const video = {
title: 'a',
tags: ['a', 'b', 'c'],
  ShowTags() {
      this.tags.forEach(function(tag){
        console.log(this.title, tag)
      }, )
    }
}
video.ShowTags()
}


export default App;

Then we will console log the title for each of the tags from the tag property of the function. If you execute this, you will get an error message. This is because we cannot grab the title even though we have used this, which grabs the property. Well, the problem is that we are in a function that will only grab what's inside of the method instead of "this" being inside of the object and grabbing information from the parent method. Lucky enough, the "forEach" property has a second option for passing data outside of the function.

function App() {
  const video = {
title: 'a',
tags: ['a', 'b', 'c'],
  ShowTags() {
      this.tags.forEach(function(tag){
        console.log(this.title, tag)
      }, this)
    }
}
video.ShowTags()
}


export default App;

The "this" keyword is outside of the function, meaning it can grab the properties and, most importantly, the array and pass that data down to the function.

As you can see, the tags all have the title separately in each of them.

Conclusion - OutComes

In these examples, you can get a brief understanding of how the 'this' keyword works using different techniques, such as methods and functions. As a result, you should have a console that has a title displayed for each of the array items.

Qasim's Blog