Differences Between Nested Javascript Event Function

Question

What are the differences between the following two formats? Only format2 works.

Format1:

function test (e){
    var element = e.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
}
$("#import-excel-id-select").on('select2:select', (e) => {
    test(e);
});

Format2:

$("#import-excel-id-select").on('select2:select', function (e){
    var element = e.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
});

See [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](//stackoverflow.com/a/24900924) & [When should I use Arrow functions in ECMAScript 6?](//stackoverflow.com/q/22939130) — Tushar, Dec 15 '16 at 03:47
You can also use `$("#import-excel-id-select").on('select2:select', test);` — Tushar, Dec 15 '16 at 03:47
Is this complete code? Are you using `this` inside handlers? — Tushar, Dec 15 '16 at 03:48
How does the first one "not work"? Can you post an error message? Consider creating a [Minimal, Complete, Verifiable Example](http://stackoverflow.com/help/mcve). — qxz, Dec 15 '16 at 03:49
As far as what you are actually doing, format 1 is identical in function to format 2 - the fact that you say "it doesn't work but I wont tell you what the error is" means that you've removed code that is important to the question — Jaromanda X, Dec 15 '16 at 03:50
@qxz Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined(…) — dongx, Dec 15 '16 at 03:51
so now you've edited, and we see you use `this` then it's clear that Tushar's first response is what you need to read and understand — Jaromanda X, Dec 15 '16 at 03:52
Also see [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](http://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch), although that's not the most interesting difference between those two. The examples are not identical. You should learn more about `this` to understand why there is a difference between calling a function inside an event handler and using that function as event handler. — Felix Kling, Dec 15 '16 at 03:56

score 3 · Accepted Answer · answered Dec 15 '16 at 03:59

What are the differences between the following two formats? Only format2 works.

There are multiple, but the most important one, the reason why one works and the other doesn't is because the value of this is different in both cases.

In the second example, this refers to the DOM element the function is bound to, because the function is used as event handler.

In the first example you are calling test as test(e) from the event handler. When calling a function this way this either refers to the global object or undefined (when in strict mode). this does not refer to the DOM element, and hence all the jQuery(?) methods fail.

How a function is called matters in JavaScript. See MDN -this for more information.

There is also no reason to have a function that simply calls another function with the same arguments. The first example could be fixed by just passing test:

$("#import-excel-id-select").on('select2:select', test);

score 2 · Answer 2 · answered Dec 15 '16 at 04:33

Format 1 is another way of writing:

$("#import-excel-id-select").on('select2:select', function (e) { test(e); });

But inside function test(), $(this) might not be what you expected.

So, one way to fix it

$("#import-excel-id-select").on('select2:select', function (e) { test.call(this, e); // or test.bind(this)(e); });

And, () => {} only runs on very new browsers with ES6 support.

Differences Between Nested Javascript Event Function

2 Answers2