¿Qué es la construcción (function () {}) () en JavaScript?

Solía ​​saber lo que esto significaba, pero ahora estoy luchando ...

¿Es esto básicamente diciendo document.onload?

(function () {

})();

Es una expresión de función invocada inmediatamente , o IIFE para abreviar. Se ejecuta inmediatamente después de su creación.

No tiene nada que ver con ningún controlador de eventos para ningún evento (como document.onload).
Considere la parte dentro del primer par de paréntesis: .... es una expresión de función regular. Luego mire el último par , esto normalmente se agrega a una expresión para llamar a una función; en este caso, nuestra expresión previa.(function(){})();(function(){})();

Este patrón se usa a menudo cuando se intenta evitar contaminar el espacio de nombres global, porque todas las variables utilizadas dentro del IIFE (como en cualquier otra función normal ) no son visibles fuera de su alcance.
Esta es la razón por la que, tal vez, confundió esta construcción con un controlador de eventos para window.onload, porque a menudo se usa así:

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

Corrección sugerida por Guffa :

La función se ejecuta inmediatamente después de que se crea, no después de analizarla. El bloque de script completo se analiza antes de que se ejecute cualquier código que contenga. Además, analizar el código no significa automáticamente que se ejecute, si, por ejemplo, el IIFE está dentro de una función, no se ejecutará hasta que se llame a la función.

Actualización Dado que este es un tema bastante popular, vale la pena mencionar que los IIFE también se pueden escribir con la función de flecha de ES6 (como Gajus ha señalado en un comentario ):

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

Es solo una función anónima que se ejecuta inmediatamente después de su creación.

Es como si lo asignara a una variable y lo usara inmediatamente después, solo que sin la variable:

var f = function () {
};
f();

En jQuery hay una construcción similar en la que podría estar pensando:

$(function(){
});

Esa es la forma corta de vincular el readyevento:

$(document).ready(function(){
});

Pero las dos construcciones anteriores no son IIFE .

Una expresión de función invocada inmediatamente (IIFE) llama inmediatamente a una función. Esto simplemente significa que la función se ejecuta inmediatamente después de completar la definición.

Tres expresiones más comunes:

// Crockford's preference - parens on the inside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
}());

//The OPs example, parentheses on the outside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
  console.log('Welcome to the Internet. Please follow me.');
}();

Si no hay requisitos especiales para su valor de retorno, podemos escribir:

!function(){}();  // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}();  // => NaN

Alternativamente, puede ser:

~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();

Incluso puedes escribir:

new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required

Declara una función anónima, luego la llama:

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);

Es decir, ejecutar de inmediato.

así que si lo hago:

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();

alert(val(10)); //10
alert(val(11)); //21

Violín: http://jsfiddle.net/maniator/LqvpQ/

Segundo ejemplo:

var val = (function(){
     return 13 + 5;
})();

alert(val); //18

Esa construcción se llama Expresión de función invocada inmediatamente (IIFE), lo que significa que se ejecuta de inmediato. Piense en ello como una función que se llama automáticamente cuando el intérprete llega a esa función.

Caso de uso más común:

Uno de sus casos de uso más comunes es limitar el alcance de una variable creada a través de var. Las variables creadas a través de vartienen un alcance limitado a una función, por lo que esta construcción (que es un envoltorio de función alrededor de cierto código) se asegurará de que su alcance variable no se escape de esa función.

En el siguiente ejemplo, countno estará disponible fuera de la función invocada inmediatamente, es decir, el alcance de countno se filtrará fuera de la función. Debería obtener un ReferenceError, en caso de que intente acceder a él fuera de la función invocada inmediatamente de todos modos.

(function () { 
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

Alternativa ES6 (recomendada)

En ES6, ahora podemos tener variables creadas a través de lety const. Ambos tienen un alcance de bloque (a diferencia de lo varque tiene un alcance de función).

Por lo tanto, en lugar de usar esa construcción compleja de IIFE para el caso de uso que mencioné anteriormente, ahora puede escribir un código mucho más simple para asegurarse de que el alcance de una variable no se escape del bloque deseado.

{ 
    let count = 10;
}
console.log(count);  // ReferenceError: count is not defined

En este ejemplo, usamos letpara definir la countvariable que se countlimita al bloque de código que creamos con las llaves {...}.

Yo lo llamo "Cárcel de Curly".

(function () {
})();

Esto se denomina IIFE (expresión de función inmediatamente invocada). Uno de los famosos patrones de diseño de JavaScript, es el corazón y el alma del patrón de módulo moderno. Como sugiere el nombre, se ejecuta inmediatamente después de su creación. Este patrón crea un ámbito de ejecución aislado o privado.

JavaScript antes de ECMAScript 6 usaba el alcance léxico, por lo que IIFE se usó para simular el alcance de bloques. (Con ECMAScript 6, el alcance del bloque es posible con la introducción de las palabras clave lety const). Referencia para problemas con el alcance léxico

Simular alcance de bloques con IIFE

La mejora en el rendimiento de la utilización de IIFE es la capacidad de pasar objetos globales utilizados comúnmente como window, document, etc., como un argumento mediante la reducción de las operaciones de búsqueda alcance. (Recuerde que JavaScript busca propiedades en el alcance local y en la cadena hasta el alcance global). Por lo tanto, acceder a objetos globales en el ámbito local reduce el tiempo de búsqueda como se muestra a continuación.

(function (globalObj) {
//Access the globalObj
})(window);

Esta es una expresión de función invocada inmediatamente en Javascript:

Para entender IIFE en JS, vamos a desglosarlo:

1. Expresión : algo que devuelve un valor.
   Ejemplo: prueba seguir en la consola de Chrome. Estas son expresiones en JS.

a = 10 
output = 10 
(1+3) 
output = 4

1. Expresión de función :
   Ejemplo:

// Function Expression 
var greet = function(name){
   return 'Namaste' + ' ' + name;
}

greet('Santosh');

Cómo funciona la expresión de función:
- Cuando el motor JS se ejecuta por primera vez (Contexto de ejecución - Fase de creación), esta función (en el lado derecho de = arriba) no se ejecuta ni se almacena en la memoria. El motor JS asigna un valor 'indefinido' a la variable 'saludar'.
- Durante la ejecución (Contexto de ejecución - Fase de ejecución), el objeto de función se crea sobre la marcha ( aún no se ha ejecutado ), se asigna a la variable 'saludar' y se puede invocar usando 'saludar (' somename ')'.

3. Expresión de función inmediatamente invocada:

Ejemplo:

// IIFE
var greeting = function(name) {
    return 'Namaste' + ' ' + name;
}('Santosh')

console.log(greeting)  // Namaste Santosh. 

Cómo funciona IIFE :
- Observe el '()' inmediatamente después de la declaración de función. Cada objeto de función tiene una propiedad 'CÓDIGO' adjunta que es invocable. Y podemos llamarlo (o invocarlo) usando llaves '()'.
- Entonces, aquí, durante la ejecución (Contexto de ejecución - Fase de ejecución), el objeto de función se crea y se ejecuta al mismo tiempo - Entonces, ahora, la variable de saludo, en lugar de tener el objeto de función, tiene su valor de retorno (una cadena)

Caso de uso típico de IIFE en JS:

El siguiente patrón IIFE se utiliza con bastante frecuencia.

// IIFE 
// Spelling of Function was not correct , result into error
(function (name) {
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

• estamos haciendo dos cosas aquí. a) Envolviendo nuestra expresión de función entre llaves (). Esto le dice al analizador de sintaxis que lo que sea colocado dentro de () es una expresión (expresión de función en este caso) y es un código válido.
  b) Estamos invocando esta función al mismo tiempo usando () al final de la misma.

Entonces, esta función se crea y se ejecuta al mismo tiempo (IIFE).

Caso de uso importante para IIFE:

IIFE mantiene nuestro código seguro.
- IIFE, al ser una función, tiene su propio contexto de ejecución, lo que significa que todas las variables creadas dentro de él son locales para esta función y no se comparten con el contexto de ejecución global.

Supongamos que tengo otro archivo JS (test1.js) usado en mi aplicación junto con iife.js (ver más abajo).

// test1.js

var greeting = 'Hello';

// iife.js
// Spelling of Function was not correct , result into error
(function (name) { 
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

console.log(greeting)   // No collision happens here. It prints 'Hello'.

Entonces, IIFE nos ayuda a escribir código seguro donde no chocamos con los objetos globales sin querer.

No, esta construcción solo crea un espacio para nombrar. Si lo rompe en partes, puede ver que tiene un externo

(...)();

Esa es una invocación de función. Dentro del paréntesis tienes:

function() {}

Esa es una función anónima. Todo lo que se declara con var dentro de la construcción será visible solo dentro de la misma construcción y no contaminará el espacio de nombres global.

Esa es una función anónima que se invoca a sí misma .

Consulte la explicación de W3Schools sobre una función de autoinvocación .

Las expresiones de función se pueden hacer "autoinvocadas".

Una expresión autoinvocada se invoca (inicia) automáticamente, sin ser llamada.

Las expresiones de función se ejecutarán automáticamente si la expresión va seguida de ().

No puede autoinvocar una declaración de función.

Esta es la función anónima autoinvocada. Se ejecuta mientras está definido. Lo que significa que esta función está definida y se invoca a sí misma inmediatamente después de la definición.

Y la explicación de la sintaxis es: La función dentro del primer ()paréntesis es la función que no tiene nombre y por el siguiente ();paréntesis se puede entender que se llama en el momento en que se define. Y puede pasar cualquier argumento en este segundo ()paréntesis que será capturado en la función que está en el primer paréntesis. Vea este ejemplo:

(function(obj){
    // Do something with this obj
})(object);

Aquí, el 'objeto' que está pasando será accesible dentro de la función mediante 'obj', ya que lo está agarrando en la firma de la función.

Empieza aqui:

var b = 'bee';
console.log(b);  // global

Ponlo en una función y dejará de ser global : tu objetivo principal.

function a() {
  var b = 'bee';
  console.log(b);
}
a();
console.log(b);  // ReferenceError: b is not defined -- *as desired*

Llame a la función inmediatamente - oops:

function a() {
  var b = 'bee';
  console.log(b);
}();             // SyntaxError: Expected () to start arrow function, but got ';' instead of '=>'

Utilice los paréntesis para evitar un error de sintaxis:

(function a() {
  var b = 'bee';
  console.log(b);
})(); // OK now

Puede omitir el nombre de la función:

(function () {    // no name required
  var b = 'bee';
  console.log(b);
})();

No tiene por qué ser más complicado que eso.

Las funciones de ejecución automática se utilizan normalmente para encapsular el contexto y evitar colusiones de nombres. Cualquier variable que defina dentro de (function () {..}) () no es global.

El código

var same_name = 1;

var myVar = (function() {
    var same_name = 2;
    console.log(same_name);
})();

console.log(same_name);

produce esta salida:

2
1

Al usar esta sintaxis, evita chocar con variables globales declaradas en otra parte de su código JavaScript.

Función anónima autoejecutable. Se ejecuta tan pronto como se crea.

Un ejemplo breve y ficticio en el que esto es útil es:

function prepareList(el){
  var list = (function(){
    var l = []; 
    for(var i = 0; i < 9; i++){
     l.push(i);
    }
    return l;
  })();

  return function (el){
    for(var i = 0, l = list.length; i < l; i++){
      if(list[i] == el) return list[i];
    }
    return null;
  }; 
} 

var search = prepareList();
search(2);
search(3);

Entonces, en lugar de crear una lista cada vez, la crea solo una vez (menos gastos generales).

Se llama IIFE - Expresión de función inmediatamente invocada. Aquí hay un ejemplo para mostrar su sintaxis y uso. Se utiliza para delimitar el uso de variables solo hasta la función y no más allá.

(function () {
  function Question(q,a,c) {
    this.q = q;
    this.a = a;
    this.c = c;
  }

  Question.prototype.displayQuestion = function() {
    console.log(this.q);
    for (var i = 0; i < this.a.length; i++) {
      console.log(i+": "+this.a[i]);
    }
  }

  Question.prototype.checkAnswer = function(ans) {
    if (ans===this.c) {
      console.log("correct");
    } else {
      console.log("incorrect");
    }
  }

  var q1 = new Question('Is Javascript the coolest?', ['yes', 'no'], 0);
  var q2 = new Question('Is python better than Javascript?', ['yes', 'no', 'both are same'], 2);
  var q3 = new Question('Is Javascript the worst?', ['yes', 'no'], 1);

  var questions = [q1, q2, q3];

  var n = Math.floor(Math.random() * questions.length)

  var answer = parseInt(prompt(questions[n].displayQuestion()));
  questions[n].checkAnswer(answer);
})();

Es una expresión de función, significa Expresión de función invocada inmediatamente (IIFE). IIFE es simplemente una función que se ejecuta inmediatamente después de su creación. Entonces, en lugar de que la función tenga que esperar hasta que se la llame para ejecutarse, IIFE se ejecuta inmediatamente. Construyamos el IIFE con el ejemplo. Supongamos que tenemos una función de suma que toma dos enteros como argumentos y devuelve la suma, hagamos la función de suma en un IIFE,

Paso 1: Defina la función

function add (a, b){
    return a+b;
}
add(5,5);

Paso 2: Llame a la función ajustando toda la declaración de función entre paréntesis

(function add (a, b){
    return a+b;
})
//add(5,5);

Paso 3: Para invocar la función de inmediato, simplemente elimine el texto 'agregar' de la llamada.

(function add (a, b){
    return a+b;
})(5,5);

La razón principal para utilizar un IFFE es preservar un ámbito privado dentro de su función. Dentro de su código javascript, debe asegurarse de que no está anulando ninguna variable global. A veces, puede definir accidentalmente una variable que anula una variable global. Probemos con el ejemplo. supongamos que tenemos un archivo html llamado iffe.html y los códigos dentro de la etiqueta del cuerpo son-

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

Bueno, el código anterior se ejecutará sin ninguna pregunta, ahora asuma que usted declea una variable nombrada documento de manera accidental o intencional.

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
        const document = "hi there";
        console.log(document);
    </script> 
</body>

terminará en un SyntaxError : redeclaración de documento de propiedad global no configurable.

Pero si su deseo es borrar un documento de nombre de variable, puede hacerlo usando IFFE.

<body>
    <div id = 'demo'></div>
    <script>
        (function(){
            const document = "hi there";
            this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
            console.log(document);
        })();
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

Producción:

Probemos con otro ejemplo, supongamos que tenemos un objeto de calculadora como abajo-

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
    </script> 
</body>

Bueno, está funcionando como un encanto, ¿qué pasa si accidentalmente reasignamos el valor del objeto de la calculadora?

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
        calculator = "scientific calculator";
        console.log(calculator.mul(5,5));
    </script> 
</body>

sí, terminará con un TypeError: calculator.mul no es una función iffe.html

Pero con la ayuda de IFFE podemos crear un ámbito privado donde podemos crear otra calculadora de nombre de variable y usarla;

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        var cal = (function(){
            var calculator = {
                sub:function(a,b){
                    return a-b;
                },
                div:function(a,b){
                    return a/b;
                }
            }
            console.log(this.calculator.mul(5,10));
            console.log(calculator.sub(10,5));
            return calculator;
        })();
        console.log(calculator.add(5,10));
        console.log(cal.div(10,5));
    </script> 
</body>

Producción:

IIFE (expresión de función invocada inmediatamente) es una función que se ejecuta tan pronto como el script se carga y desaparece.

Considere la función a continuación escrita en un archivo llamado iife.js

(function(){
       console.log("Hello Stackoverflow!");
   })();

Este código anterior se ejecutará tan pronto como cargue iife.js e imprimirá ' Hello Stackoverflow! 'en la consola de herramientas de desarrollador'.

Para obtener una explicación detallada, consulte Expresión de función invocada inmediatamente (IIFE)

Un caso de uso más es la memorización donde un objeto de caché no es global:

var calculate = (function() {
  var cache = {};
  return function(a) {

    if (cache[a]) {
      return cache[a];
    } else {
      // Calculate heavy operation
      cache[a] = heavyOperation(a);
      return cache[a];
    }
  }
})();

El siguiente código:

(function () {

})();

se denomina expresión de función invocada inmediatamente (IIFE).

Se llama expresión de función porque el ( yourcode )operador en Javascript la fuerza en una expresión. La diferencia entre una expresión de función y una declaración de función es la siguiente:

// declaration:
function declaredFunction () {}

// expressions:

// storing function into variable
const expressedFunction = function () {}

// Using () operator, which transforms the function into an expression
(function () {})

Una expresión es simplemente un montón de código que se puede evaluar con un solo valor . En el caso de las expresiones del ejemplo anterior, este valor era un objeto de función única .

Después de tener una expresión que se evalúa como un objeto de función, podemos invocar inmediatamente el objeto de función con el ()operador. Por ejemplo:

(function() {

  const foo = 10;        // all variables inside here are scoped to the function block
  console.log(foo);

})();

console.log(foo);  // referenceError foo is scoped to the IIFE

¿Por qué es útil esto?

Cuando se trata de una gran base de código y / o cuando estamos importando varias bibliotecas, aumenta la posibilidad de conflictos de nombres. Cuando escribimos ciertas partes de nuestro código que están relacionadas (y por lo tanto están usando las mismas variables) dentro de un IIFE, todas las variables y nombres de funciones tienen como alcance los corchetes de funciones del IIFE . Esto reduce las posibilidades de conflictos de nombres y le permite nombrarlos más descuidados (por ejemplo, no tiene que prefijarlos).

Una expresión de función invocada inmediatamente (IIFE) es una función que se ejecuta tan pronto como se crea. No tiene conexión con ningún evento o ejecución asincrónica. Puede definir un IIFE como se muestra a continuación:

(function() {
     // all your code here
     // ...
})();

El primer par de paréntesis function () {...} convierte el código dentro del paréntesis en una expresión. El segundo par de paréntesis llama a la función resultante de la expresión.

An IIFEtambién se puede describir como una función anónima que se invoca a sí misma. Su uso más común es limitar el alcance de una variable creada a través de var o encapsular el contexto para evitar colisiones de nombres.

La razón por la que se utilizan funciones anónimas autoevocadas es que nunca deben ser llamadas por otro código, ya que "configuran" el código que DEBE llamarse (además de dar alcance a funciones y variables).

En otras palabras, son como programas que "crean clases", al comienzo del programa. Después de que se instancian (automáticamente), las únicas funciones que están disponibles son las devueltas por la función anónima. Sin embargo, todas las demás ' Las funciones ocultas 'siguen ahí, junto con cualquier estado (variables establecidas durante la creación del alcance).

Muy genial.

En la sintaxis de ES6 (publicando para mí, mientras sigo aterrizando en esta página buscando un ejemplo rápido):

// simple
const simpleNumber = (() => {
  return true ? 1 : 2
})()

// with param
const isPositiveNumber = ((number) => {
  return number > 0 ? true : false
})(4)

Esta función se denomina función autoinvocante. Una función autoinvocada (también llamada autoejecutable) es una función sin nombre (anónima) que se invoca (Llamada) inmediatamente después de su definición. Leer más aquí

Lo que hacen estas funciones es que cuando se define la función, la función se llama inmediatamente, lo que ahorra tiempo y líneas adicionales de código (en comparación con llamarla en una línea separada).

Aquí hay un ejemplo:

(function() {
    var x = 5 + 4;
    console.log(x);
})();

Esta es una explicación más detallada de por qué usaría esto:

"La razón principal para usar un IIFE es obtener privacidad de datos. Debido a que var de JavaScript aplica variables a su función contenedora, el mundo exterior no puede acceder a ninguna variable declarada dentro del IIFE".

http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html

Ya hay muchas buenas respuestas aquí, pero aquí están mis 2 centavos: p

Puede utilizar IIFE (expresión de función invocada inmediatamente) para:

1. Evitar la contaminación en el espacio de nombres global.

   Las variables definidas en IIFE (o incluso cualquier función normal) no sobrescriben las definiciones en el alcance global.

2. Proteger el código para que no se acceda a él mediante un código externo.

   Todo lo que defina dentro del IIFE solo se puede acceder dentro del IIFE. Protege el código de ser modificado por código externo. Solo lo que devuelve explícitamente como resultado de la función o establece como valor para las variables externas es accesible por código externo.

3. Evite nombrar funciones que no necesite usar repetidamente. Aunque es posible usar una función con nombre en el patrón IIFE, no lo hace, ya que no es necesario llamarla repetidamente, por lo general.

4. Para definiciones de módulos universales que se utilizan en muchas bibliotecas JS. Consulte esta pregunta para obtener más detalles.

El IIFE se usa generalmente de la siguiente manera:

(function(param){
   //code here
})(args);

Puede omitir los paréntesis ()alrededor de la función anónima y usar el voidoperador antes de la función anónima.

void function(param){
   //code here
}(args);