Funciones de flecha en Javascript
On noviembre 20, 2021 by admin
Las funciones de flecha -también llamadas funciones de «flecha gorda», son una forma relativamente nueva de escribir funciones concisas en JavaScript. Han sido introducidas por las especificaciones de ECMAScript 6 y desde entonces se han convertido en la característica más popular de ES6. Las funciones de flecha nos permiten utilizar el operador de flecha gorda => para definir rápidamente funciones de JavaScript, con o sin parámetros. Podemos omitir las llaves y las palabras clave de función y retorno al crear una nueva función de JavaScript para escribir una sintaxis de función más corta. No sólo ahorran tiempo, sino que también producen funciones limpias y más legibles.
En este artículo, vamos a echar un vistazo a algunos escenarios del mundo real para crear funciones de flecha – utilizando ES6 frente a la antigua notación ECMAScript 5 para que podamos ver cómo las dos sintaxis se comparan entre sí.
La sintaxis de función de flecha más simple es cuando la función no tiene ningún parámetro. En el ejemplo siguiente, la sintaxis ECMAScript 5 declara una expresión de función y la asigna a la variable birthday. La salida es una simple cadena de texto en la consola, que dice «¡Feliz cumpleaños!»:
En la sintaxis de la función flecha, las llaves y las palabras clave de función y retorno desaparecen. Ahora, toda la función ocupa una sola línea. Los paréntesis vacíos indican que la función no tiene parámetros y la flecha gorda une el cuerpo de la función a los parámetros (actualmente inexistentes):
Un parámetro
Ampliemos el ejemplo anterior con un parámetro, concretamente el nombre. La antigua sintaxis de ES5 toma un parámetro y añade su valor a la cadena a devolver:
La sintaxis de la función arrow hace esencialmente lo mismo. Tenemos que encerrar el parámetro del nombre dentro de los paréntesis antes de la flecha gorda y omitir la palabra clave de retorno en el bloque de la función:
Dos parámetros
Podemos utilizar funciones de flecha con tantos parámetros como queramos. Por ejemplo, aquí tenemos el mismo ejemplo con dos parámetros, edad y nombre. Ahora, la función cumpleaños() requiere dos entradas para devolver la cadena. Primero, usemos ECMAScript 5:
Y, aquí está el mismo código con la nueva notación de ES6:
Literales de objeto
También podemos utilizar la sintaxis de la función flecha para declarar funciones setter que permiten a los usuarios establecer el valor de los literales de objeto. La función setBirthday() a continuación permite a los usuarios establecer el nombre y la edad de la persona que cumple años:
Al hacer uso de la notación de función de flecha, sólo se necesita una línea para definir la misma función setter:
Manipulación de arrays
También podemos utilizar funciones de flecha para manipular arrays de JavaScript. Por ejemplo, echemos un vistazo al array de personas que incluye tres literales de objetos, cada uno con una propiedad nombre y edad:
El método map() incorporado en JavaScript nos permite llamar a la misma función en cada elemento de la matriz. Usando la notación tradicional de ES5, podemos devolver la propiedad nombre de cada persona de la siguiente manera:
Con la notación de función flecha, podemos realizar la misma tarea en una sola línea:
Cuándo no usar funciones de flecha
Aunque las funciones de flecha tienen muchos casos de uso, también tienen algunas limitaciones. Hay algunos escenarios en los que no podemos o debemos utilizar la sintaxis de las funciones flecha.
Lo más importante es que no podemos crear constructores con funciones flecha. Si usamos la palabra clave new junto con la sintaxis de flecha gorda, la consola arrojará un error. Esto sucede porque JavaScript trata las funciones de flecha de la misma manera que los métodos de objetos. En consecuencia, no pueden tener métodos propios, lo que sería una característica esencial de los objetos de JavaScript. Además, no podemos utilizar la sintaxis de ES6 para declarar literales de objeto y funciones de devolución de llamada que contengan métodos que hagan uso de la palabra clave this, ya que las funciones de flecha tratan esto de una manera diferente.
Conclusión
Las funciones de flecha proporcionan a los desarrolladores una taquigrafía útil para escribir expresiones de función en JavaScript. La sintaxis de flecha gorda tiene muchos casos de uso, por lo que se ha convertido rápidamente en la función ES6 favorita de la comunidad de JavaScript. Si se utiliza de forma consistente, la nueva notación compacta puede ahorrar mucho tiempo y ancho de banda, y mejorar la legibilidad del código.
Gracias por leer.
Deja una respuesta