Funciones anónimas en JavaScript

Autor: | Última modificación: 16 de enero de 2023 | Tiempo de Lectura: 3 minutos
Temas en este post:

JavaScript es un lenguaje de programación con una sintaxis basada en objetos. Uno de estos objetos son las funciones, 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 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!