1

Tengo un botón al que le he añadido un evento para que, cuando se haga clic en él, muestre por consola el mensaje "Hola". Sencillo ¿verdad? Pues tengo dudas :S.

Cuando pongo en el segundo parámetro del addeventlistener el nombre de la función con paréntesis, para invocarla, al cargar la página aparece el "hola" por consola sin haber hecho clic en el botón y no entiendo porqué. Y cuando le doy al botón, no hace nada. Dejo abajo el código:

<button id="saludar">Saludar</button>

<script >
    let btnSaludar = document.getElementById("saludar");

    btnSaludar.addEventListener("click", saludar());

    function saludar() {
        console.log("Hola!")
    }
</script>

Sin embargo, si le quito los paréntesis a la función y no la invoco, funciona correctamente y sólo muestra el "hola" por consola cuando hago clic en el botón, que es el comportamiento que quiero. El problema es que no entiendo porqué tengo que quitarle los paréntesis porque, en el caso de que necesite pasarle algún parámetro, como el nombre para que salude diciendo "Hola Pepito", ¿cómo lo tendría que hacer?

<button id="saludar">Saludar</button>

<script >
    let btnSaludar = document.getElementById("saludar");

    btnSaludar.addEventListener("click", saludar);

    function saludar() {
        console.log("Hola!")
    }
</script>

Gracias de antemano

2 respuestas 2

1

Si pones los paréntesis, lo que hace es que se ejecute la función en ese momento, por eso tiene que ir sin ellos, para que se ejecute cuando indica el listener. Si tienes que mandar parametros tienes que hacerlo con una arrow function.

btnSaludar.addEventListener("click", () => saludar(parametro1, parametro2));

Vamos, que lo que recibe el listener es una callback, y al ponerle los parentesis, ya no lo es, porque sería el resultado de la ejecución de la función indicada

1
  • Mil gracias por la explicación. Leeré un poquito más acerca de las arrow function y el callback para acabar de entender mejor el funcionamiento, pero me ha quedado bastante claro el porqué no usar los paréntesis y el cómo llamar con parámetros :)
    – Sandra
    Commented el 5 dic. 2023 a las 16:07
1

Porque debes distinguir entre Una función y el retorno de la función (son 2 cosas distintas), cuando usas los () estas invocando la función y pasando el retorno de ella como argumento

Nota: En js una función que no cuenta con return, retorna undefinied

Un ejemplo

function UnaFuncion(){
  return "Hola";
}

function OtraFuncion(argumento){
  console.log(argumento)
}

OtraFuncion(UnaFuncion());
OtraFuncion(UnaFuncion);

Javascript permite pasar como argumento de una función otra función ¿Para qué?, bueno para invocarla, muchas veces (como tu caso) para generar una técnica llamada callback

Cunado pasas una función puedes hacer lo por su nombre o implementandola directamente en el argumento ("funciones anónimas") ya sea del modo "normal" o con arrow function. Para pasar un argumento a la función que va como argumento no es posible realizarlo con su nombre, por lo que te queda la funciones anónimas

function saludar(nombre) {
    console.log("Hola! " + nombre)
}

function Otrafuncion(fn){ //Esto vendría ser el addEventListener
  fn();
}

//pasar la función por su nombre
//no es posible pasar los argumentos a la función saludar
Otrafuncion(saludar)


//Crear una función anonima "normal"
Otrafuncion(function(){
  saludar("Pepito");
})

//Crear una función anonima con arrow function
Otrafuncion( () => saludar("Pepito"));

1
  • Muchas gracias por la explicación. La verdad es que me queda más claro el porqué no debo añadir los paréntesis de la función al añadir la función al segundo parámetro del listener, aunque todavía hago un poco de cortocircuito cuando veo funciones dentro de funciones, así que trataré de revisar el tema de los callback con cariño.
    – Sandra
    Commented el 5 dic. 2023 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.