What is the reason for var $this = this

I'm not the best at jquery and I came across a var initialization that I don't know why the person who wrote the code did it this way.

In the init for a plugin, we have

this.init = function(settings) {
    var $this = this;
    this.s = {
        initialSlide: 0,
        firstSlide: true,
    };
   ... more code, some uses $this, some uses "this"
}

So what is the difference here between "$this" and "this" and why not use one or the other all the time?

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
    });
};

In this case, nothing. $this is just another variable declaration which has this assigned to it.

Typically, I've seen this shortcut used by people using JavaScript libraries when wrapping this. For example, typical usage in jQuery would be:

// rather than writing $(this) everywhere
var $this = $(this);

$this.each(function(){
    // Do Something
});

In actuality jQuery is a wrapper around the JavaScript DOM, both enhancing and simplifying it. Very briefly JQuery selectors return JQuery Object/s i.e.

var jQueryResults = $("article"); //Contains all article elements in the DOM as JQuery objects

However, selecting elements with Javascript returns HTML DOM elements i.e.

var normalResults = document.getElementsByTagName("article");//Contains all article elements in the DOM as HTML objects

The issues arise in that DOM objects do not provide the same functionality that JQuery objects provide.

Here is an event example which illustrates the difference:

$('.changeColorHover').hover(function() {
    this.attr("style", "color:red");
}); //Will not work as we are trying to call a JQuery method on a DOM object

With the above mentioned in mind the 'this' keyword is a DOM object and thus you are required to convert it to a jQuery object in order to utilise jQuery methods.

 $('.changeColorHover').hover(function() {
        $(this).attr("style", "color:red");
 }); //Will work since we have first converted the DOM object to a JQuery object

To sum up, the this keyword, allows you to access the object that called the event as this will give a reference to the object that raised the event. But, this is a DOM object, not a jQuery object. As a result, any of the jQuery methods you'd like to use aren't available, unless you convert it to a jQuery object.

It means nothing in this case (no pun intended). It would be more logical if the statement was var $this = $(this) since that would allow for all the nice jQuery functionality to be used.

What everyone else said, also there is an idiom in jquery code to prefix jquery objects with $. don't know how popular it is any more, but used to see a lot of it.

I do $this = $(this) because it seems that it would save the actual processing of that call every single time you want to use it.

Also, for the 'magic 'this'' function that someone else mentioned. It is handy to keep the original copy around.