complete call, apply and bind method section

Author: Evavic44

10-A_Closer_Look_At_Functions/README.md

@@ -246,3 +246,157 @@ greet("Hello")("Caleb");
 ```
 
 # The Call and Apply Method
+
+```js
+const lufthansa = {
+  airline: "Lufthansa",
+  iataCode: "LH",
+  bookings: [],
+  book(flightNum, name) {
+    console.log(
+      `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
+    );
+  },
+};
+
+lufthansa.book(239, "Victor Eke");
+lufthansa.book(424, "Michale Smith");
+```
+
+In the example above, the `this` keyword points to the `lufthansa` object because that is where the book function was called from.
+
+Let's say we have another airline that needs to reuse the `book()` method, hard-coding this will be bad practice so what we can do is store the method in a seperate function(variable).
+
+```js
+const eurowings = {
+  airline: "Eurowings",
+  iataCode: "EW",
+  bookings: [],
+};
+
+const book = lufthansa.book;
+// book(23, "Sarah Williams"); // Calling the function this way wont work.
+```
+
+We've stored the method inside a variable which is typically different from the method inside the lufthansa object, but in order to use this method on another object, we need to use the call method because the `this` points to the global scope which is undefined at this point. I.e It is no longer a method since we copied it and stored it into the book variable.
+
+So how do we execute this function on either the `eurowings` object or `lufthansa` object? We need to explictly tell JavaScript what object we want it point to.
+
+And to do that, there are three fuction methods we can use: `call()`, `bind()`, and `apply()`.
+
+By using the `call()` method, we can pass in values we want to replace the `this` keyword with.
+
+### Call Method
+
+The call() method calls the function with a given this value and arguments provided individually.
+
+```js
+book.call(eurowings, 23, "Sarah Williams");
+console.log(eurowings);
+book.call(lufthansa, 239, "Mary Slessor");
+console.log(lufthansa);
+```
+
+First we define the object we want to run the method with, then we add the other arguments.
+
+```js
+const swiss = {
+  airline: "Swiss Air Lines",
+  iataCode: "LX",
+  bookings: [],
+};
+
+book.call(swiss, 583, "Ben Shapiro");
+console.log(swiss);
+```
+
+### Apply Method
+
+This is similar to the `call()` method except the given arguments are provided as an array.
+
+```js
+const fligthData = [135, "Bradley Cooper"];
+book.apply(swiss, fligthData);
+```
+
+Although the `apply()` method is not really used in JavaScript that much, we can keep using the call method and inject any array using the spread operator.
+
+```js
+const fligthData = [135, "Bradley Cooper"];
+book.call(swiss, ...fligthData);
+```
+
+# The Bind Method
+
+Just like the call method, the `bind()` method also allows us to manually set the `this` keyword for any function call. The difference is that bind does not immediately call the function, instead it returns a new function where the `this` keyword is bound.
+
+```js
+const bookEW = book.bind(eurowings);
+const bookLH = book.bind(eurowings);
+const bookLX = book.bind(swiss);
+bookEW(23, "Steven Seagal");
+// ...
+```
+
+Here we don't have to define the this keyword, just simply pass in the value we want to update.
+
+Similar to the call method, we can also pass in multiple values to the bind method and a good use case is to add another argument to the function.
+
+```js
+const bookEW23 = book.bind(eurowings, 3422);
+bookEW23("Victor Eke");
+bookEW23("Martha Kent");
+```
+
+This allows us to set in stone certain arguments. This method of setting argumets beforehand is what we call partial application, and what this means in simple terms is that a part of an argument of an original function is already applied.
+
+A good use-case of the bind method is when we use objects with Event Listeners
+
+### Bind with Event Listeners
+
+```js
+lufthansa.planes = 300;
+lufthansa.buyPlane = function () {
+  console.log(this);
+
+  this.planes++;
+  console.log(this.plane);
+};
+
+document.querySelector(".buy").addEventListener("click", lufthansa.buyPlane);
+```
+
+This above example shows `NaN` because the handler function `lufthansa.buyPlane` is attached to the higher order function which is the `(".buy").addEventListener`, and since we know that the `this` keyword will point to the higher order function in which it was called, the this keyword in this case will be the button element.
+
+With the `bind` method, we can explicitly change the `this` keyword to point to the `lufthansa` object.
+
+```js
+document
+  .querySelector(".buy")
+  .addEventListener("click", lufthansa.buyPlane.bind(lufthansa));
+```
+
+### Partial Application
+
+We can also prefill default values into functions with the bind method.
+
+```js
+const addTax = (rate, value) => value + value * rate;
+console.log(addTax(0.1, 200));
+
+const addVAT = addTax.bind(null, 0.23);
+// addTax = value => value + value * 0.23;
+
+console.log(addVAT(100));
+console.log(addVAT(23));
+```
+
+Here we set the rate parameter of the `addTax` function to `0.23` and stored it in another function called `addVAT`. Now when we call the `addVAT` function, it will always contain the value of `0.23`
+
+This may look similar to setting default values in function like so:
+
+```js
+const addTask = (rate = 0.23, value) => value + value * rate;
+```
+
+But the difference is that the bind method allows us to create a completely different function we can work with.

10-A_Closer_Look_At_Functions/script.js

@@ -121,3 +121,99 @@ gretterHey("Ben");
 greet("Hello")("Caleb");
 
 // 🔸 The Call and Apply Method 🔸
+const lufthansa = {
+  airline: "Lufthansa",
+  iataCode: "LH",
+  bookings: [],
+  book(flightNum, name) {
+    console.log(
+      `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
+    );
+    this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
+  },
+};
+
+lufthansa.book(239, "Victor Eke");
+lufthansa.book(424, "Michale Smith");
+
+const eurowings = {
+  airline: "Eurowings",
+  iataCode: "EW",
+  bookings: [],
+};
+
+const book = lufthansa.book;
+// Does not work
+// book(23, "Sarah Williams");
+
+// Call Method
+book.call(eurowings, 23, "Sarah Williams");
+console.log(eurowings);
+book.call(lufthansa, 239, "Mary Slessor");
+console.log(lufthansa);
+
+const swiss = {
+  airline: "Swiss Air Lines",
+  iataCode: "LX",
+  bookings: [],
+};
+
+book.call(swiss, 583, "Ben Shapiro");
+console.log(swiss);
+
+// Apply Method
+
+const flightData = [135, "Bradley Cooper"];
+// Apply method with arrays
+book.apply(swiss, flightData);
+// Call method with arrays
+book.call(swiss, ...flightData);
+
+// 🔸 The Bind Method 🔸
+// book.call(eurowings, 23, 'Sarah Williams');
+
+const bookEW = book.bind(eurowings);
+const bookLH = book.bind(lufthansa);
+const bookLX = book.bind(swiss);
+bookEW(23, "Steven Williams");
+bookLH(100, "Bob Proctor");
+bookLX(342, "James Bond");
+
+const bookEW23 = book.bind(eurowings, 23);
+bookEW23("Victor Eke");
+bookEW23("Paula Cole");
+
+// Bind with Event Listeners
+lufthansa.planes = 300;
+lufthansa.buyPlane = function () {
+  console.log(this);
+
+  this.planes++;
+  console.log(this.planes);
+};
+// lufthansa.buyPlane();
+
+document
+  .querySelector(".buy")
+  .addEventListener("click", lufthansa.buyPlane.bind(lufthansa));
+
+// Partial Application
+const addTax = (rate, value) => value + value * rate;
+console.log(addTax(0.1, 200));
+
+const addVAT = addTax.bind(null, 0.23);
+// addTax = value => value + value * 0.23;
+
+console.log(addVAT(100));
+console.log(addVAT(23));
+
+// Practice Exercise
+const addTaxRate = function (rate) {
+  return function (value) {
+    return value + value * rate;
+  };
+};
+
+const addVat2 = addTaxRate(0.23);
+console.log(addVat2(100));
+console.log(addVat2(23));