Hispanopedia Wiki
Articulo de referencia

Expresión de función invocada inmediatamente

Una expresión de función invocada inmediatamente (o IIFE , pronunciada "iffy", IPA /ˈɪf.i/) es un modismo de lenguaje de programación que produce un ámbito léxico mediante el ám...

Hispanopedia WikiContenido en espanolLectura gratuita

Una expresión de función invocada inmediatamente (o IIFE , pronunciada "iffy", IPA /ˈɪf.i/) es un modismo de lenguaje de programación que produce un ámbito léxico mediante el ámbito de la función . Fue popular en JavaScript [ 1 ] como método para admitir la programación modular antes de la introducción de soluciones más estandarizadas como CommonJS y los módulos ES . [ 2 ]

Las expresiones de función invocadas inmediatamente pueden utilizarse para evitar la elevación de variables dentro de los bloques, protegiendo así el entorno global y permitiendo simultáneamente el acceso público a los métodos, a la vez que se preserva la privacidad de las variables definidas dentro de la función. En otras palabras, encapsulan funciones y variables, manteniéndolas fuera del ámbito global y otorgándoles un ámbito local.

Uso

Las expresiones de función invocadas inmediatamente pueden escribirse de varias maneras diferentes. [ 3 ] Una convención común es encerrar la expresión de función —y opcionalmente su operador de invocación— con el operador de agrupación, [ 4 ] entre paréntesis, para indicarle al analizador sintáctico que espere explícitamente una expresión. De lo contrario, en la mayoría de los casos, cuando el analizador sintáctico encuentra la palabra clave, la trata como una declaración de función (instrucción) y no como una expresión de función. [ 5 ] [ 6 ]  function

( function () { /* ... */ })(); ( function () { /* ... */ }()); (() => { /* ... */ })(); // Con funciones flecha de ES6 (aunque los paréntesis solo se permiten fuera)

En contextos donde se espera una expresión, no es necesario encerrarla entre paréntesis:

let f = function () { /* ... */ }(); true && function () { /* ... */ }(); 0 , function () { /* ... */ }();

El paso de variables al ámbito se realiza de la siguiente manera:

( función ( a , b ) { /* ... */ })( "hola" , "mundo" ); ( función ( a = "hola" , b = "mundo" ) { /* ... */ })(); // también funciona

Un paréntesis inicial es un caso en el que la inserción automática de punto y coma (ASI) en JavaScript puede causar problemas; la expresión se interpreta como una llamada al último término de la línea anterior. En algunos estilos que omiten los puntos y comas opcionales, el punto y coma se coloca delante del paréntesis y se conoce como punto y coma defensivo . [ 7 ] [ 8 ] Por ejemplo:

a = b + c ;( function () { // código })();

...para evitar ser analizado como c().

Ejemplos

La clave para entender patrones de diseño como IIFE es darse cuenta de que antes de ES6, JavaScript solo tenía ámbito de función (por lo tanto, carecía de ámbito de bloque ), pasando valores por referencia dentro de cierres . [ 9 ] Esto ya no es así, ya que la versión ES6 de JavaScript implementa el ámbito de bloque usando las nuevas palabras clave lety const. [ 10 ]

// Antes de ES6: Creando un ámbito usando una IIFE var foo = 1 ; var bar = 2 ; ( function (){ var foo = 3 ; // oculta el `foo` externo bar = 4 ; // sobrescribe el `bar` externo })(); console . log ( foo , bar ); // 1 4// Desde ES6: Creando un ámbito usando llaves en combinación con let y const const foo = 1 ; let bar = 2 ; { const foo = 3 ; // oculta el `foo` externo bar = 4 ; // sobrescribe el `bar` externo } console . log ( foo , bar ); // 1 4

Contexto de evaluación

La falta de ámbito de bloque implica que las variables definidas dentro de (por ejemplo) un bucle for tendrán su definición "elevada" al principio de la función que lo contiene. Evaluar una función que depende de variables modificadas por la función externa (incluso por iteración) puede resultar difícil. Podemos comprobarlo sin un bucle si actualizamos un valor entre la definición y la invocación de la función. [ 11 ]

let v , getValue ; v = 1 ; getValue = function () { return v ; }; v = 2 ;obtenerValor (); // 2

Aunque el resultado pueda parecer obvio al actualizar vmanualmente, puede producir resultados no deseados cuando getValue()se define dentro de un bucle.

A partir de ahora, la función se pasa vcomo argumento y se invoca inmediatamente, conservando el contexto de ejecución de la función interna. [ 12 ]

let v , getValue ; v = 1 ; getValue = ( function ( x ) { return function () { return x ; }; })( v ); v = 2 ;obtenerValor (); // 1

Esto es equivalente al siguiente código:

let v , getValue ; v = 1 ; function f ( x ) { return function () { return x ; }; }; getValue = f ( v ); v = 2 ;obtenerValor (); // 1

Establecimiento de variables privadas y accesores

Las IIFE también son útiles para establecer métodos privados para funciones accesibles, al tiempo que se exponen algunas propiedades para su uso posterior. [ 13 ] El siguiente ejemplo proviene de la publicación de Alman sobre IIFE. [ 1 ]

// "counter" es una función que devuelve un objeto con propiedades, que en este caso son funciones. let counter = ( function () { let i = 0 ;return { get : function () { return i ; }, set : function ( val ) { i = val ; }, increment : function () { return ++ i ; } }; })();// Estas llamadas acceden a las propiedades de la función devuelta por "counter". counter.get ( ) ; // 0 counter.set ( 3 ) ; counter.increment (); // 4 counter.increment ( ); // 5

Si intentamos acceder counter.idesde el entorno global, será indefinido, ya que está encerrado dentro de la función invocada y no es una propiedad de counter. Del mismo modo, si intentamos acceder a i, se producirá un error, ya que no lo hemos declarado ien el entorno global.

Terminología

Originalmente conocida como una "función anónima autoejecutable", [ 14 ] Ben Alman introdujo más tarde el término actual IIFE como un nombre semánticamente más preciso para el modismo, poco después de que surgiera su discusión en comp.lang.javascript. [ 1 ] [ 15 ] [ 16 ]

Cabe destacar que las funciones invocadas inmediatamente no tienen por qué ser anónimas inherentemente, y el modo estricto de ECMAScript  5 lo prohíbe arguments.callee, [ 17 ] lo que convierte el término original en un nombre inapropiado .

Véase también

Referencias

  1. 1 2 3 Alman, Ben (15 de noviembre de 2010). "Expresiones de función invocadas inmediatamente" . Archivado del original el 1 de diciembre de 2017. Recuperado el 18 de enero de 2019 .
  2. ↑ McGinnis, Tyler (15 de enero de 2019). "Módulos de JavaScript: de IIFE a CommonJS y módulos ES6" . ui.dev . Consultado el 18 de agosto de 2021 .
  3. ↑ Lindley, Cody (2013). JavaScript Enlightenment . O'Reilly. p. 61. ISBN  978-1-4493-4288-3.
  4. ↑ "Operador de agrupación" . Red de desarrolladores de Mozilla. 2 de octubre de 2023.
  5. ↑ Zakas, Nicholas (2012). Maintainable JavaScript . O'Reilly. p. 44. ISBN  978-1-4493-2768-2.
  6. ↑ Axel Rauschmayer. "ExplorandoJS" .
  7. ↑ "Inserción de punto y coma en JavaScript: todo lo que necesitas saber" . 28 de mayo de 2010. Archivado del original el 2 de octubre de 2017.
  8. ↑ Marohnić, Mislav (7 de mayo de 2010). "Los puntos y comas en JavaScript son opcionales" . Archivado del original el 8 de agosto de 2017.
  9. ↑ Haverbeke, Marijn (2011). JavaScript elocuente . Sin prensa de almidón. págs. 29 y 30. ISBN  978-1-59327-282-1.
  10. ↑ Orendorff, Jason (31 de julio de 2015). "ES6 en profundidad: let y const" . Mozilla Hacks – el blog para desarrolladores web . Mozilla . Consultado el 16 de octubre de 2024 .
  11. ↑ Alman, Ben. "simple-iife-example.js" . Github . Consultado el 5 de febrero de 2013 .
  12. ↑ Otero, Cesar; Larsen, Rob (2012). Professional jQuery . John Wiley & Sons. pág. 31. ISBN  978-1-118-22211-9.
  13. ↑ Rettig, Pascal (2012). Desarrollo profesional de juegos móviles con HTML5 . John Wiley & Sons. pág. 145. ISBN  978-1-118-30133-3.
  14. ^ Resig, John (2006). Técnicas profesionales de JavaScript . Presione. pag. 29.ISBN​  978-1-4302-0283-7.
  15. ↑ Osmani, Addy (2012). Aprendiendo patrones de diseño de JavaScript . O'Reilly. pág. 206. ISBN  978-1-4493-3487-1.
  16. ↑ Baagoe, Johannes. "Paréntesis de cierre en la definición de una función seguido de su llamada" . Consultado el 19 de abril de 2010 .
  17. ↑ "Modo estricto" . Referencia de JavaScript de Mozilla . Red de desarrolladores de Mozilla . Consultado el 4 de febrero de 2013 .
  • "Funciones y ámbito de las funciones" . Referencia de JavaScript de Mozilla . Red de desarrolladores de Mozilla . Consultado el 4 de febrero de 2013 .
Obtenido de " https://en.wikipedia.org/w/index.php?title=Immediately_invoked_function_expression&oldid=1331193751 "
Lecturas relacionadas
6 articulos
Alfabeto fonético internacionalAlfabeto fonético internacionalEl Alfabeto Fonético Internacional ( AFI ) es un sistema alfabético de notación fonética basado principalmente en la escritura latina . Fue ideado ...Modismos de programaciónModismos de programaciónEn programación informática , un modismo de programación o modismo de código es un grupo de fragmentos de código que comparten un rol semántico equ...Alcance (informática)Alcance (informática)En programación informática , el alcance de un enlace de nombre (una asociación de un nombre a una entidad, como una variable ) es la parte de un p...Alcance (programación informática)En programación informática , el ámbito de una vinculación de nombre (la asociación de un nombre con una entidad, como una variable ) es la parte d...JavaScriptJavaScriptJavaScript ( / ˈdʒ ɑː v ə s k r ɪ p t / ), a menudo abreviado como JS , es un lenguaje de programación y una tecnología central de la Web , junto c...Programación modularLa programación modular es una técnica de diseño de software que enfatiza la separación de la funcionalidad de un programa en módulos independiente...