Arrow Functions en Javascript (Funciones Flecha)

Desde la implementación de ES6 podemos declarar funciones de una manera más corta en nuestro código Javascript. Es otra forma de trabajar y tiene sus diferencias de las funciones comunes, una vez se conoce el proceso y con práctica, resulta ser muy cómodo y versátil de usar.

No se limita solo a Javascript, muchos otros lenguajes de programación han ido adaptando esta versión corta Arrow Functions desde antes o después, se usa por lo corto y claro del código.

¿Qué son los Arrow Functions?

Una función de flecha no es más que una forma abreviada de declarar una función. La forma más sencilla de comprender esta sintaxis es convertir la declaración de función tradicional en una función de flecha.

Ejemplo

function saludar(nombre){
    console.log('Hola ' + nombre);
}

function saludar(nombre){

console.log('Hola ' + nombre);

}

Primero: no necesitamos la palabra clave “function”, así que eliminémosla y asignemos la función a una variable

let saludar = (nombre){
    console.log('Hola ' + nombre);
}

let saludar = (nombre){

console.log('Hola ' + nombre);

}

Segundo: no necesitamos usar los paréntesis () ni las llaves {} en cambio utilizamos una «flecha» => que de allí proviene el nombre «función flecha».

let saludar = nombre => console.log('Hola ' + nombre);

1	let saludar = nombre => console.log('Hola ' + nombre);

Listo, esa es la versión más corta de la misma función. Debemos usar paréntesis y llaves según se haga más complejo la función.

Múltiples parámetros

let saludar = (nombre, apellido) => console.log('Hola ' + nombre + ' ' + apellido);

1	let saludar = (nombre, apellido) => console.log('Hola ' + nombre + ' ' + apellido);

En este caso agregamos el apellido al saludo, como ahora son dos parámetros debemos usar paréntesis.

Llaves

Si la función a acortar es grande y con múltiples líneas, debemos agregar nuevamente las llaves y colocar un valor de retorno explícito «return».

let sumatoria = (num1, num2) => {
    let suma = num1 + num2;
    return suma;
}

let sumatoria = (num1, num2) => {

let suma = num1 + num2;

return suma;

}

Estas son unos ejemplos simples para explicar, también puede ser mucho más complejos utilizando arrays, clases, objetos y otros tipos de datos de javascript.

Toma en cuenta que, aunque ahora es largamente incluido por muchos navegadores, todavía puede haber algunos que no soporten este tipo de funciones, como por ejemplo internet explorer.