100 Días de Javascript - 5 de 100 - Ejecución de funciones

En Javascript existen dos formas principales de ejecutar funciones: la ejecución directa y la ejecución indirecta. Es importante saber cuándo tenemos que implementar el tipo de ejecución para prevenir errores en nuestra aplicación por un llamado no deseado (fuera de tiempo o sin el contexto adecuado).

#Happy Coding!

Ejecución Directa

Llamada normal

Ocurre cuando llamas a una función directamente por su nombre, seguido de paréntesis () que pueden contener argumentos si la función los requiere.

function saludar(nombre) {
  console.log(`¡Hola, ${nombre}!`);
}

saludar("Juan"); // Llamada directa a la función 'saludar'

Invocación inmediata

Cuando llamas a una función inmediatamente utilizando paréntesis () se conoce como “invocación inmediata” o IIFE (Immediately Invoked Function Expression). JavaScript ejecuta la función inmediatamente porque los paréntesis indican que la función debe ser ejecutada en ese momento.

Ejecución Indirecta

Usando Call, Apply o Bind

JavaScript proporciona métodos como call, apply, y bind para ejecutar funciones indirectamente y establecer el contexto (this) en el que se ejecutan.

function saludar() {
  console.log(`¡Hola, ${this.nombre}!`);
}

const persona = { nombre: "María" };

// Usando call para ejecutar la función 'saludar' con 'persona' como contexto
saludar.call(persona); // Ejecución indirecta usando call

// Usando apply para ejecutar la función 'saludar' con 'persona' como contexto
saludar.apply(persona); // Ejecución indirecta usando apply

// Usando bind para crear una nueva función con 'persona' como contexto
const saludarAAlguien = saludar.bind(persona);
saludarAAlguien(); // Ejecución indirecta usando bind

Estas formas de ejecución son útiles para diversos casos, especialmente cuando necesitas controlar el contexto (this) en el que se ejecuta una función o cuando deseas reutilizar una función con diferentes contextos.

Ejecución de funciones por eventos

Cuando no se utilizan paréntesis () al llamar a una función y esta se pasa como argumento a otra función o se asigna a un evento, por ejemplo, estás pasando la referencia de la función. Esto permite que la función sea ejecutada más tarde, no inmediatamente. Por ejemplo:

function miFuncion() {
  console.log("Esta función se ejecuta más tarde.");
}

// La función no se ejecuta inmediatamente, se pasa como referencia.
otraFuncion(miFuncion);

// La función se ejecutará cuando ocurra el evento.
elemento.addEventListener("click", miFuncion);

Esto ocurre debido a que en JavaScript las funciones son ciudadanos de primera clase, lo que significa que pueden ser tratadas como cualquier otra variable. Puedes pasarlas como argumentos, asignarlas a variables, devolverlas desde otras funciones, etc. Esta flexibilidad permite diferir la ejecución de una función hasta que sea llamada por otro código o evento.

En este ejemplo es importante notar la ausencia de paréntesis, considerando que al añadir los paréntesis después de miFuncion como en miFuncion(), estás indicando a JavaScript que ejecute la función miFuncion inmediatamente. En otras palabras, estás pidiendo: “¡Ejecuta esa función ahora mismo!”. En cambio, si solo se pasa el nombre de la función, Javascript no sabe qué hacer con ese nombre, de tal manera que ignorará esa parte.