What is ‘this’ keyword in JavaScript? Complete guide

Welcome to another advanced tutorial on codedamn! Today, we will be delving into a fundamental yet often misunderstood aspect of JavaScript — the 'this' keyword. By the end of this guide, you will have a comprehensive understanding of 'this' and how to use it effectively in your JavaScript projects.

Introduction: Understanding 'this' in JavaScript

In JavaScript, 'this' is a special keyword that refers to the context in which a function is called. It's a reference to the object that the function is a method of. However, the value of 'this' is not determined by how or where a function is declared, but by how it's called — the call-site. This can lead to confusion, especially for JavaScript beginners, as the value of 'this' can change depending on the context.

The Global Context

When 'this' is used outside of any function or object, it refers to the global object. In a browser environment, the global object is the window object. Here's an example:

console.log(this); // Outputs: Window {...} (or the global object in a non-browser environment)

Remember, using 'this' in the global context can lead to hard-to-debug issues, especially when dealing with strict mode or modules, where 'this' is undefined.

Function Context

The value of 'this' inside a function depends on how the function is called. Let's illustrate this with an example:

function myFunction() {
  console.log(this);
}

myFunction(); // Outputs: Window {...} (or the global object in a non-browser environment)

In this case, 'this' inside 'myFunction' refers to the global object since we're simply calling the function. This changes when we invoke the function as a method of an object:

let myObject = {
  myMethod: function() {
    console.log(this);
  }
};

myObject.myMethod(); // Outputs: {myMethod: ƒ}

In the above example, 'this' refers to 'myObject' because 'myMethod' is invoked as a method of 'myObject'.

Constructor Context

When a function is invoked with the 'new' keyword (i.e., as a constructor), 'this' inside the function refers to the newly created object:

function MyConstructor() {
  this.myProperty = "Hello World";
}

let myInstance = new MyConstructor();
console.log(myInstance.myProperty); // Outputs: "Hello World"

In this case, 'this' inside 'MyConstructor' refers to 'myInstance'.

Arrow Functions and 'this'

Arrow functions handle 'this' differently. They don't create their own context, but inherit 'this' from the enclosing context:

let myObject = {
  myMethod: function() {
    let arrowFunction = () => console.log(this);
    arrowFunction();
  }
};

myObject.myMethod(); // Outputs: {myMethod: ƒ}

In this example, even though 'arrowFunction' is a function, 'this' inside it refers to 'myObject' because it's an arrow function.

Changing the Context with call(), apply(), and bind()

JavaScript provides three methods — call(), apply(), and bind() — that allow you to explicitly set the value of 'this' in a function:

• The call() and apply() methods call a function with a given 'this' value and arguments. The difference between the two is that call() accepts an argument list, while apply() accepts a single array of arguments.
• The bind() method returns a new function, where 'this' has a certain value.

function myFunction() {
  console.log(this);
}

let myObject = {};

myFunction.call(myObject); // Outputs: {}
myFunction.apply(myObject); // Outputs: {}

let boundFunction = myFunction.bind(myObject);
boundFunction(); // Outputs: {}

In the above examples, we're using call(), apply(), and bind() to set 'this' inside 'myFunction' to 'myObject'.

FAQ

1. What is 'this' keyword in JavaScript?

In JavaScript, 'this' is a keyword that refers to the context in which a function is called. It's a reference to the object that the function is a method of.

2. Does 'this' keyword refer to the same thing in all contexts?

No, the value of 'this' is not static and can change depending on the context in which it is called.

3. How does 'this' keyword work in arrow functions?

Arrow functions don't create their own context for 'this'. They inherit 'this' from the enclosing context.

For more in-depth information on 'this' keyword in JavaScript, consider reading the official JavaScript documentation.

Wrapping Up

Understanding 'this' in JavaScript is a fundamental aspect of mastering the language. It can be a source of confusion due to its context-dependent nature, but with a thorough understanding and practice, it can be a powerful tool in your JavaScript arsenal. Happy coding!

This blog post was written for codedamn. Stay tuned for more advanced JavaScript tutorials on codedamn!