JavaScript explanation: this, apply and bind

Hi there! In this post I would like to briefly explain what is the meaning of this , apply and bind.

About this keyword

In JavaScript, this refers to the object that is executing the current function. The value of this can be determined by how a function is called.

Here are a few ways that the value of this can be determined:

• In the global scope (outside of any function), this refers to the global object. In a web browser, the global object is window.
• Inside a function, the value of this depends on how the function is called. If the function is called as a method of an object (e.g., obj.method()), this will refer to the object (obj). If the function is called as a standalone function (e.g., function()), this will refer to the global object.
• Inside an arrow function, the value of this is determined by the surrounding context. Arrow functions do not have their own this value, so they inherit the this value of the surrounding context.

Here are a few examples to illustrate how this can be determined:

// In the global scope
console.log(this);  // Output: window (in a web browser)

const obj = {
  x: 10,
  y: 20,
  sum: function() {
    console.log(this);  // Output: obj
    console.log(this.x + this.y);  // Output: 30
  }
};
obj.sum();

const standAlone = function() {
  console.log(this);  // Output: window (in a web browser)
};
standAlone();

apply and bind

apply and bind are methods that can be used to specify the value of this when calling a function.

Here is an example of how apply can be used:

const obj = {
  x: 10,
  y: 20
};

function add() {
  return this.x + this.y;
}

console.log(add.apply(obj));  // Output: 30

In the example above, the apply method is called on the add function and is passed the obj object as an argument. This sets the value of this inside the add function to obj, so when this.x and this.y are accessed, they refer to obj.x and obj.y, respectively. The apply method is called on the add function and the result of add is logged to the console.

Here is an example of how bind can be used:

const obj = {
  x: 10,
  y: 20
};

function add() {
  return this.x + this.y;
}

const boundAdd = add.bind(obj);
console.log(boundAdd());  // Output: 30

In the example above, the bind method is called on the add function and is passed the obj object as an argument. This creates a new function, called boundAdd, that has its this value set to obj. When boundAdd is called, it will execute the code in the add function with this set to obj.

apply vs bind

The main difference between apply and bind is that apply calls a function with a specified this value and arguments, whereas bind returns a new function with a specified this value and arguments.

Here is an example that demonstrates the difference between apply and bind:

const obj = {
  x: 10,
  y: 20
};

function add(a, b) {
  return this.x + this.y + a + b;
}

console.log(add.apply(obj, [1, 2]));  // Output: 33

const boundAdd = add.bind(obj, 1, 2);
console.log(boundAdd());  // Output: 33

In the example above, the apply method is called on the add function and is passed the obj object as the this value and the array [1, 2] as the arguments. This calls the add function with this set to obj and the arguments 1 and 2.

The bind method is called on the add function and is passed the obj object as the this value and the arguments 1 and 2. This creates a new function called boundAdd that has its this value set to obj and its arguments set to 1 and 2. When boundAdd is called, it will execute the code in the add function with this set to obj and the arguments 1 and 2.

So, in summary, the main difference between apply and bind is that apply calls a function with a specified this value and arguments, whereas bind returns a new function with a specified this value and arguments.