Funciones flecha en

Acerca de Funciones flecha

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

En este concepto nos centraremos en la sintaxis que se usa 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 cubrirá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. declara el identificador addUpTwoNumbers como una const
3. agrega una flecha gruesa =>

Si el cuerpo de la función contiene solo una sentencia return, como en el ejemplo de arriba, 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 solo devolver un objeto desde una función flecha, se necesitan paréntesis alrededor del objeto para poder omitir la sentencia 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 de la cantidad 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 los parámetros rest y la desestructuración, también se pueden usar con una función flecha.