¿Sabes que es una funcion en javascript y cuáles son las funciones anónimas?
JavaScript es un lenguaje de programación con una sintaxis basada en objetos. Uno de estos objetos son las funciones en javascript , fundamentales para ejecutar cualquier acción que queramos en nuestro código. En este post, te enseñaremos algunas particularidades de las funciones anónimas en JavaScript, aquellas a las que no le declaramos nombre.
Un poco de contexto
En nuestro post sobre los métodos querySelector y querySelectorAll, hemos usado las siguientes líneas de código para explicar el impacto de este segundo método:
const buttonListElement = document.querySelectorAll
for (const button of buttonListElement) {
button.addEventListener (‘click’, ( ) => {
drawTime ( );
});
}
function drawTime ( ) {
document.getElementById («demo»).innerHTML = new Date ( );
}
Como puedes notar, en las anteriores líneas hemos decidido manejar eventos imperativos en frontend JavaScript e insertar una arrow function anónima que devuelve la función drawTime. A continuación, te mostramos la otra manera de escribir este código.
for (const button of buttonListElement) {
button.addEventListener (‘click’, drawTime);
}
En la sección de código anterior estamos insertando directamente la función drawTime como parámetro del método addEventListener. Esto quiere decir que el manejador del evento click será drawTime. La tercera opción para escribir este código, similar a la primera, es crear una función anónima con la palabra clave function:
for (const button of buttonListElement) {
button.addEventListener (‘click’, function ( ) {
drawTime ( );
});
}
Aunque estas tres formas de escribir un evento funcionan en nuestro contexto, debemos tener mucho cuidado con su uso. ¿Por qué? Pues porque las tres funciones se relacionan de maneras distintas con la palabra clave this.
Funciones anónimas en JavaScript y this
Las funciones anónimas en JavaScript son aquellas que no han sido declaradas con un nombre. En este lenguaje de programación, podemos declarar este tipo de elemento usando cualquiera de los modos de escribir funciones.
Es decir, podemos declarar funciones anónimas en JavaScript con arrow function, un modo de escritura que siempre es anónimo:
( ) => { }
O con la palabra clave function:
function ( ) { }
Como mencionamos antes, estas dos maneras de escribir funciones anónimas en JavaScript implican dos aproximaciones diferentes al entendimiento de this.
En la función de javascript anónima de tipo arrow function, la palabra clave this toma el valor del scope superior. Por su parte, en la función anónima de tipo function, el valor pertenece a quien ejecuta esta función. Por esto es muy importante reconocer las distintas maneras de escribir funciones anónimas en JavaScript, pues tu código puede tener resultados muy diferentes según como determines la función.
Ten en cuenta que en nuestro ejemplo anterior no hemos visto una diferencia en el resultado porque nuestra función drawTime no usa la palabra clave this y estamos atacando directamente al DOM.
Funciones no anónimas
También cabe resaltar que el efecto de escribir una función cambia incluso en las funciones declaradas por nombre. Supongamos que tenemos las siguientes dos maneras de ejecutar la función drawTime que hemos declarado antes, pero con algún valor en el parámetro:
button.addEventListener (‘click’, drawTime)
drawTime ( );
Las dos formas anteriores de ejecutar la función son muy distintas, porque en el primer caso la función drawTime se asigna como consecuencia o respuesta a un evento que sucede. Por ello, se ejecutará desde un contexto distinto al ejecutado en la segunda línea de código. En este sentido, el valor entre paréntesis de la función drawTime sería el evento:
function drawTime (event) {
document.getElementById (‘demo’).innerHTML = new Date
}
Ten presente que, aunque en las líneas anteriores hemos nombrado al parámetro automático como event, puedes llamarlo como quieras y representará el evento recibido igualmente. Sea cual sea el nombre que le pongas, este objeto nos dará información sobre el evento recibido en la función, como lo son el path y el target. Si quieres conocer más sobre este objeto, puedes insertar el comando console.log (event) dentro de la función drawTime. También puedes leer nuestro post sobre event.target en JavaScript.
¿Qué sigue?
Ahora que sabes qué son y cómo funcionan las funciones anónimas en JavaScript, te invitamos a seguir aprendiendo sobre las posibilidades de este y otros lenguajes de programación en nuestro Desarrollo Web Full Stack Bootcamp. En este espacio de formación intensiva aprenderás a dominar diversas herramientas y lenguajes como HTML, CSS, JavaScript y JSX. ¡No te lo pierdas y pide información!
