What Is the (Function() { } )() Construct in JavaScript

What is the (function() { } )() construct in JavaScript?

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created.

It has nothing to do with any event-handler for any events (such as document.onload).

Consider the part within the first pair of parentheses: (function(){})();....it is a regular function expression. Then look at the last pair (function(){})();, this is normally added to an expression to call a function; in this case, our prior expression.

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.

This is why, maybe, you confused this construction with an event-handler for window.onload, because it’s often used as this:

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Correction suggested by Guffa:

The function is executed right after it's created, not after it is parsed. The entire script block is parsed before any code in it is executed. Also, parsing code doesn't automatically mean that it's executed, if for example the IIFE is inside a function then it won't be executed until the function is called.

Update
Since this is a pretty popular topic, it's worth mentioning that IIFE's can also be written with ES6's arrow function (like Gajus has pointed out in a comment) :

((foo) => {
 // do something with foo here foo
})('foo value')

How does the (function() {})() construct work and why do people use it?

With the increasing popularity of JavaScript frameworks, the $ sign was used in many different occasions. So, to alleviate possible clashes, you can use those constructs:

(function ($){
  // Your code using $ here.
})(jQuery);

Specifically, that's an anonymous function declaration which gets executed immediately passing the main jQuery object as parameter. Inside that function, you can use $ to refer to that object, without worrying about other frameworks being in scope as well.

What is it called when a function behaves like a class but doesn't use the class keyword, nor new keyword (in Javascript)?

Question:

What is it called when a function behaves like a class but doesn't use the class keyword, nor “new” keyword (in Javascript)?

Answer:

It's called a "factory function".

Factory functions usually return a object of a consistent type but are not instances of the factory function itself. Returned objects would rarely inherit from the factory function's prototype property, and calling the factory function does not require new before the function being called.

What is this format of function called?

This is a self-invoking function as @lix pointed out.

Function expressions can be made "self-invoking".

A self-invoking expression is invoked (started) automatically, without being called.

Function expressions will execute automatically if the expression is followed by ().

What are ways of intercepting function calls or changing a function's behavior?

Using Proxy we can target all get which includes functions, then we can check if what is being get is a function and if it is we create and return our own function that wraps the object function and call it.

After the object function is called from within our wrapper function we can execute whatever we want and then return the return value of the object function.

const ob = {
  doA(arg1, arg2) {
    console.log(arg1, arg2);
    return 1;
  },
  doB() {
    console.log('b');
  }
};

const ob2 = new Proxy(ob, {
  get: function(oTarget, sKey) {
    if (typeof oTarget[sKey] !== 'function')    return oTarget[sKey];

    return function(...args) {
      const ret = oTarget[sKey].apply(oTarget, args);

      console.log("c");

      return ret;
    }
  }
});

console.log(ob2.doA('aaa', 'bbb'));