Understanding this in JavaScript

JavaScript can sometimes be confusing, especially when it comes to the keyword this. But once you understand how this behaves in different situations, you’ll be better equipped to write flexible and reusable code.

What is this in JavaScript?

In JavaScript, this is a special keyword that refers to the context in which a function is called. It’s especially useful in object methods, where you want to refer to the object the method is attached to.

Let’s look at a simple example:

function logPrice() {
  console.log(this.price);
}
 
const burger = {
  flavour: "cheese",
  price: 200,
  logPrice,
};
 
const chips = {
  price: 50,
  logPrice,
};
 
burger.logPrice(); // 200
chips.logPrice(); // 50

In the code above, both burger and chips use the same logPrice function. When we call the method, this refers to the object to the left of the dot (.). This allows the same function to behave differently depending on the object it’s attached to.

Controlling this with .bind() and .call()

Sometimes, you may want to control what this refers to, regardless of how the function is called. JavaScript provides two methods to do this: .bind() and .call().

Using .bind()

.bind() creates a new function with this permanently set to the object you provide.

chips.logPrice.bind(burger)(); // 200

In this case, we’re telling JavaScript: “Pretend that chips.logPrice is being called from the burger object.”

Using .call()

.call() works similarly but immediately calls the function with the provided this value.

chips.logPrice.call(burger); // 200

So .call() is like a one-time .bind() and function call combined.

Four Ways to Use this

There are four main ways that this can be set when a function is called:

1. Plain Function Call

logPrice();

In this case, this refers to the global object (or undefined in strict mode).

2. As a Method on an Object

const item = {
  price: 100,
  logPrice,
};
item.logPrice(); // `this` refers to `item`

3. With .bind() or .call()

logPrice.call(item);
logPrice.bind(item)();

You manually set what this should be.

4. Using new with Constructor Functions

function Food(name) {
  this.name = name;
}
 
const burger = new Food("Burger");

The new keyword creates a new object and sets this to refer to that new object.

Arrow Functions and this

Arrow functions behave differently. They do not have their own this. Instead, they inherit this from their surrounding (lexical) scope.

This makes them great for use in places where you want to preserve the this value from the outer context, such as in callbacks or inside class methods.

const food = {
  price: 100,
  logPrice: function () {
    const arrow = () => {
      console.log(this.price);
    };
    arrow(); // `this` refers to `food`
  },
};
 
food.logPrice(); // 100

If arrow were a regular function, this would be undefined or the global object.

Summary

• this depends on how a function is called.
• Use .call() and .bind() to explicitly control what this refers to.
• Arrow functions inherit this from their parent scope.

Mastering this can seem tricky at first, but with practice, it becomes a powerful tool for writing flexible and elegant JavaScript code.

Further Reading

• MDN Web Docs: this