Funciones flecha en

Acerca de Funciones flecha

Además de las declaraciones de funciones y las expresiones de funciones, JavaScript también tiene otra sintaxis muy concisa para definir una función. Estas funciones se denominan funciones flecha.

En este concepto, nos centraremos en la sintaxis que se utiliza para escribir una función flecha. Hay diferencias en la forma en que funciona una función flecha, como el enlace de this, que se tratarán en otros conceptos.

Aquí tienes una comparación entre una declaración de función y una función flecha.

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

Arriba, verás que la sintaxis de la función flecha:

1. elimina la palabra clave function
2. ha declarado el identificador addUpTwoNumbers como una const
3. añade una flecha gruesa =>

Si el cuerpo de la función contiene solo una instrucción return, como en el ejemplo anterior, se pueden omitir las {} y la palabra clave return.

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

En el caso especial de devolver solo un objeto desde una función flecha, se necesitan paréntesis alrededor del objeto para poder omitir la instrucción return.

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

El uso de paréntesis alrededor de los parámetros depende del número de parámetros.

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

Otros conceptos como Parámetros rest y Desestructuración también se pueden usar con una función flecha.