¿Qué es una Self-Invoking Function?
O una Immediately Invocate Function Expression
O Self-Executing Anonymous Function
Se puede llamar de muchas formas
A veces es una Ify, que se describiría así
Ify, que es Immediately
Immediately Invocate Function Expression
¿Vale?
Esto es una Ify
Esta pregunta la hacen un montón
Y aunque es verdad, bueno, he escrito mal
Immediately, pero ya entendéis, ¿no?
Es con dos M's
Immediately
Ahora tengo
Immediately, ahora
Vale, pues esta es muy típica
¿Qué es esta Immediately Invocate Function Expression?
O le pueden llamar de otras formas
A veces le dicen Self-Executing Anonymous Function
La más típica es la de arriba
La más típica
O Self-Executing Function directamente
O Invoking Function
Bueno, hay diferentes formas
Pero ya os digo que la más típica es la de arriba
Pero tened en cuenta que
Si veis esto
Significa exactamente lo mismo
Entonces
¿Qué es esto, no?
Que es una Ify
Una Ify al final lo dice el nombre
O sea, más importante de recordar
Es saber qué significa cada una de las letras
Porque es una expresión
Una función
Expression
Una expresión que es una función
Que se invoca inmediatamente
Entonces, ¿esto qué quiere decir?
Esto es que si tuvieses una función
Pongamos que tenemos aquí una función
SayHi, ¿no?
Esto lo que quiere decir es que el SayHi
Lo estamos invocando inmediatamente
A ver, esto lo voy a comentar
Para que me deje de problemas esto
Lo voy a hacer esto más grande
¿Vale?
Y vamos a darle cañita a esto
¿Vale?
Esto no está
No se está
Inmediatamente
No se está ejecutando
No se está invocando inmediatamente
¿Por qué?
Porque esta función la estás guardando
En SayHi
Y una vez que la tienes en SayHi
La estás ejecutando
Por lo tanto, esto no es una Ify
Para conseguir que esto fuese una Ify
Lo que deberíamos hacer es
Por ejemplo, podríamos ponerlo así
Y aquí tendríamos nuestra función
Y la función la pondríamos tal que así
Y luego la ejecutaríamos
Y esta función
Imaginemos que aquí
Lo que hace esta función
Es un console.log de hola
¿Vale?
Entonces, aquí igual
Bueno, aquí hay que ponerle un punto y coma
Que si no se vuelve loco
Pues para hacer esa misma función
Que sea una Ify
Tendríamos que hacer esto
¿Vale?
Lo estamos envolviendo
Con estos paréntesis
Estos dos paréntesis
Y luego la estamos ejecutando
¿Esto qué quiere decir?
Que estamos haciendo la expresión
Y a la vez la estamos invocando
Inmediatamente
Sin necesidad de guardarlo
En ningún sitio
¿Por qué se utiliza esto?
Esto se puede utilizar
Por diferentes formas
Por diferentes cosas
Una de ellas
Es que imagínate
Que tú tienes un solo archivo
Y quieres tener aquí variables
Que de alguna forma
Pues no contaminen
El scope global
El que puedes tener aquí
Por ejemplo
¿No?
Aquí puedes tener
El console.log
Puedes tener variables
Add hola
¿Vale?
Esta variable
Puedes acceder aquí dentro
Pero justamente esta Ify
La puedes hacer
Para, por ejemplo
Que este
Si haces un let b
Pues este let
No esté disponible
Fuera de aquí
¿Por qué?
Porque al estar dentro
De un scope
Pues ya lo puedes ejecutar
Claro, la diferencia
De hacer esto
Tenerlo aquí
Es que el let b
Estaría disponible
En todo el fichero
Y en cambio
Al tenerlo aquí
Solo lo tendrías
Dentro del scope
Por eso eso se suele hacer
Una cosa que se ve mucho
Normalmente ahora
Es justamente
Que esta función
De aquí dentro
Como las funciones
Para utilizar una wait
Pongamos que tengo aquí
Un fetch
¿Vale?
No sé si puedo utilizar
Un fetch en este archivo
Bueno, vamos a probarlo
Vamos a hacer un fetch
De mi página web
Por poner algo
Vale
No sé
No sé si funcionará
Porque fetch
Ya os digo que es una palabra
O sea que a lo mejor
No está aquí en el playground
Pero solo os quiero explicar
Que por qué se utiliza
Mucho las ifi también
Pues para hacer
El async await
Para poner aquí una async
Y poder utilizar
Una wait dentro
¿Dónde he puesto esto?
Este hola
Esto
Fuera de aquí
Vale
Así
Mira, así que se puede utilizar
El fetch
Genial
Vale
Pues para utilizar
El async await
Se utiliza una ifi
¿Por qué?
Porque Node
Especialmente Node
Pero en un montón de sitios
No puedes tener
El top level await
Que le llaman
El top level await
Lo que quiere decir
Es que este await
No lo puedes hacer
Aquí en la raíz
Pero ya os digo
Que las últimas versiones
De Node y tal
Sí que se puede hacer
Pero por ahora
No todos lo soportan
Y por lo tanto
Esta era una forma
De conseguir tener
Una senka wait
Tú creabas esta función
Que se invocaba inmediatamente
Y ya está
Históricamente
Esto
¿Por qué os explico?
Y por qué os doy
Toda esta chapa
Porque normalmente
No solo en las preguntas técnicas
Os pueden preguntar
Lo que es una ifi
Sino que además
Os puedo preguntar
¿Para qué la usaríais?
Hay otra cosa
Por la que se utilizaba
Una ifi
Que es un poco más compleja
Pero era un tema
De rendimiento
De las funciones
A la hora de funcionar
¿Por qué?
Porque cuando vosotros
Hacéis esto
En la raíz
¿Vale?
Estas cuatro líneas de aquí
Pues esto se ejecuta
Inmediatamente
Y puede bloquear
Incluso
El thread principal
Esto lo puede bloquear
Pero como pasa
En el siguiente tick
Esto se supone
Que puede desbloquear
Y hacer antes
En el hilo
Alguna ejecución
Que sea más prioritaria
Bueno
Esto
Ya se ha dejado
De utilizar
Para esto
Ya no tiene tanto sentido
Pero que sepáis
Que históricamente
También se intentaba
Un poco para esto
Pero especialmente
Para la sync await
Es lo que más ha visto
Últimamente
Y también esto
Para crear un scope
Y tener aquí
Variables
Que no estén accesibles
Fuera de ello
Y para eso
Básicamente
A lo menos
Que se me ocurre
Ahora mismo
¿Vale?
Así que
Esto sería una ifi
Y fíjate que esta if
Para que os hagáis una idea
Para que nos hagamos una idea
Que al final
La de arriba y la de abajo
Hacen lo mismo
Esto
Es exactamente lo mismo
Estas líneas de aquí
Y esto
Hacen lo mismo
Solo que esto
Lo estamos guardando
Una constante
Y luego
La estamos invocando
Y esto
Lo que estamos haciendo
Justamente es invocarla
Inmediatamente
Así que
Ahí lo tendríamos
¿Vale?
Ese sería el tema
Esto
También lo podéis utilizar
Yo lo he hecho
Con una raw function
Pero pensad
Que también lo podéis hacer
Directamente
Con una función así
Esto también
Funcionaría correctamente
Este error
Que veis aquí
Esto es porque
Como no hay un punto y coma
Aquí
Se vuelve loco
De hecho
Las ifi
Suele dan problema
Cuando trabajas
Sin punto y coma
Bastante
Porque
Si yo quito
Este punto y coma
Veis que me da un error
Esto es porque
Javascript
Está detectando
Este código así
Como si fuese
Todo junto
Entonces dice
Oye
Pero esto no funciona
Correctamente
Porque no sé
Que se cuenta
Veis que dice
Save high
Is not a function
Pues eso
Porque lo está
Juntando todo
Esta es la única excepción
En la que no
En la que hay que poner
Un punto y coma
Cuando la línea
Empieza
Con paréntesis
Con corchete
Y creo que también
Con llave
Ahora me hago dudar
Con lo de llave
Pero creo que sí
Creo que con llave también
Bueno
Eso es
Ya es
Es más una curiosidad
Que otra cosa
Esto es utilizado muchísimo
En funciones antiguas
Por ejemplo
Como jQuery
Va
Os voy a enseñar una cosa
Que es súper interesante
Esto
Esto ya es
Un poquito más avanzado
¿Vale?
No es tan tan antiguo
O sea
No es
No es tan tan principiante
Las cosas
Algunas cosas que he dicho
Al principio
Sí que es de principiante
Conocer que es una ifi
Es importante
Ya empezar a saber
Por qué
Y qué ventajas tiene
Y eso
Ya empieza a ser
Un poco
Casi intermedio
Pero luego
Esto que estamos comentando
¿No?
Que antes se utilizaba mucho
Para crear librerías
¿Por qué?
Justamente
Porque
Imaginad
jQuery
Que es una de estas
Pues jQuery
O lo que sea
jQuery
Lo que quería
Es que tú
Aquí crear
Lo que hacía jQuery
La librería
Estamos hablando de la librería
Pues aquí tenía un montón
De funcionalidades
Por ejemplo
Settings
Pues esto
Creo esto
Claro
Este settings
Cuando tú importas
Este archivo
Este archivo
Imaginad
Imaginad
Imaginad
Que esto es jQuery
.js
Y lo cargamos
Con un script
Source
Pues
HTTPS
jQuery
.com
Barra jQuery
.js
Imaginad
Que eso existe
¿Vale?
¿Qué pasa?
Que si ese archivo
jQuery
.js
Tuviese en la raíz
Todo su código
Eso
Estaría
De alguna forma
Entrando
En tu scope
Global
O sea
Imaginad
Que hace esto
jQuery
Igual
Esto
Por poner un ejemplo
Claro
Es que lo tendríais
Disponible
Directamente
En el scope
Global
Y eso no es correcto
Ya podríais hacer
Aquí un jQuery
Y lo tendríais
Esta variable
Estaría
En colisión
Con las variables
Que pudiera estar
En el mismo scope
Y eso
Pues no es correcto
Esto se va a solucionar
Cuando
Bueno
Y está solucionado
Utilizando módulos
También os digo
O sea
Que esto es una cosa
Que era antigua
Y ahora igual
Poco a poco
Vamos viendo
Que esto ya deja
De tener sentido
Y seguro
Que en módulos
Pues ya no lo veis tanto
Pero otra cosa
Y esto ya si que es más avanzado
Por la que se hacía
Aparte de esto
Es que fíjate
Aquí
Esto que es una función
Que se invoca
Automáticamente
Bueno
Automáticamente no
Inmediatamente
Automáticamente no
Porque esto es bastante manual
El tema que tiene esto
Es que tú aquí
Le puedes pasar
Un montón
De variables
Y una de ellas
Que se pasaba típica
Era el window
El document
Tú al tener
Al pasarle a este parámetro
El window
Y el document
Aquí lo que hacían
Era este truco
Y entonces
Ahora cuando se referían
Aquí dentro
A w
Esto
Ya era
El window
Aquí no creo
Que me salga
Porque esto es un playground
Que creo que es de servidor
Si no me equivoco
A ver
Voy a quitar esto
A ver si funciona
Ah pues si mira
Si que funciona
Obviamente
El window
Que vemos aquí
Es muy raro
Y tal
Pero veis
Tú le pasas aquí
Los parámetros
Y lo tienes ya disponible
Dentro de la función
Porque como al final
Esto es una función
Le pasas aquí los parámetros
Y ya los tienes aquí disponibles
Esto se utilizaba justamente
Para inyectarle el window
Y el document
Y dentro
En ningún sitio
Directamente
Ir al document
¿Sabes?
O sea tú no veías aquí
Directamente window
Punto
Lo que sea
Sino que ya estaban utilizando
Directamente el win
Que se le pasaba con parámetro
Esto está muy bien
Porque de esta forma
Aparte de que le podías poner
Nombres más cortos
Que históricamente
Tenía sentido
Para intentar cortar
Algunos bytes
Pero ya os digo
Que esto ahora
Hoy en día
No tiene ningún sentido
Esto también te permitía
Pues hacer diferentes cosas
Como configuraciones
Que le podías pasar por aquí
Y cosas así
Pues bueno
Esto es un poco más avanzado
Pero puede ser
Que en algún momento
Lo veáis
Y puede ser interesante
Que lo comprendáis
¿Vale?
Es una forma
De encapsular
Diferente código
Y que te puede ayudar
Justamente
A no manchar
El scope global
Aunque
Es más por temas históricos
Normalmente
Lo que os he dicho
El async await
Es por lo que se ha utilizado
Más ahora
¿Vale?
Claro
Empresas dice
No sé si me equivoco
Pero con eso
No se simulaban
Las propiedades privadas
Claro
En este caso
Es como simular
Una propiedad privada
En este punto
¿No?
Porque tú tienes
Este const settings
Y aquí tú puedes empezar
A hacer cosas
Y este settings
Es privado
Yo no lo puedo acceder
Aquí dentro
Yo no podría hacer esto
Porque este settings
Está aquí dentro
De este scope
Y no podrías acceder
Por eso
Te serviría
Y no podrías acceder