Ways to improve JS code?

Question

JavaScript

Reading this article: habrahabr.ru/post/235943 came across

The template starts with the !function($) { … }($) module, which puts the global jQuery variable in local scope - this will help reduce overhead and prevent conflicts with other libraries.

Here's what's interesting:

• Why is there a "!" before the function? ? For beauty?
  
• Does accessing local variables really produce less overhead? And is it worth putting document, window, etc. in a closure for the same reason, or is it only about functions?
  
• What other ways are there to improve the code like this? In terms of load, speed?
  

Answer 1

Signs ! , - , + make the interpreter evaluate (in this case, execute) what is on the right. For example, Bootstrap has a + sign inserted everywhere for this.
However, it would be more correct to rewrite the code like this:

(function ($){
    "use strict";
    
}(this.jQuery));

This is also a self-invoking function template, described in Stoyan Stefanov's book "JavaScript. Templates" (I strongly recommend reading it despite the advanced age for literature of this type, you know where to get it).
Accessing local variables saves you from headaches and long debugging, when it is not clear why clicking on this button not only updates the list of table records, but also increases the font size in the page header. Global variables are evil and must be combated. Only closures, only hardcore.
As for speed, compared to redrawing the DOM, any of your code will be lightning fast. And yes, accessing global variables is more expensive than accessing local variables. first, a search is made in the local scope, and only then - to the global one.
documentand window may or may not be placed - the only difference is that short names can be used:

(function (W, D){ 
    // W = window   (1 символ против 6)
    // D = document (1 символ против 8)
    "use strict";

}(window, document));

Everything else in that book and of course Nicholas Zakas, "JavaScript. Optimization Produces... .

Answer 2

Maxim Dunayevsky with brackets is not more correct, but a little more readable.
If we talk about correctness, then with respect to void void function(i) {console.log(i)}(10);
Variables in closures in terms of debugging are even worse than global variables, and local ones are really faster than both.
Now it’s worth focusing not on the five-year-old ES3 tricks, but on modern tools like browserify / webpack with bebel and debug beautiful ES2015 / ES2016 in the browser using sourcemaps.

Answer 3

This is a function expression, because only them can be called at once.
This will cause an error - Syntax error

function () {
  
}();