What Does This JQuery Code Doing - !function($) and var = var => var =>

Question

Here is a section of relevant code:

!function($){
    const figure = name => f => $(`<figure data-name="${name}"><img src="${URL.createObjectURL(f)}"><figcaption><input type=checkbox checked><br>${f.name}</figcaption></figure>`).data("f",f);

 $(document).on("change", "[data-preview-to]", function() {
        $($(this).data("preview-to")).append($.map(this.files, figure(this.name)));
        $(this).replaceWith(this.outerHTML);
***OTHER CODE FOR SUBMIT****
 }(jQuery);

HTML
 <input type="file" data-preview-to="#preview" multiple="" name="fileToUpload[]">

First question, the "!function($)", to me this says, I am not a function, since "!" is NOT, but that cannot be it since why would you declare a function, that is not a function, then I thought well, it could be saying "do this, even if the document is not ready" since (I think) function($), is the document ready shorthand.

However, the function ending, has a (jquery), which is needed, if I remove that, the code fails, so this must be doing something, that is not fully JQuery.

Second Question, is the variable "figure", the way I read it, and make no sense is "declare figure as a constant, take the value of name, push it into f then push all of it into the HTML code. However, I do not see how "f", gets assigned. I know it is coming from the "$.map(this.files, figure(this.name))", but it looks like the only thing that is getting sent to figure is the name (fileToUpload[]) of the HTML input tag.

What is this code saying and doing?

Thanks,

Dave

score 2 · Accepted Answer · edited May 23 '17 at 12:00

The first is just an inline-invoked function expression. The ! is there to shift the parser from expecting a statement to expecting an expression, so that function starts a function expression rather than function declaration (which is why we can call it immediately). Details on that in this question's answers. jQuery is passed in by using () after the end of the function, and received as the $ parameter.

figure is an ES2015+ (aka "ES6") arrow function (specifically, an arrow function returning an arrow function, which contains a template literal [the thing in backticks with ${...} in it]). In this case, since this particular function doesn't use this or arguments or a couple of other things, it's roughly equivalent to this ES5 and earlier code:

var figure = function(name) {
    return function(f) {
        return $('<figure data-name="' + name + '"><img src="' + URL.createObjectURL(f)' + "><figcaption><input type=checkbox checked><br>' + f.name + '</figcaption></figure>').data("f",f);
    };
};

Looks like I have some homework. Was reading about all that stuff, this may be a little advanced, yet for me, so this is going to hurt the head a bit. — MaxThrust, Feb 23 '17 at 17:21

Firanolfind · Answer 2 · 2017-02-23T17:39:13.740

!function(){}()

!function(){}(argument); means instantly calling created function.

Function declaration function(){} returns undefined. If we try to instant call this function

function () {} ()

It will throw SyntaxError. By using ! operator before the function, js understands it as an expression and runs function successfully

!function () {} ()

=> Arrow functions

const figure = name => f => $()

// is equal to 
const figure = function(name){
   return function(f){
       return $();
   }
}

Arrow functions allows to write short code. Arrow functions consists of argument head and body like in normal functions.

(arg1, arg2) => {
    return 4;
}

No more need to write function. Arguments are passed by standard way, with brackets like this (arg1, arg2) => {}, or if there is only one argument - there can be only argument arg => {}.

Code in body can be usual "block body", like in normal functions. If there is only one - return expression, function may have "concise body"

(arg1, arg2) => return 4;

So, if you have only one argument and one body expression, arrow function may take short but unusual form

var sqr = x => x*x;

// equal to
var sqr = function(x){
    return x*x;
}

What Does This JQuery Code Doing - !function($) and var = var => var =>

2 Answers2