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 o funciones arrow en javascript para simplificar tu código.
¿Qué son las arrow functions en JavaScript?
Las arrow functions o funciones flecha javascript son una forma distinta de escribir funciones en JavaScript usando el símbolo de flecha o arrow =>, que determina el arrow function en javascript. 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 los elementos de arrow function en javascript.
¿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 o funciones flecha 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» o funciones flecha javascript, 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
Otra forma para escribir arrow function en javascript o funciones arrow en javascript es la de 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 o funciones arrow 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!
