Anonymous Functions and Immediately Invoked Function Expressions

An anonymous function refers to a function without a name, which means defining a function object without naming the function body. However, the anonymous function must be assigned certain operations as an expression, such as assigning it as a variable value or making it self-executing, otherwise this definition will be meaningless, and the interpreter will throw an exception.

Anonymous Function

/**
 * Define function - Declaration
 * The declaration will cause function hoisting, where the function is prioritized by the interpreter for compilation. In other words, when we write functions declaratively, they can be declared anywhere and will not affect their invocation.
 */
 function s(){
     console.log(1);
 }

/**
 * Define anonymous function - Function expression
 * The function expression using 'function' will not cause function hoisting (but the assigned variable will be hoisted). It will be interpreted line by line by the JS interpreter, and the function expression will only be assigned at this point. Therefore, if the call is made before the function expression, it will fail.
 */
 var s = function(){
     console.log(1);
 }

// > Original: <https://wiki-power.com/>

Calling s() in the above-defined way makes no difference, but when a function is defined, there is a function body hoisting, while when defining an anonymous function, only the variable definition is hoisted and the assignment part is not.

Immediately Invoked Function Expressions (IIFE)

Self-execution means combining function definition and creation into one, which is called immediately invoked function expression (IIFE).

(function() { 
    console.log(1); 
})(); // 1

The first set of parentheses around the function returns an anonymous function, and the following set of parentheses calls it. This approach can narrow the scope. Before ES6, JS only had global and function scope. Obviously, giving all variables to the global scope is not appropriate. Also, defining, calling, and then destroying a function requires three steps. Using a self-executing anonymous function can complete the above three steps in one go.

/**
 * Some ways to carry out self-execution 
 * As long as the anonymous function can appear as an expression and followed by (), it can be self-executing
 */
 
// This is often used to build a sandbox mode
(function () { 
    console.log(1);
 }());
 
// Common way - passing arguments
(function (i) { 
    console.log(i);
 })(1);
  
// Due to the parentheses () and JS's &&, ||, ^, comma and other operators have no ambiguity in function expressions and function declarations
// So once the parser knows that one of them is an expression, the others default to being expressions
var i = function () { 
   console.log(1);
}();

true && function () { 
    console.log(1); 
}();

false || function () { 
    console.log(1); 
}();

0, function () { 
    console.log(1); 
}();  
  
// If you don't care about the return value, or aren't afraid of difficulty in reading
// You can even add a unary operator in front of the function 
!function () { 
    console.log(1); 
}();  

~function () { 
    console.log(1); 
}();  

-function () { 
    console.log(1);
}();  

+function () { 
    console.log(1); 
}();  
  
// Using the new keyword
new function () { 
    console.log(1);
}  
new function (i) { 
    console.log(i);
}(1);

Daily Question

https://github.com/WindrunnerMax/EveryDay