What's this?
Published: 2023-07-05 18:19:51


"Is this the real life? Is this just fantasy?" 

Today, we're going to answer that question. 

**What exactly is this?** 

'this' is another javascript keyword that allows us to manipulate our code in very interesting ways.

Much like a politically incorrect joke in the 2020s the execution of 'this' depends heavily on the context. What exactly 'this' points to depends largely on how a function or object method is invoked. Depending on those two things 'this' allows us to access and manipulate the properties and methods of the object it belongs to. Like so.

```
const joke = {
  punchline: "With a bullpen",
  setup: function() {
    console.log("How does a bull write? " + this.punchline + "!");
  }
};

joke.setup(); // Outputs: How does a bull write? With a bullpen!
```

As you can see when we call the setup() method on the joke object, 'this' is pointing to the object itself, allowing us to access the punchline property of said object. It's using this context dependency that we can create reusable code and functions that can work with other objects.


**Get this!**

The word of the day is context. If you want to know the value of 'this' at any given time it's important to understand the variety of ways in which 'this' can be invoked. Luckily for us there are a handful of patterns we can identify to trace the value of 'this':


- Implicit binding: When you call a function as a method of an object, the value of 'this' will be the object the function was created in. This is how we called 'this' is the example above

- New binding: When you call a function as a constructor to create new objects using the 'new' keyword, 'this' refers to the newly created object.

```
function Movie(director, year) {
  this.director = director;
  this.year = year;
}

const terminator = new Movie("James Cameron", 1984);
console.log(terminator.director); // Output: James Cameron
console.log(terminator.year); // Output: 1984
```

- Explicit binding:  'call' and 'apply' methods allow explicit setting of the 'this' value for a function call and works like so:

```
const person1 = {
  name: 'John',
  greet: function() {
    console.log('Hello, ' + this.name + '!');
  }
};

const person2 = {
  name: 'Alice'
};

person1.greet.call(person2); // Output: Hello, Alice!
```
Apply:

```
function introduce(language, years) {
  console.log('I am ' + this.name + ', and I have been coding in ' + language + ' for ' + years + ' years.');
}

const person = {
  name: 'Emily'
};

const skills = ['JavaScript', 5];

introduce.apply(person, skills);
// Output: I am Emily, and I have been coding in JavaScript for 5 years.

```
- Default binding: When a function is called directly, 'this' usually refers to the global object. Unfortunately, a global object is too large to provide an example output of but understand that if you call 'this' outside of a declared object or constructor it will return a global object. Try console logging the 'this' keyword and see for yourself!

**This is scary**
Dealing with 'this' can be tricky at first. When first introduced it can be a dark road with many pitfalls but the payoff is worth the journey. This provides an indespensible way to  clean your code up and reuse certain code blocks, saving us some time. But be aware of some things before setting out on your journey. Two specifically:

1. Strict Mode: The behavior of 'this' is slightly altered in strict mode. Just like its name implies, strict mode doesn't allow the 'this' keyword to default to the global object, it returns undefined when not called as a method or constructor. Strict mode itself can be useful for enforcing mindful coding centered around 'this' invocation and binding but always be aware when it's being enforced in your code. Try calling the this keyword in a console log to see if you're working in strict mode.

2. Arrow functions: Arrow function don't treat 'this' the same as regular functions as their binding of 'this' is inherited from the surrounding lexical scope. This can also be useful if you want maintain the 'this' value in its current context but it's important to keep an eye on it and understand the context you're working in.

**Isn't this cool?**

Isn't 'this' the bee's knees? I can hardly .contain() myself. But while 'this' is a really useful tool in Javascript it's important not to lose track of its value at any given moment. 
'this' is extremely powerful when leveraged properly and gives eevry developer an exciting way to code. Understanding its contextual nature and invocation patterns can allow us to write extremely effiectient, clean, and reliable JavaScript. Have fun!