What is this javascript function doing?

Question

This is an excerpt of code written by a former contractor that I need to modify. I am lost in the ({function (e)}) and closures.

The code makes an http request to a validation server and returns a token that sets a member variable of the myPlugin object (r = e). The function then dynamically loads foobar.js into a new script tag appended to the head tag. The code in foobar.js references the getter functions of the myPlugin object.

I simply need to remove the http request and callback and pass a parameter to set the value of r and append the new script tag to the head tag.

Every time I try to modify the loadPluginJsFn function I get errors.

Can anyone explain what the loadPluginJsFn function is doing and what is the purpose of the "(myPlugin);"at the end of foobar.js and the () at the end of the myPlugin object?

HTML file

var myPlugin = (function() {
  var t, n, r, o_value ;
  return {
    set somevalue(e) {
      o_value = e;
    },
    get somevalue() {
      return o_value;
    },
    init(config){

    },
// This is where I don't understand what it happening
    loadPluginJsFn: function(e) {
      "function" == typeof e &&
        e(function(e) {
          e &&
            ((r = e),
            (function(e) {
              var t = document.createElement("script");
              (t.type = "text/javascript"),
                (t.src = e),
                document.querySelector("head").appendChild(t);
            })(
              "js/foobar.js"
            ));
        });
    }
  };
})();

myPlugin.loadPluginJsFn(function(callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.open("GET", "<some domain>", true);
});

foobar.js

(function (my_Plugin) {

    const somevars = 'xxx';
    var   someMoreVars = '123'

  function somefunctions(useDefaults = false) {
    return somethingImportant;
  }

})(myPlugin);

Answer 1

Here's a translation of that function into more readable code:

loadPluginJsFn: function(cb) {
  if (typeof cb == "function") {
    cb(function(response) {
      if (response) {
        r = response;
        // Load the script from foobar.js
        var url = "js/foobar.js";
        var t = document.createElement("script");
        t.type = "text/javascript";
        t.src = url;
        document.querySelector("head").appendChild(t);
      }
    });
  }
}

cb will be the function that performs the AJAX request to <some domain> . When the response is received, it then calls function(response) . This sets the plugin variable r to the response, then loads the js/foobar.js script.

foobar.js then executes code that makes use of the MyPlugin object (I assume you elided those details), and that code presumably uses r .

Summarizing: this gets a value from <some domain> using AJAX, puts that into the r variable in MyPlugin , then runs code that uses the plugin.

Answer 2

Turns out it is much easier to remove code than add it. Thanks to @cucaracho and @barmar for the critical insights. Here's the solution I came up with.

I don't need the AJAX call anymore - that is what I'm trying to remove. Removing the callback from the loadPluginJsFn was proving to be the challenge. I cleaned house and verified that it still functioned properly.

loadPluginJsFn(token) {
      r = token,      
      doc = document.createElement("script");
      doc.type = "text/javascript";
      doc.src = "js/foobar.js";
      document.querySelector("head").appendChild(doc);
}