Javascript function call and apply methods

In Javascript, even functions are considered objects even tho it's a bit weird, and objects can have some methods so functions also have methods.
functions have 3 interesting methods: call, apply and bind
so in this post i will explain them and tell the difference between them

Reminder: The this keyword inside the function

i wanted to remind you that the special this keyword inside functions or methods refer to the owner of it.
for example if we have a class with a method on it and an instance of that class, when we call the method, the this keyword will be that instance because it is the owner at that time

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  speak(words) {
    console.log(`${this.name} says ${words}`);
  }
}

const person = new Person("John", 30);

person.speak("Hello"); // John says Hello

this here refers to person object because in that case that's the owner so this.name will be John

The call method

let's first talk about the call method, simply put it allows you to change the value of the this keyword inside that function you called the method in.

example

let's create a seperate function called speak that does the same thing as the method inside the class

function speak(words) {
  console.log(`${this.name} says ${words}`);
}

by default the this keyword inside a seperate function will be the window object on the browser environment or a gloabl object on the nodejs environment.
now let's manually set it to the person object so it can log the user name correctly

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(words) {
  console.log(`${this.name} says: ${words}`);
}

const person = new Person("John", 30);

speak.call(person, "Hello"); // John says: Hello

now when we used the call method, this will now refer to the person object passed to the call method (any args that the function accepts can be passed after the this value)

The apply method

the apply method does exactly the same thing as call but the only difference is that the function args will be passed as an array instead of individual args to the apply method

example

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(word1, word2) {
  console.log(`${this.name} says: ${word1} ${word2}`);
}

const person = new Person("John", 30);

speak.apply(person, ["Hello", "World"]); // John says: Hello World

The bind method

the bind also allows you to do the same thing but it won't call the function, instead it will return a new function that uses the specified this keyword

Example

const johnSpeak = speak.bind(person, "Hello World"); // John says: Hello World

johnSpeak(); // John says: Hello World