funciones-super

 

1. Lo fundamental: funciones y paréntesis

javascript
function saludar() {
  return "Hola mundo";
}

// CON paréntesis: EJECUTAS la función → obtienes el resultado
let resultado = saludar();  // resultado = "Hola mundo"

// SIN paréntesis: REFERENCIAS la función → obtienes la función misma
let referencia = saludar;   // referencia = la función completa

Regla de oro:

  • saludar() → "ejecútame ahora"

  • saludar → "toma la función como valor"

2. ¿Qué es un callback?

Callback = una función que se pasa como argumento a otra función, para que esta otra la ejecute más tarde.

javascript
// Ejemplo simple de callback
function hacerAlgoLuego(callback) {
  console.log("Haciendo algo...");
  callback();  // Aquí ejecutamos la función que nos pasaron
}

// Usamos un callback
hacerAlgoLuego(function() {
  console.log("Esto se ejecuta después");
});

3. Eventos como onclick esperan un callback

Cuando escribes boton.onclick = ???, JavaScript espera una función (callback) que ejecutará cuando ocurra el clic.

❌ ERROR COMÚN (con paréntesis):

javascript
boton.onclick = cambiar();  // ¡MAL!

Esto significa: ejecuta cambiar() AHORA MISMO y el resultado (que es undefined porque no retorna nada) se asigna a onclick. El clic no hará nada.

✅ CORRECTO (sin paréntesis):

javascript
boton.onclick = cambiar;  // ¡BIEN!

Esto significa: toma la función cambiar y guárdala para ejecutarla cuando haya clic.

4. ¿Por qué en el HTML onclick="myFunction()" SÍ lleva paréntesis?

html
<button onclick="myFunction()">Click</button>

¡Aquí es diferente! El HTML onclick recibe un string de código JavaScript que se evalúa. Cuando haces clic, JavaScript evalúa ese string y encuentra myFunction(), por eso sí lleva paréntesis.

Es equivalente a hacer:

javascript
eval("myFunction()");  // Esto ejecuta la función

5. Comparativa visual

ContextoCómo se escribePor qué
boton.onclick = miFuncionSin ()Le ESTÁS PASANDO la función para que la ejecute DESPUÉS
boton.onclick = miFuncion()Con ()Ejecuta AHORA y pasa el RESULTADO (normalmente nada útil)
onclick="miFuncion()" en HTMLCon ()El contenido es un string que se EVALÚA al hacer clic
let x = miFuncionSin ()Quieres la FUNCIÓN como valor
let x = miFuncion()Con ()Quieres el RESULTADO de ejecutarla ahora

6. Funciones anónimas (sin nombre) y flecha

javascript
// Función anónima (sin nombre)
boton.onclick = function() {
  parrafo.style.color = "olive";
};

// Función flecha (es lo mismo, sintaxis más moderna)
boton.onclick = () => {
  parrafo.style.color = "olive";
};

No es porque sean anónimas, es porque estás pasando la función sin ejecutarla (no hay () después).

7. Resumen visual final

javascript
// PASAR función (para ejecutar DESPUÉS)
boton.onclick = cambiar;        // ✅ Sin ()
boton.onclick = function() {};  // ✅ Sin ()
boton.onclick = () => {};       // ✅ Sin ()

// EJECUTAR función (AHORA mismo)
boton.onclick = cambiar();      // ❌ Con () - ejecuta ahora
boton.onclick = cambiar() + 1;  // ❌ Con () - ejecuta ahora

Regla definitiva

Cuando quieras que una función se ejecute MÁS TARDE (en un clic, timeout, etc.), pásala SIN paréntesis.
Cuando quieras ejecutarla AHORA MISMO, usa paréntesis.

javascript
// Ejecutar después
setTimeout(miFuncion, 1000);     // Sin ()
boton.onclick = miFuncion;       // Sin ()

// Ejecutar ahora
setTimeout(miFuncion(), 1000);   // Con () - ¡error lógico!
boton.onclick = miFuncion();     // Con () - ejecuta ahora

¿Te quedó más claro? 

Lo que tienes CORRECTO:

1. Son equivalentes:

javascript
boton.onclick = cambiar;
javascript
boton.onclick = function() {
    parrafo.style.color = "olive";
};

Sí, exactamente. En ambos casos estás pasando la función (sin ejecutarla).

2. No puedes poner () porque JavaScript ejecutaría inmediatamente:

javascript
boton.onclick = cambiar();  // ❌ Se ejecuta AHORA, no cuando hagan clic

3. HTML onclick="myFunction()" funciona porque está dentro de un string:

html
<button onclick="myFunction()">Click</button>

Tu entendimiento es correcto: El navegador NO evalúa myFunction() hasta que haces clic. El contenido es solo texto dentro del HTML.

🔄 Cómo funciona internamente:

javascript
// El navegador LEE el HTML y crea algo como esto internamente:
button.onclick = function(event) {
    eval("myFunction()");  // Esto se ejecuta SOLO cuando hay clic
};

❓ Tu duda sobre funciones que reciben funciones como parámetros

Preguntaste: "¿Se puede pasar una función CON paréntesis a otra función?"

Respuesta corta: Sí, pero se ejecuta inmediatamente

javascript
// EJEMPLO 1: Recibir función como callback
function hacerAlgo(callback) {
    console.log("Preparando...");
    callback();  // Aquí se ejecuta después
}

// ✅ Bien - PASAS la función (sin ejecutar)
hacerAlgo(saludar);           // Pasa la función
hacerAlgo(() => console.log("Hola"));  // Pasa función flecha

// ❌ Mal (generalmente) - EJECUTAS antes de pasar
hacerAlgo(saludar());  // saludar() se ejecuta AHORA, luego se pasa su RESULTADO

Pero hay casos donde SÍ usas () dentro del parámetro:

javascript
// Caso especial: funciones que RETORNAN funciones
function crearSaludo(nombre) {
    return function() {
        console.log("Hola " + nombre);
    };
}

// Aquí SÍ usamos paréntesis porque queremos crear la función ahora
let saludoAna = crearSaludo("Ana");  // ← crearSaludo() se ejecuta AHORA
// pero nos devuelve UNA NUEVA FUNCIÓN

boton.onclick = saludoAna;  // ← la función resultante se pasa SIN ()

📊 Comparativa definitiva:

Código¿Cuándo se ejecuta?Qué se asigna/retorna
boton.onclick = miFuncionCuando hay clicLa función misma
boton.onclick = miFuncion()InmediatamenteEl RESULTADO de miFuncion()
onclick="miFuncion()" (HTML)Cuando hay clicSe evalúa el string
setTimeout(miFuncion, 1000)Después de 1 segundoLa función misma
setTimeout(miFuncion(), 1000)InmediatamenteEl RESULTADO (error lógico)
otraFuncion(miFuncion)Dentro de otraFuncionLa función misma
otraFuncion(miFuncion())InmediatamenteEl RESULTADO

🎯 El concepto clave que te falta:

La diferencia entre PASAR y EJECUTAR:

javascript
// PASAR la función (sin paréntesis)
function ejecutarDespues(fn) {
    setTimeout(fn, 1000);  // fn se guarda para después
}

// EJECUTAR ahora (con paréntesis)
function ejecutarAhora(fn) {
    let resultado = fn();  // ← EJECUTA ahora y guarda el resultado
    return resultado;
}

💡 Analogía final:

Imagina que la función es una receta de cocina:

  • miFuncion (sin ()) = la receta misma (puedes guardarla, regalarla, usarla después)

  • miFuncion() (con ()) = cocinar la receta (obtienes el plato ahora mismo)

javascript
// onclick espera una RECETA para cocinarla después
boton.onclick = receta;           // ✅ Guardo la receta
boton.onclick = receta();         // ❌ Cocino ahora, le paso el plato vacío

// HTML onclick es una nota que dice "cocina receta() cuando te diga"
<button onclick="receta()">       // ✅ La nota se evalúa después

🎓 Resumen final:

  1. Sin () = pasas la función (para ejecutar después)

  2. Con () = ejecutas la función (ahora mismo)

  3. HTML onclick es especial porque es texto que se evalúa después

  4. Callback = función que pasas para que otra la ejecute después

  5. Una función que retorna otra función es la única vez que usas () para crear la función, pero aún así la usas sin () al pasarla




Aquí tienes los 4 ejemplos convertidos de las imágenes, con explicación de cada uno:

🔵 Ejemplo 1: Evento en HTML (más antiguo)

html
<!DOCTYPE html>
<html>
<body>
<div class="container">
    <h1 id="titulo">Hola soy un documento en HTML</h1>
    <p id="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, corporis.</p>
    <button id="boton" class="btn btn-info" onclick="alert('click')">Cambiar</button>
</div>
<script>
    var parrafo = document.getElementById("parrafo");
    parrafo.style.color = "olive";
</script>
</body>
</html>

📝 Explicación:

  • El evento onclick está dentro del HTML (en la etiqueta <button>)

  • onclick="alert('click')" es un string que se evalúa cuando haces clic

  • El script aparte cambia el color del párrafo inmediatamente al cargar la página

  • ⚠️ Desventaja: Mezcla HTML con JavaScript (difícil de mantener)

🟢 Ejemplo 2: Función anónima

html
<!DOCTYPE html>
<html>
<body>
<div class="container">
    <h1 id="titulo">Hola soy un documento en HTML</h1>
    <p id="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, corporis.</p>
    <button id="boton" class="btn btn-info">Cambiar</button>
</div>
<script>
    var parrafo = document.getElementById("parrafo");
    var boton = document.getElementById("boton");

    // 🔥 FUNCIÓN ANÓNIMA - no tiene nombre
    boton.onclick = function () {
        parrafo.style.color = "olive";
    }
</script>
</body>
</html>

📝 Explicación:

  • Función anónima = función sin nombre

  • Se asigna directamente a boton.onclick

  • ✅ Ventaja: Todo está en JavaScript, no mezclas con HTML

  • La función se pasa sin paréntesis (solo la definición)

  • Se ejecutará cuando hagan clic

🟡 Ejemplo 3: Función con nombre (callback)

html
<!DOCTYPE html>
<html>
<body>
<div class="container">
    <h1 id="titulo">Hola soy un documento en HTML</h1>
    <p id="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, corporis.</p>
    <button id="boton" class="btn btn-info">Cambiar</button>
</div>
<script>
    var parrafo = document.getElementById("parrafo");
    var boton = document.getElementById("boton");

    // Función con nombre
    function cambiar() {
        parrafo.style.color = "olive";
    }

    // ✅ PASAMOS la función SIN ejecutar
    boton.onclick = cambiar;  // ← Sin paréntesis
</script>
</body>
</html>

📝 Explicación:

  • cambiar es una función con nombre

  • boton.onclick = cambiar → sin paréntesis = pasamos la función

  • La función NO se ejecuta ahora, se guarda para después

  • ✅ Esta es la forma más limpia y reutilizable

🔴 Ejemplo 4: ❌ ERROR COMÚN

html
<!DOCTYPE html>
<html>
<body>
<div class="container">
    <h1 id="titulo">Hola soy un documento en HTML</h1>
    <p id="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, corporis.</p>
    <button id="boton" class="btn btn-info">Cambiar</button>
</div>
<script>
    var parrafo = document.getElementById("parrafo");
    var boton = document.getElementById("boton");

    function cambiar() {
        parrafo.style.color = "olive";
    }

    // ❌ ERROR: ejecuta cambiar() AHORA MISMO
    boton.onclick = cambiar();  // ← Con paréntesis
</script>
</body>
</html>

📝 Explicación del ERROR:

  • cambiar() con paréntesis = ejecuta la función inmediatamente

  • El color cambia al cargar la página, sin necesidad de hacer clic

  • boton.onclick recibe el resultado de la función (que es undefined)

  • ❌ El botón NO hará nada cuando hagas clic

📊 Comparativa final

EjemploCódigo¿Funciona?¿Cuándo cambia el color?
1onclick="alert('click')"✅ SíAl hacer clic
2onclick = function() {...}✅ SíAl hacer clic
3onclick = cambiar✅ SíAl hacer clic
4onclick = cambiar()❌ NoInmediatamente (error)

📚 ¿Qué son las funciones anónimas?

javascript
// Función NORMAL con nombre
function saludar() {
    console.log("Hola");
}

// Función ANÓNIMA (sin nombre)
function() {
    console.log("Hola");
}

// Las anónimas se usan comúnmente así:
boton.onclick = function() {
    console.log("Hola");
};

// O como callback
setTimeout(function() {
    console.log("Pasó 1 segundo");
}, 1000);

Características:

  • No tienen nombre reutilizable

  • Se usan una sola vez (generalmente)

  • Son perfectas para eventos cortos

  • También existen como arrow functions: () => {...}

javascript
// Función anónima tradicional
boton.onclick = function() {
    parrafo.style.color = "olive";
};

// Arrow function (misma idea, sintaxis moderna)
boton.onclick = () => {
    parrafo.style.color = "olive";
};

🎯 Regla de oro (repaso)

Si escribes...Significa...
cambiarLa función misma (para ejecutar DESPUÉS)
cambiar()El resultado de la función (ejecutar AHORA)
function() {...}Función anónima (sin nombre)
() => {...}Función flecha anónima

¿Ahora te queda más clara la diferencia entre los 4 ejemplos?


1. Funciones anónimas

Son funciones sin nombre. Se definen en el lugar donde se van a usar, normalmente como argumento de otra función o asignadas a una variable.

Ejemplo clásico (sin asignar a variable):

javascript
setTimeout(function() {
  console.log("Pasó 1 segundo");
}, 1000);

Ejemplo asignado a variable:

javascript
const saludar = function(nombre) {
  return "Hola " + nombre;
};

console.log(saludar("Ana")); // "Hola Ana"

2. Funciones tipo flecha (arrow functions)

Es una forma más corta de escribir funciones anónimas. Se escriben con =>. Tienen algunas diferencias importantes (como el comportamiento de this), pero para empezar, piensa en ellas como una sintaxis más limpia.

Sintaxis básica:

javascript
// Función normal
const sumar = function(a, b) {
  return a + b;
};

// Arrow function equivalente
const sumarFlecha = (a, b) => a + b;

console.log(sumarFlecha(3, 5)); // 8

Casos especiales:

  • Un solo parámetro: puedes omitir paréntesis

  • Una sola expresión: puedes omitir {} y return

javascript
const doble = n => n * 2;
console.log(doble(4)); // 8

// Si necesitas varias líneas, usas {} y return explícito
const mayor = (a, b) => {
  if (a > b) return a;
  return b;
};

3. Funciones callback

Una callback es una función que se pasa como argumento a otra función, y esta la ejecutará más tarde (cuando termine algo, o cuando ocurra un evento).

Ejemplo simple:

javascript
function procesarUsuario(nombre, callback) {
  console.log("Procesando a " + nombre);
  callback(nombre);
}

procesarUsuario("Luis", function(n) {
  console.log("Terminé con " + n);
});
// Salida:
// Procesando a Luis
// Terminé con Luis

Callback con funciones anónimas y flecha:

javascript
// Con función anónima tradicional
[1, 2, 3].forEach(function(num) {
  console.log(num * 2);
});

// Con arrow function (más moderna y común)
[1, 2, 3].forEach(num => console.log(num * 2));
// 2, 4, 6

Ejemplo útil (simulando operación asíncrona):

javascript
function hacerTarea(tarea, callback) {
  console.log("Haciendo " + tarea + "...");
  setTimeout(() => {
    callback(tarea + " completada");
  }, 1000);
}

hacerTarea("limpiar", mensaje => {
  console.log(mensaje);
});
// Después de 1 segundo: "limpiar completada"

Resumen rápido

Concepto¿Qué es?Ejemplo mínimo
Función anónimaFunción sin nombrefunction(x){ return x*2; }
Arrow functionSintaxis corta de función anónimax => x*2
CallbackFunción pasada a otra funciónalgo( (resultado) => {...} )

Y lo mejor: puedes combinarlos. Las arrow functions se usan mucho como callbacks porque son más limpias:

javascript
// Callback con arrow function
boton.addEventListener("click", () => {
  console.log("Click!");
});

¿Necesitas ahondar en algún punto en particular?

Comentarios

Publicar un comentario

Entradas más populares de este blog

1-valores duplicados en un arreglo

 Debes encontrar valores duplicados en un arreglo de números enteros y  regresar un arreglo con los números que se repitan exactamente 2 veces. Prueba tu algoritmo para los siguientes casos: [4,3,2,7,8,3,1]=[32] [1,1,2] = [1] [1]=[] ¿Qué es un arreglo? Un   arreglo   (o array) es una estructura de datos que almacena una colección de elementos en un orden específico. Piensa en él como una   lista ordenada   donde cada elemento tiene una posición numerada. Características principales: Elementos : Pueden ser números, texto, objetos, etc. Índices : Cada elemento tiene una posición (empezando desde 0) Orden : Los elementos mantienen el orden en que fueron agregados Ejemplo visual: javascript // Arreglo de números let numeros = [ 4 , 3 , 2 , 7 , 8 , 3 , 1 ] ; // Posiciones (índices): // índice: 0 1 2 3 4 5 6 // valor: 4 3 2 7 8 3 1 Acceso a elementos: javascript console . log ( numeros [ 0 ] ) ; // 4 (primer elemento) console . log (...
Leer más

n-funcion - el botón-n

  En el botón: ¿QUIÉN ejecuta la función? javascript // TÚ escribes esto: const saludar = () => {     console . log ( "🔥 EJECUTANDO" ); }; // Le DICES al botón: "aquí tienes la función, tú ejecútala cuando hagan click" boton . addEventListener ( "click" , saludar ); //                           ↑ //                     Sin () - solo pasas la función // ¿QUIÉN ejecuta saludar() después? // ¡EL NAVEGADOR! Cuando el usuario hace click El navegador ejecuta por ti (como Express) javascript // Simulación de cómo funciona addEventListener internamente class Boton {      constructor () {          this . eventos = {};   // Donde guarda las funciones      }           // Este es addEventListener      cli...
Leer más

Objetos básicos en JavaScript

  1. Objetos en JavaScript Un objeto es como un contenedor que guarda datos (propiedades) y acciones (métodos/funciones). javascript // Creando un objeto vacío const miObjeto = {}; // Objeto con propiedades const persona = {      nombre : 'Juan' ,       // propiedad con valor string      edad : 30 ,           // propiedad con valor número      casado : false       // propiedad con valor boolean }; console . log ( persona . nombre );   // "Juan" console . log ( persona . edad );     // 30 2. Acceder a elementos de un objeto Hay dos formas de acceder: javascript const productoController = {      nombre : 'Controlador de Productos' ,      version : '1.0' }; // Forma 1: Notación de punto (la más común) console . log ( productoController . nombre );   // "Controlador de Productos" // Forma 2: Notación ...
Leer más