Siddharth Bhat

A weblog of sorts

github linkedin email rss
JavaScript cannot Eta-Reduce
Apr 9, 2017
2 minutes read

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 in a function call.

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

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

Let’s try that:

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

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

comments powered by Disqus