whatIs.bind(this)?

I have to admit something. When I first started learning javascript it skipped over a bit of the basics. I started writing most of my first functions as es6 arrow functions instead of regular named functions. Why you my ask? Because the implied return and because I thought they looked cool hahaha.

const sayHey = (name) => `Hey $(name)!`

would basically be the same as

function sayHey(name) {
   return `Hey ${name}!`
}

both would be invoked like this

console.log(sayHey('Sara'))

and would return

Hey Sara!

Nice right? But what I didn’t realize if how much more there was to them when it comes to this and the problems that I would have faced if was using regular named functions.

With arrow functions the this will always represent the object that defined the arrow function. With regular named functions this represents the object that called the function. Which means this could be the document, the window, or even a button. In short it means that when using the this keyword it associates this with the scope that the arrow function was declared in.

Lucky for me this saved a lot of heartache without even knowing it! Here is a little example I made in replit. I made a class called Dog and dogs have a name and a talk method. There is a function called findMe() that when you click the “find out” button it will log in the console what this is representing.

First up: arrow function.

As you can see with an arrow function this is exactly what we want to see! In this case this is:

Dog { findMe: [Function], name: 'Peppers', talk: 'Im a BEAST!' }

Next up: regular named function

Here is the problem. Now on when you click the “find out” button this is:

HTMLButtonElement {}

This could get very frustrating, but luckily if you don’t want to write arrow functions there is a way around this, which is by using bind().

Lastly: bound regular named function

document.getElementById(“btn”).addEventListener(“click”, findMe.bind(this));

As you can see now the findMe() function is now console logging this as:

Dog { findMe: [Function], name: 'Peppers', talk: 'Im a BEAST!' }

and not as the button where it was called. All you need to do is use the bind method where the function is being used and pass in the argument this. In this case it was in the click event listener. It is binding this back to the object peppers!

In the end there are pros and cons of writing functions in both ways. So in the end you will be writing both. Unfortunately you cant give arrow functions properties like you can with named functions, so when writing class constructors you will be using regular functions. But when it comes to this I’m sticking with my arrows!