What Does 'Var That = This;' Mean in JavaScript

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

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.

What does var mean in Javascript?

var is used to declare the variable in javascript.

var msg=""; means you declared the variable msg which is empty and same with the focusname.

For more info about var

Understanding Javascript scope with var that = this

The most important thing to understand is that a function object does not have a fixed this value -- the value of this changes depending on how the function is called. We say that a function is invoked with some a particular this value -- the this value is determined at invocation time, not definition time.

  • If the function is called as a "raw" function (e.g., just do someFunc()), this will be the global object (window in a browser) (or undefined if the function runs in strict mode).
  • If it is called as a method on an object, this will be the calling object.
  • If you call a function with call or apply, this is specified as the first argument to call or apply.
  • If it is called as an event listener (as it is here), this will be the element that is the target of the event.
  • If it is called as a constructor with new, this will be a newly-created object whose prototype is set to the prototype property of the constructor function.
  • If the function is the result of a bind operation, the function will always and forever have this set to the first argument of the bind call that produced it. (This is the single exception to the "functions don't have a fixed this" rule -- functions produced by bind actually do have an immutable this.)

Using var that = this; is a way to store the this value at function definition time (rather than function execution time, when this could be anything, depending on how the function was invoked). The solution here is to store the outer value of this in a variable (traditionally called that or self) which is included in the scope of the newly-defined function, because newly-defined functions have access to variables defined in their outer scope.

What is the difference between var x=10 and x=10 when typed in browser console?

You are in browser console, so you are alerady in global scope, and with or without var make no difference on how the variable was stored:

Prove

However, = is a operator which returns the value you assigned, so a = 1 will evaluate to 1, and you see a 2 when you typed b = 2. var don't return anything, it is a statement not an expression.

in javascript why use var that = this

because in the inner function this will not be the same object as in the outer, so by aliasing it to that you can make sure you are talking to the same object.

What does javascript:void(0) mean?

The void operator evaluates the given
expression and then returns undefined.

The void operator is often used merely
to obtain the undefined primitive
value, usually using “void(0)” (which
is equivalent to “void 0”). In these
cases, the global variable undefined
can be used instead (assuming it has
not been assigned to a non-default
value).

An explanation is provided here: void operator.

The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just a short and simple script that evaluates to undefined.

What does [object Object] mean?

The default conversion from an object to string is "[object Object]".

As you are dealing with jQuery objects, you might want to do

alert(whichIsVisible()[0].id);

to print the element's ID.

As mentioned in the comments, you should use the tools included in browsers like Firefox or Chrome to introspect objects by doing console.log(whichIsVisible()) instead of alert.

Sidenote: IDs should not start with digits.

What does this mean in JavaScript: var controller = controller || {};

To avoid confusion, I will use different variable names:

var controller = cont || {};

This expression will check the value of cont and if it is undefined, it will assign {} or an empty object to controller. If cont has a value, controller will be assigned that value.

What is the reason for var $this = this

Generally, this means a copy of this. The thing about this is that it changes within each function. Storing it this way, however, keeps $this from changing whereas this does change.

jQuery heavily uses the magic this value.

Consider this code, where you might need something like you are seeing:

$.fn.doSomethingWithElements = function() {
var $this = this;

this.each(function() {
// `this` refers to each element and differs each time this function
// is called
//
// `$this` refers to old `this`, i.e. the set of elements, and will be
// the same each time this function is called
});
};


Related Topics



Leave a reply



Submit