Funciones de flecha ( Arrow Functions) en JavaScript

ECMAScript 6 (ES6) introdujo la sintaxis de la función de flecha, una forma más corta de escribir funciones mediante el uso de la notación especial “fat arrow” =>.

Las funciones de flecha eliminan la necesidad de escribir la palabra función cada vez que se necesita crear una función. En su lugar, primero se incluye los parámetros dentro de parentesis () y luego agrega una flecha => que apunta al cuerpo de la función rodeado de llaves {} así:

const areaRectangulo = (base, altura) => {
    let area = base * altura;
    return area; 
};

JavaScript también proporciona varias formas de refactorizar la sintaxis de la función de flecha. La forma más condensada de la función se conoce como cuerpo conciso. Exploraremos algunas de estas técnicas a continuación:

1. Las funciones que toman un solo parámetro no necesitan que ese parámetro esté encerrado entre paréntesis. Sin embargo, si una función toma cero o múltiples parámetros, se requieren paréntesis.

//CERO PARAMETROS
Const nombreFuncion = () => {};

//UN PARAMETRO
Const nombreFuncion = parametroUno => {};

//DOS Y MAS PARAMETROS
Const nombreFuncion = (parametroUno, parametroDos) => {};

2. Una función de cuerpo compuesto por un bloque de una sola línea no necesita llaves. Sin las llaves, lo que evalúa esa línea se devolverá automáticamente. El contenido del bloque debe seguir inmediatamente a la flecha => y se puede eliminar la palabra clave return. Esto se conoce como retorno implícito.

//BLOQUE DE UNA SOLA LINEA
Const sumaNumeros = numero => numeroUno + numeroDos;

//BLOQUE MULTI LINEA
Const sumaNumeros = numero => {
    Const sum = numeroUno  +  numeroDos;
    return sum;
};

Entonces, si tenemos una función:

const numeroCuadrado = (num) => {
    return num * num;
};

Podemos refactorizar la función para:

const numeroCuadrado = num => num * num;

Observe los siguientes cambios:

• Los paréntesis alrededor de num se han eliminado, ya que tiene un solo parámetro.
• Las llaves {} se han eliminado ya que la función consiste en un bloque de una sola línea.
• La palabra clave return se ha eliminado ya que la función consiste en un bloque de una sola línea.

Para mas información sobre las funciones de flecha puede consultar la página web de Developer Mozilla: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

O la página web de W3Schools: https://www.w3schools.com/js/js_arrow_function.asp.