What are some good ways to use JavaScript to do anonymous functions yourself?

Question

I understand that I am performing an anonymous function, but it is difficult for me to understand where I will use them and why. This may be due to the fact that I often use jQuery. Could you give some examples of good use cases?

Answer 1

In principle, a self-signed anonymous function (more technically referred to as an IIFE expression or a function call immediately called) matches the declaration of a named function, and then immediately calls it. The only difference from IIFE is that it does not have a name, so it can only be done locally (not called from another location) and therefore not added to the current namespace.

Thus, you can use it at any time when a bunch of code inside the function will be useful and when this code will ever need to be called in the current specific context.

In some places where it is usually:

• In any kind of loop, which includes some local variables and some asynchronous operations (ajax, timeout, etc.), where you want to access these local variables separately for each iteration of the loop in the asynchronous completion function.

• To encapsulate some top-level code that runs once with its own scope and its own local variables, which are private and separate from the global namespace.

• To create unlimited scope for any reason.

Examples:

Loop index (freezes the loop index separately for each setTimeout() call):

 for (var i = 0; i < max; i++) { // capture the loop index into in a closure (function(index) { setTimeout(function() { console.log(index); }, 2000); })(i); } 

Encapsulating the top level of the code (creates a private but constant variable that is not in the global scope):

 (function() { var cntr = 0; window.getUniqueId = function() { return ++cntr; }; })(); 

Create locally accessible shortcuts in your code that would otherwise be a top-level area.

 function Dictionary(initialData) { // call parent constructor Set.apply(this, arguments); } (function() { // inherit from Set var proto = Dictionary.prototype = new Set(); var base = Set.prototype; // Set constructor back to us proto.constructor = Dictionary; // override of the base class .add() // add(key, value) // add(Dictionary) // add({key1: value1, key2: value2}) proto.add = function(arg1, arg2) { if (arg1 instanceof Set) { // call base class to just add another Set base.add.call(this, arg1); } else if (typeof arg1 === "object") { // cycle through the object and add all properties/values to the Set for (var prop in arg1) { if (arg1.hasOwnProperty(prop)) { this._add(prop, arg1[prop]); } } } else if (typeof arg2 !== "undefined") { // must be add(key, value) this._add(arg1, arg2); } return this; } proto.get = function(key) { return this.data[key]; } // See rest of code here: https://github.com/jfriend00/Javascript-Set/blob/master/dictionary.js })(); 

Answer 2

What do you mean, this is IIFE .

It is used in several common ways:

• This is self-sufficient, and any declared variable in IIFE will not pollute the global space. Example: (function() { var foo = 123; $(".pop-up-trigger").click(function() { // ... }); }());

• To create "private variables" in JavaScript. By declaring some local variables and then returning some functions, these functions can access these local variables (assign them or get values). Outside of IIFE, no code can touch these local variables, and therefore they are private.

• To create a scope. JavaScript does not have a block region, but it has only a function region, therefore, having a function and calling it creates a new region.