Explicit Binding and Pizza.

JavaScript methods .call, .apply, and .bind allow us to immediately invoke a function or return a new function (that we can invoke later) with a specified context.

Getting Started

function orderPizza() {
    console.log(`${this.name} just ordered a pizza!`)
}

const customer = {
    name: "Justin Juno",
    phone: "123-456-7890"
}

We will start with a customer object and an orderPizza function. Since our function isn't a method on our customer object, we will need to help our program understand what this is referring to in our function.

Your first instinct might be to pass our customer object into the orderPizza function, but the name will still return undefined.

Why? Because our function needs context.

This is where .call, .apply, and .bind come into play. For our customer to place an order in our program successfully, we will need to invoke the function using one of the aforementioned methods.

---

Using the .call method

function orderPizza() {
    console.log(`${this.name} just ordered a pizza!`)
}

const customer = {
    name: "Justin Juno",
    phone: "123-456-7890"
}

orderPizza.call(customer)

Like any function or method in JavaScript, we can pass arguments to it. When using .call, .apply, or .bind the first argument is always the context. In other words, what this is referring to in the function we are invoking. In this example, that would be our customer, Justin Juno.

function orderPizza(topOne, topTwo) {
    console.log(`${this.name} just ordered a pizza with: ${topOne} ${topTwo}`)
}

const customer = {
    name: "Justin Juno",
    phone: "123-456-7890"
}

orderPizza.call(customer, 'cheese', 'hamburger')

So what happens, if we need to pass additional arguments to our function, like toppings? We just pass them after our context. The issue is that with .call we have to pass all additional arguments individually.

---

Using the .apply method

function orderPizza(topOne, topTwo) {
    console.log(`${this.name} just ordered a pizza with: ${topOne} ${topTwo}`)
}

const customer = {
    name: "Justin Juno",
    phone: "123-456-7890",
  toppings: ['cheese', 'hamburger']
}

orderPizza.apply(customer, customer.toppings)

This is where .apply comes in. It works just the same as .call, but instead of passing our arguments individually, we can pass them as an array. Making it a much better solution when multiple arguments are needed.

---

Using the .bind method

This brings us to .bind. It also works just the same as .call. However, instead of immediately invoking the function, it returns a new function that we can invoke later. This gives us a lot of flexibility because we can choose when, where, and how we would like to invoke the function.

function orderPizza(topOne, topTwo) {
    console.log(`${this.name} just ordered a pizza with: ${topOne} ${topTwo}`)
}

const customer = {
    name: "Justin Juno",
    phone: "123-456-7890"
}

const futureOrder = orderPizza.bind(customer, 'cheese', 'hamburger')

setTimeout(() => futureOrder(), 1000);

In this example, I've bound our orderPizza function to a new function called futureOrder. Then added a setTimeout function that will invoke our futureOrder function after 1 second.

---

Wrapping Up

I hope these tasty examples of .call, .apply, and .bind satisfied your hunger for knowledge and cheese-y puns. 🍕

If you enjoy pizza and coding as much as I do, follow me on Twitter. Shares, bookmarks, love, etc. is always appreciated.

Thanks for reading! ✌️ ❤️ 💻

---

Photo by Jonas Kakaroto on Unsplash.