Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] SINTAXIS FUNCION FLECHA

Hola, me gustaria saber por qué al usar la funcion flecha asignada a la variable createTask con el metodo addEventListener no se le ponen parentesis vacios a la variable createTask. (btn.addEventListener('click', createTask)) Pero si se le colocan los parentesis dentro de un console.log y dentro de un template string a la funcion flecha asignada a la variable checkComplete . (console .log(checkComplete ()))

muchas gracias

1 respuesta

Hola Diego,

Cuando pones parentesis en una llamada de función, estás ejecutando la función de inmediato. En el caso de la variable createTask, al pasarla como argumento en addEventListener, no se le añaden paréntesis vacíos porque no queremos invocar la función en ese momento. En cambio, queremos que la función createTask se ejecute cuando se haga clic en el botón. Si añadiéramos los paréntesis, la función se ejecutaría inmediatamente y el resultado de la función (si es que devuelve algo) se pasaría como argumento en addEventListener, lo cual no es lo que queremos.

Por ejemplo en el console.log abajo:

function sumar() {
    return 2 + 2;
}

console.log(sumar()); // Resultado 4; 
console.log(4); // Resultado 4;

El resultado es 4 en los dos console.log, porque en cada console, lo que realmente está pasando es el valor 4 que es el resultado de la función sumar y no la función en sí. Si el resultado de función fuera vacío, el console.log imprimiría "undefined"(indefinido).

Pero si pasamos sin los paréntesis, lo que estamos haciendo es pasar la referencia de la función, para que la función que la recibe pueda usar nuestra función en su bloc de código.

function sumar() {
    return 2 + 2;
}

console.log(sumar); // Resultado [Function: sumar];

Entonces en el ejemplo que dijiste del método addEventListener, estamos pasando la referencia o dirección de la función createTask como parámetro y el método addEventListener está agregando nuestra función al evento de click del mouse.

Por otro lado, en el caso de checkComplete, si queremos invocar la función en ese momento, por eso se añaden los paréntesis. En el ejemplo que mencionas, console.log(checkComplete()), estamos llamando a la función checkComplete y mostrando el resultado en la consola. En el caso del template string, también estamos invocando la función para obtener su resultado y luego insertándolo en el template string.

Espero que esto aclare tus dudas. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Estoy aquí para ayudarte!

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!