Tutorial de JavaScript de función de flecha: cómo declarar una función JS con la nueva sintaxis de ES6

Probablemente hayas visto las funciones de flecha escritas de diferentes formas.

//example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTwo = a => { const newValue = a + 2; return newValue; }; 

Algunos tienen paréntesis alrededor de los parámetros, mientras que otros no. Algunos usan llaves y elreturnpalabra clave, otros no. Uno incluso abarca varias líneas, mientras que los otros constan de una sola línea.

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

console.log(addTwo(2)); //Result: 4 

¿Cómo sabe qué sintaxis de función de flecha usar? Eso es lo que descubrirá este artículo: cómo declarar una función de flecha.

Una gran diferencia

Las funciones de flecha son otra forma más concisa de escribir expresiones de función. Sin embargo, no tienen su propia vinculación a la thispalabra clave.

//Function expression const addNumbers = function(number1, number2) { return number1 + number2; }; //Arrow function expression const addNumbers = (number1, number2) => number1 + number2; 

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

console.log(addNumbers(1, 2)); //Result: 3 

Hay una diferencia sintáctica importante a tener en cuenta: las funciones de flecha usan la flecha en =>lugar de la functionpalabra clave. Hay otras diferencias que debe tener en cuenta cuando escribe funciones de flecha, y eso es lo que exploraremos a continuación.

Paréntesis

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

//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2; 

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

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

const hello = () => "hello"; console.log(hello()); //Result: "hello" 

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

const addTwo = num => num + 2; 

Entonces podemos agregar paréntesis al ejemplo anterior y la función de flecha aún funciona.

const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4 

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

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

Las funciones de flecha también admiten parámetros de descanso y desestructuración . Ambas características requieren paréntesis.

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

const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ] 

Y aquí hay uno que usa la desestructuración .

const location = { country: "Greece", city: "Athens" }; const travel = ({city}) => city; console.log(travel(location)); //Result: "Athens" 

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

El cuerpo funcional

Ahora que hemos cubierto las reglas del paréntesis, pasemos al cuerpo de la función de una función de flecha.

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

Primero, la sintaxis de "cuerpo conciso".

const addTwo = a => a + 2; 

La sintaxis del “cuerpo conciso” es solo eso: ¡es conciso! No usamos elreturnpalabra clave o corchetes.

Si tiene una función de flecha de una línea (como el ejemplo anterior), el valor se devuelve implícitamente. Entonces puedes omitir elreturnpalabra clave y las llaves.

Ahora veamos la sintaxis del "cuerpo del bloque".

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

Observe que usamos tanto llaves como la returnpalabra clave en el ejemplo anterior.

Normalmente ve esta sintaxis cuando el cuerpo de la función tiene más de una línea. Y ese es un punto clave: envuelva el cuerpo de una función de flecha de varias líneas entre llaves y use elreturnpalabra clave.

Objetos y funciones de flecha

Hay un matiz de sintaxis más que debe conocer: coloque el cuerpo de la función entre paréntesis cuando desee devolver una expresión literal de objeto.

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

Sin los paréntesis, obtenemos un error.

const f = () => { city:"Boston" } //Result: error 

Si encuentra la sintaxis de la función de flecha un poco confusa, no está solo. Lleva algún tiempo familiarizarse con él. 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).