How to use the "this" keyword in Javascript

This-in-JavaScript.md

this in JavaScript 📝

"this" allows us as the developer to use an objects context when calling a function. You can choose which object you would like to call a function with, even if that object does not have the function as one of it's properties.

Example: If there is one common function you have, like sayHello you want that function to work with many objects that have similar properties.

var personOne = {
	name: "Bob",
	age: 35,
	function sayHello() {
		return "Hello " + this.name;
	}
}

var personTwo= {
	name: "Jane",
	age: 28,
	function sayHello() {
		return "Hello " + this.name;
	}
}

Using "this"

There are 4 ways to use "This" in javascript, i'm going to explain the first two types, Implicit and Explicit binding

1. Implicit Binding
2. Explicit Binding
3. New Binding
4. Window Binding

When trying to figure out what "this" is in any context ask yourself...

⭐ Where is this function invoked?

1. Implicit Binding

• Most commonly used
• Left of the dot rule
• When you are calling a method on a object, look to the left of the dot and that will be "this".
• EX: me.sayName();
• me is this

var personOne = {
	name: "Bob",
	age: 35,
	function sayHello() {
		return "Hello " + this.name;
	}
}

personOne.sayHello(); // Hello Bob

2. Explicit Binding

• Explicit binding allows you to "Explicitly" set the "this" operator.
• Call, apply and bind are the three methods you can use

Call - will set an objects context (this) to a given function.

In other words, you can "explicitly" set the object and parameters you want to use to call the function with. See below

sayHello.call(obj, arg1, arg2, arg3)

I'm using a method called sayHello calling the call method on it and passing the obj object and three arguments arg1, arg2, and arg3. Note with call you need to pass additional arguments individually.

In the example that follows, since the me object doesn't have a function sayName as a property we cannot just use implicit binding me.sayName() we need to use the sayName's call method. every object has a call method on it.

function sayName(food1, food2, food3){
    console.log("Hello my name is "+ this.name+ " and I like "+ food1 + ", "+food2+" , and "+ food3);
};


var me = {
  name: "Jeremy",
  age: 24
}

var foods = ["pizza", "ice cream", "donuts"];

sayName.call(me, foods[0], foods[1], foods[2]) // Hello my name is Jeremy and I like pizza, ice cream , and donuts

Apply - is the same as call only you can just pass an array of arguments instead of individually

sayHello.apply(obj, args)

Where args is an array for example: var args = [1,2,3];

function sayName(food1, food2, food3){
    console.log("Hello my name is "+ this.name+ " and I like "+ food1 + ", "+food2+" , and "+ food3);
};


var me = {
  name: "Jeremy",
  age: 24
}

var foods = ["pizza", "ice cream", "donuts"];

sayName.apply(me, foods) // Hello my name is Jeremy and I like pizza, ice cream , and donuts
		

Bind - is similar to Call only it will NOT invoke the function right away. It will create a new function you can invoke later.

Below I'm saving the resulting function in the variable "newFunc"

function sayName(food1, food2, food3){
  console.log("Hello my name is "+ this.name+ " and I like "+ food1 + ", "+food2+" , and "+ food3);
};


var me = {
  name: "Jeremy",
  age: 24
}

var foods = ["pizza", "ice cream", "donuts"];

var newSayName = sayName.bind(me, foods);

newSayName();  //Hello my name is Jeremy and I like pizza, ice cream , and donuts