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) (orundefined
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
orapply
,this
is specified as the first argument tocall
orapply
. - 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 theprototype
property of the constructor function. - If the function is the result of a
bind
operation, the function will always and forever havethis
set to the first argument of thebind
call that produced it. (This is the single exception to the "functions don't have a fixedthis
" rule -- functions produced bybind
actually do have an immutablethis
.)
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:
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 returnsundefined
.The
void
operator is often used merely
to obtain theundefined
primitive
value, usually using “void(0)
” (which
is equivalent to “void 0
”). In these
cases, the global variableundefined
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
How to Add Number of Days to Today'S Date
JavaScript Inheritance and the Constructor Property
How to Import Variables from JavaScript to SASS or Vice Versa
Change CSS Properties on Click
Disable Images in Selenium Python
Rails 4: Disable Turbolinks in a Specific Page
Data-Toggle Tab Does Not Download Leaflet Map
Is It Spread "Syntax" or the Spread "Operator"
How to Deep Clone in JavaScript
Merge Two Array of Objects Based on a Key
How to Run Multiple Npm Scripts in Parallel
Get the Scale Value of an Element
Jquery: How to Check If the Element Has Certain CSS Class/Style