¿Cómo escribir arrow functions en JavaScript?

Autor: | Última modificación: 18 de julio de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

Escribir funciones en JavaScript nos permite crear acciones que tengan siempre el mismo resultado, pero con valores modificables. En este lenguaje de programación, hay distintas maneras de escribir una función. En este post, te enseñaremos cómo escribir arrow functions en JavaScript para simplificar tu código.

¿Qué son las arrow functions en JavaScript?

Las arrow functions son una forma distinta de escribir funciones en JavaScript usando el símbolo de flecha o arrow =>. Esta nueva sintaxis fue introducida por el estándar ECMA Script 6, desarrollado para JavaScript en el 2015 como una manera de simplificar la escritura de funciones tradicional. Te invitamos a leer nuestro post sobre cómo escribir funciones en JavaScript para conocer sus otros modos de escritura.

Escribir arrow functions en JavaScript simplifica las funciones tradicionales, ya que puede eliminar la necesidad de escribir los keywords «function» y «return» en la función. Además, puede eliminar los símbolos de llave { } como una forma de definir el cuerpo de la función. A continuación, te presentamos exactamente cómo funcionan.

¿Cómo escribir arrow functions en JavaScript?

Para ver la diferencia entre el modo de escritura tradicional y las arrow functions, partiremos del modo de escritura por medio de variables. Recordemos que, en el siguiente ejemplo, queremos crear a partir de esta función una función constante e inmutable llamada hello 2, que nos devuelve siempre el surname «Skywalker» y que tiene flexibilidad en la variable name.

const hello 2 = function (name, surname = ‘Skywalker’) {

return ‘Hello ${name} ${surname}!’;

}

A continuación, te presentamos diferentes niveles de simplificación al escribir arrow functions en JavaScript.

Eliminar function

Una forma de escribir arrow functions en JavaScript es eliminar la keyword «function» y añadir el símbolo de flecha entre el final del paréntesis de la función y el inicio de la llave. A continuación, te mostramos el resultado:

const hello3 = (name, surname = ‘Skywalker’) => {

return ‘Hello ${name} ${surname}!’;

}

Como puedes ver, esta forma de escribir arrow functions en JavaScript hace más corto nuestro código inicial.

Eliminar las llaves { }

Además de eliminar el keyword «function», podemos eliminar las llaves que definen el cuerpo de la función. Esta forma de escribir arrow functions en JavaScript nos permite escribir la función en una sola línea de código.

const hello4 = (name, surname = ‘Skywalker’) => ‘Hello ${name} ${surname}!’

Ten muy presente que todas las funciones que hemos visto en este post ejecutan la misma acción, que es escribir un string usando dos parámetros. Sin embargo, un arrow function puede ser aún más corto si definimos un solo parámetro.

Eliminar paréntesis

Cuando tenemos una función con un solo parámetro, podemos eliminar los paréntesis que definen los parámetros de la función. Supongamos entonces que solo tenemos el parámetro name:

const hello5 = name => ‘Hello ${name}!’

Aunque es una función muy simplificada, te sugerimos utilizarla solo cuando estés seguro de que tu función requiere un único parámetro. Este es un caso muy especial, pues nuestro código casi siempre está en constante cambio.

¿Qué sigue?

Ahora que sabes cómo escribir arrow functions en JavaScript, ¡puedes empezar a utilizarlas para simplificar las líneas de código de tus próximos proyectos! Te invitamos a que seas parte de nuestro Desarrollo Web Full Stack Bootacmp, donde, además de aprender todo lo necesario para desarrollar con JavaScript, aprenderás sobre otros lenguajes de programación para web, como HTML. ¡Apúntate ahora!

👉 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]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software 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! 

¿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!