Using this (this Keyword)

Hello HaWkers! Jeff Bruchado here.

This is another article in our series that will cover our journey to Learn Programming from Scratch.

Today will be an article about content that few people really understand.

Well, without further ado, let's get started!

Today, we're going to talk about 'this':

Let's start by imagining you're working on a project, an application that has several different tabs.

In each tab, you want to show specific information about the logged-in user, like name, email, and other information...

You must be thinking: "Okay, but how do I know which user is on which tab without making a mess?"

And that's where the famous this comes in.

this is like a GPS in your code. It helps you understand where you are and what data you have access to in that specific context.

There are 3 reasons why it's important: Check this out:

Context: this gives you context. Depending on where you use it, it can refer to different things. For example, inside an object method, this refers to the object itself.

Flexibility: It makes your code more flexible. You can use the same function in different objects, and this will adapt to the object calling the function.

Clarity: this helps make it clear what you're referring to. Without it, it would be easy to get lost among so many variables and functions.

Think of this as a magic mirror. Depending on how you look at it, it shows different things.

For example, if you're in an object method:

let user = {
  name: 'John',
  showName: function () {
    console.log(this.name);
  },
};

user.showName(); // Here, 'this' refers to the 'user' object

In this case, this.name is JavaScript saying "Hey, I'm talking about the name OF THE USER who called this function".

So, as you can see, understanding this is crucial because it gives you control and clarity over what your code is doing in different contexts.

Without it, you could be completely lost in your own code, trying to find the way out of a maze in the dark.

With this, you have a flashlight!

Well, next let's dive deeper into this subject.

Understanding this in JavaScript

Understanding the concept of this in JavaScript can be a bit complex for a beginner, however, if you understand this concept, you'll be able to deeply understand how the mechanisms that modern Frameworks use work.

(Now you'll understand why I repeated the scope concept a few times in recent articles)

Basically, the reserved word "this" refers to the current object in which the code is being executed. It can be used in different contexts and the value it assumes can vary depending on the context in which it's used.

For example, when using this inside a function, it refers to the global object, while when used inside an object method, it refers to the object itself.

Example of code in JavaScript that illustrates the use of this:

const obj = {
  prop: 'property value',
  method() {
    console.log(this.prop);
  },
};

obj.method(); // prints "property value"

In this example, the value of this inside the method method is the obj object. Therefore, when accessing the prop property using this.prop, the property value is printed to the console.

There are also some general rules about using this:

• When this is used inside a global function, it refers to the global object (which in the case of the browser is the window object).
• When this is used inside an object method, it refers to the object itself.
• When this is used inside an anonymous function that is passed as an argument to another function, the value of this will depend on how the anonymous function is called.
• It's possible to use the bind operator to change the value of this to a specific object, regardless of the context in which the function is called.

More detailed example that illustrates some of these cases:

// Global function
function func() {
  console.log(this); // refers to the global object (in the case of the browser, the "window" object)
}

func(); // prints the "window" object

// Object method
const obj = {
  prop: 'property value',
  method() {
    console.log(this); // refers to the "obj" object
  },
};

obj.method(); // prints the "obj" object

// Anonymous function passed as argument
function otherFunc(callback) {
  callback();
}

otherFunc(function () {
  console.log(this); // refers to the global object (in the case of the browser, the "window" object)
});

// Using "bind" to change the value of "this"
const obj2 = {
  prop: 'another property value',
};

function thirdFunc() {
  console.log(this.prop);
}

const newFunc = thirdFunc.bind(obj2);
newFunc(); // prints "another property value"

this in Arrow Functions

Before explaining about this in Arrow Functions, I need you to understand about lexical context.

Lexical Context

Lexical context refers to the context in which a function was written.

This includes where the function was defined and all variables and functions that were available at the time the function was written.

For example:

const x = 'global';

function test() {
  const x = 'local';
  console.log(x);
}

test(); // Output: "local"
console.log(x); // Output: "global"

In this case, when we call the test() function, the value of x that is printed is "local", because this is the value of x in the lexical context of the test() function.

When we call console.log(x) outside the test() function, the value of x is "global", because this is the value of x in the global lexical context.

this in Arrow Functions

In regular functions ( function() ), this refers to the object that calls the function.

For example:

const person = {
  name: 'Jeff',
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Output: "Hello, my name is Jeff"

In arrow functions, this refers to the lexical context, meaning the context in which the function was written.

I'll try to explain better with an example:

const person = {
  name: 'Jeff',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Output: "Hello, my name is undefined"

In this case, this doesn't refer to the person object, but to the global context.

That's why, when trying to access the name property of the person object, the returned value is undefined.

However, it's possible to use this differently in arrow functions, using the bind() keyword.

The bind() function allows you to "bind" the value of this to a specific variable or object.

See the example below:

const person = {
  name: 'Jeff',
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const greet = person.greet.bind(person);
greet(); // Output: "Hello, my name is Jeff"

In this case, by using bind() to "bind" the value of this to the person object, we can access the name property of the person object inside the greet() function.

Conclusion

In summary, this is used in regular functions or in arrow functions.

Its value and behavior can vary depending on the context in which it's used. In regular functions, this refers to the object that calls the function.

In arrow functions, this refers to the lexical context, meaning the context in which the function was written.

This can be a bit confusing, but the general rule is that this refers to the object that calls the function in regular functions, and to the lexical context in arrow functions.

It's important to remember that this can be "bound" (bind) to a specific value using the bind() function.

This can be useful when we want to use this differently than the standard in arrow functions, for example.

With this, I hope I've helped clarify this feared subject that is this in JavaScript.

Well HaWker, we've reached the end of another article.

As always, if you have any questions or want to explore any point further, just reply with your question to this email.

And remember, I'm here to help you improve 1% with each new article!

If you made it this far, as usual, please reply to this email with "I finally managed to understand what this is for".

This way I'll know that this article series is being useful for you, and that you're following along and taking advantage.

As you already know! Only a true HaWker makes it to the end.

Congratulations!

I'm happy to have you here.

See you soon.

Let's go! 🦅

- Jeff Bruchado

---

When you feel the time is right, there are 2 ways I can help you:

01) Learning JavaScript from Scratch: Become a valuable programmer and learn to program using JavaScript, with organized and condensed content focused on what really matters for you to learn. The content has all the articles I've been sharing weekly with you, and also has practical exercises, with answers for you to learn the theory and immediately start getting hands-on.

02) Consulting: Join my mentorship and have classes directly with me. If you're interested in this, reply to this email with "I'm interested in the mentorship."

Congratulations on making it this far, HaWker! 🎉

Now that you've learned about using the this keyword in JavaScript, how about testing your knowledge? Take the quiz below and see how much you absorbed from our article.

It's a great way to reinforce learning and prepare for the next steps in your programming journey.

Click to access the quiz.

Good luck and have fun!