What does 'var that = this;' mean in JavaScript?

Question

In a JavaScript file I saw:

function Somefunction(){    var that = this;     ...  } 

What is the purpose of declaring that and assigning this this to it?

Answer 1

I'm going to begin this answer with an illustration:

var colours = ['red', 'green', 'blue']; document.getElementById('element').addEventListener('click', function() {     // this is a reference to the element clicked on      var that = this;      colours.forEach(function() {         // this is undefined         // that is a reference to the element clicked on     }); }); 

My answer originally demonstrated this with jQuery, which is only very slightly different:

$('#element').click(function(){     // this is a reference to the element clicked on      var that = this;      $('.elements').each(function(){         // this is a reference to the current element in the loop         // that is still a reference to the element clicked on     }); }); 

Because this frequently changes when you change the scope by calling a new function, you can't access the original value by using it. Aliasing it to that allows you still to access the original value of this.

Personally, I dislike the use of that as the alias. It is rarely obvious what it is referring to, especially if the functions are longer than a couple of lines. I always use a more descriptive alias. In my examples above, I'd probably use clickedEl.