CodeForge

JavaScript de Cero a Experto / Funciones

Hoisting e IIFE: comportamientos que debes conocer

Teoría18 min20 XP

Dos comportamientos de JavaScript que, si no los conoces, te sorprenden: el HOISTING (por qué a veces puedes usar una función ANTES de declararla) y las IIFE (funciones que se ejecutan a sí mismas al instante). No los usarás a diario, pero reconocerlos te evita confusiones y te deja leer código ajeno sin sustos.

Hoisting: la lectura en dos pasadas

Las declaraciones (function sumar()) se pueden usar antes de su línea —están disponibles en todo su scope—. Las expresiones y arrow guardadas en const/let NO: solo existen a partir de la línea donde se declaran (usarlas antes da error). Regla práctica sin complicaciones: declara antes de usar, y no dependas del hoisting; así el código se lee de arriba abajo sin sorpresas.

IIFE: la función que se ejecuta sola

Una IIFE (Immediately Invoked Function Expression) es una función que se llama a sí misma en el instante en que se define:

Los paréntesis finales () la invocan de inmediato; los paréntesis envolventes son para que JavaScript la trate como expresión. ¿Para qué existía? Antes de que JavaScript tuviera MÓDULOS (que verás en el módulo 13), las IIFE eran la forma de crear un scope PRIVADO y desechable —para no ensuciar el espacio global con variables temporales—. Hoy los módulos hacen ese trabajo, así que verás IIFE sobre todo en código más antiguo. Reconócela: "una función entre paréntesis que se ejecuta sola".

Tienes console.log(saludar()) en la línea 1, y function saludar() { return 'hola' } en la línea 5. ¿Funciona, y por qué?

Mini-reto

Comprueba el hoisting tú mismo: en el playground, llama a una función DECLARADA con function antes de su línea (funciona) y a una guardada en const antes de la suya (falla). Luego envuelve una parte de tu código de "Mi Bolsillo" en una IIFE y confirma que sus variables no se ven afuera. Ver los dos comportamientos en vivo los desmitifica.

Qué sigue

Cierras el módulo de funciones con un reto que las junta todas: parámetros, defaults, arrow, y hasta un closure para dar estado privado a "Mi Bolsillo". Tu primera "mini-librería" de funciones que trabajan juntas — el salto de escribir funciones sueltas a diseñar un conjunto que colabora.