See the Pen JS cannot eta reduce by Siddharth (@bollu) on CodePen.

The Example:

Let’s create an object which has a value that we are interested in printing out. The object listener has a value that it writes out to the DOM.

var listener = {
  click: function() {
    document.getElementById("value").innerHTML = this.value;
  },
  value: 3.1415,
};

Now, let’s attach the click method to the button, which wraps the listener.click() in a function call.

document.getElementById("non-eta-reduced").onclick = function() {
    listener.click();
  };

However, this looks like something that can be eta-reduced! After all, if all we’re doing is wrapping a function call listener.click() with another function, we should be able to replace this with just listener.click?

Let’s try that:

document.getElementById("eta-reduced").onclick = listener.click;

however, if you click the eta-reduced button, no value is displayed. What gives?

JavaScript and this

when you attach any event listener to a DOM node, the this gets bound to the DOM node.

So, in the eta-reduced case, the this.value refers to the button’s DOM node’s value. Hence, this.value is undefined!

I found this weird at first glance, but once you understand how this works in javaScript, I suppose that it is straightforward enough. I wish there was a way to be more explicit about where this comes from and goes. I’d love to hear people’s thoughts and experiences when it comes to teaching something like this to a newbie.

Back to posts