Curso de JavaScript de función de flecha – ¿Cómo Declarar una Función JS con la Nueva Sintaxis ES6?

Probablemente hayas visto funciones de flecha escritas de varias formas distintas.

//ejemplo 1
const sumaDos = (num) => {return num + 2;};

//ejemplo 2
const sumaDos = (num) => num + 2;

//ejemplo 3
const sumaDos = num => num + 2;
 
//ejemplo 4
const sumaDos = a => {
 const valorNuevo = a + 2;
 return valorNuevo;
};

Algunas tienen paréntesis alrededor de los parámetros mientras que otras no.  Algunas utilizan corchetes y la palabra clave return, otras no. Una incluso se extiende en múltiples líneas mientras que las otras consisten en una línea simple.

Curiosamente, cuando invocamos las funciones de flecha de arriba con el mismo argumento, obtenemos el mismo resultado.

console.log(sumaDos(2));
//Resultado: 4

¿Cómo sabes cuál sintaxis de función de flecha usar? Eso es lo que cubrirá este artículo: cómo declarar funciones de flecha.

Una Gran Diferencia

Las funciones de flecha son otra forma – más concisa – de escribir expresiones de funciones. Sin embargo, ellas no tienen su propio enlazamiento con la palabra clave this.

//Expresión de Función
const sumaNumeros = function(numero1, numero2) {
   return numero1 + numero2;
};

//Expresión de Función de Flecha
const sumaNumeros = (numero1, numero2) => numero1 + numero2;

Cuando invocamos estas funciones con los mismos argumentos obtenemos el mismo resultado.

console.log(sumaNumeros(1, 2));
//Resultado: 3

Hay una diferencia sintáctica muy importante para tener en cuenta: las funciones de flecha utilizan la flecha => en lugar de la palabra clave function. Existen otras diferencias para tener presentes cuando componemos funciones de flechas y eso es lo que vamos a explorar a continuación.

Paréntesis

Algunas funciones de flecha tienen paréntesis alrededor de los parámetros y otras no.

//Ejemplo con paréntesis
const sumaNumeros = (num1, num2) => num1 + num2;

//Ejemplo sin paréntesis
const sumaDos = num => num + 2;

Resulta que el número de parámetros que tiene una función de flecha determina si necesitamos incluir paréntesis o no.

Una función de flecha con cero parámetros requiere paréntesis.

const hola = () => "hola";
console.log(hola());
//Resultado: "hola"

Una función de flecha con un parámetro no requiere paréntesis. En otras palabras, los paréntesis son opcionales.

const sumaDos = num => num + 2;

Podemos agregar paréntesis al ejemplo de arriba y la función de flecha todavía funciona.

const sumaDos = (num) => num + 2;
console.log(sumaDos(2));
//Resultado: 4

Una función de flecha con múltiples parámetros requiere paréntesis.

const sumaNumeros = (num1, num2) => num1 + num2;
console.log(sumaNumeros(1, 2));
//Resultado: 3

Las funciones de flechas también permiten los parámetros rest y la desestructuración. Ambas características requieren paréntesis.

Este es un ejemplo de una función de flecha con el parámetro rest.

const nums = (primero, ...resto) => resto;
console.log(nums(1, 2, 3, 4));
//Resultado: [ 2, 3, 4 ]

Aquí hay una que utiliza desestructuración.

const ubicación = {
   país: "Greece",
   ciudad: "Athens"
};

const viaje = ({ciudad}) => ciudad;

console.log(viaje(ubicación));
//Resultado: "Athens"

Para resumir: si solo hay un parámetro —y no estás usando los parámetros rest o desestructuración —entonces los paréntesis son opcionales. De lo contrario, asegúrate de incluirlos.

El Cuerpo de la Función

Ahora que tenemos las reglas de los paréntesis cubiertas, nos enfoquemos en el cuerpo de la función de una función de flecha.

Un cuerpo de función de flecha puede tener "cuerpo conciso" o "cuerpo en bloque".  El tipo de cuerpo influye en la sintaxis.

Primero, la sintaxis de “cuerpo conciso”.

const sumaDos = a => a + 2;

La sintaxis de “cuerpo conciso” es justamente eso: ¡es conciso! No usamos la palabra clave return o corchetes.

Si tienes una función de flecha de una línea (como la del ejemplo de arriba), entonces el valor es devuelto implícitamente. Por lo tanto puedes omitir la palabra clave return y los corchetes.

Ahora veamos la sintaxis de “cuerpo en bloque”.

const sumaDos = a => {
    const total = a + 2;
    return total;
}

Fíjate que utilizamos ambos, los corchetes y la palabra clave return en el ejemplo de arriba.

Normalmente vemos esta sintaxis cuando el cuerpo de la función tiene más de una línea. Esto es un punto clave: envolver el cuerpo de la función de flecha de varias líneas entre corchetes y usar la palabra clave return.

Objetos y Funciones de Flecha

Existe un matiz de sintaxis más para conocer: envolver el cuerpo de la función en paréntesis cuando quieres devolver objetos literales.

const f = () => ({
 ciudad:"Boston"
})
console.log(f().ciudad)

Sin los paréntesis, nos da un error.

const f = () => {
   ciudad:"Boston"
}
//Resultado: error

Si encuentra la sintaxis de la función de flecha un poco confusa, no está solo. Lleva algo de tiempo familiarizarse con ello. Pero conocer sus opciones y requisitos son pasos en esa dirección.

Escribo sobre aprender a programar y las mejores formas de hacerlo (amymhaddad.com).

Traducido del artículo de Amy Haddad - Arrow Function JavaScript Tutorial – How to Declare a JS Function with the New ES6 Syntax