ES6: Fat Arrows Functions en JavaScript

Las Fat Arrows Functions o simplemente Arrows Functions (funciones de tipo flecha, por su traducción al español) posiblemente sean de las características más sobresalientes de JavaScript con ES6 amén de ser bastamente usadas en la actualidad, pero, ¿que son exactamente?

¿Qué es una Arrow Function?

Las funciones de tipo flecha es una nueva manera de escribir funciones en JavaScript de una manera mucho más legible, corta, y sencilla de comprender.

Sintaxis

Dependiendo del cuerpo y los parámetros de la función es posible simplificar bastante su sintaxis, pero a grandes rasgos se podría decir que su sintaxis general es la siguiente:

(parametros) => {
// cuerpo de la funcion
}

El símbolo => que asemeja a una flecha es el motivo por el cual este tipo de funciones reciben su nombre.

Para comprender y recordar de una mejor manera estas la sintaxis de estas funciones, me parece que es preciso recordar el funcionamiento básico de una función:

Una función cualquiera consta de 3 partes fundamentales:

1. Parámetros de entrada o input.
2. Cuerpo (donde se procesan los parámetros de entrada).
3. Salida u output.

Recordando esto, podríamos reescribir la sintaxis de una función de tipo flecha de la siguiente manera:

(input) => {
//cuerpo
//return salida;
}

Los parámetros de entrada se escriben entre paréntesis, la flecha => indica que dichos datos de entrada se procesaran mediante alguna lógica para obtener una salida.

Reescribiendo una función tradicional a una función de tipo flecha

Imaginemos que contamos con una función fullName() que lo único que hace es retornar el nombre completo de una persona.

function fullName(name,last_name){
  return `${name} ${last_name}`;
}

console.log(fullName("Roberto","Castro")); 
//Roberto Castro

Es posible convertir la función usando sintaxis de arrow function de la siguiente manera:

const fullName = (name,last_name) => {
  return `${name} ${last_name}`;
}
console.log(fullName("Alicia","Robles"));
//Alicia Robles

Se acostumbra guardar la arrow function en una constante o variable

Ahora que se mencionó lo básico, podemos ahondar un poco más en las características de su sintaxis.

Arrows Functions sin parámetros

Si necesitamos escribir una función de tipo flecha sin parámetros, necesariamente debemos escribir los paréntesis de entrada pero vacíos:

const HolaMundo = () => {
  return "Hola mundo";
}
console.log(HolaMundo()); //Hola Mundo

Arrows Functions con un solo parámetro

Si nuestra arrow function solo recibe un parámetro podemos omitir los paréntesis del input:

let numeros = [1,2,3,4,5];
const min = numeros =>{
  return Math.min(...numeros);
}
console.log(min(numeros)); //1

Arrows Functions con return implícito

Si la función retorna una sola línea de código es posible omitir las llaves de apertura y cierre, además de la palabra clave return, de la siguiente manera:

let numeros = [1,2,3,4,5];
const min = numeros => Math.min(...numeros);
console.log(min(numeros)); // 1

Arrows Functions con cuerpo

Si el cuerpo de la función está compuesto por varias líneas de código es necesario el uso de las llaves de apertura y de cierre.

//función que obtiene el cubo de cada uno de los items del arreglo numeros
let numeros = [1,2,3,4,5];
const recorreArreglo = arr => {
  return arr.map(function(item){
    return item**3;
  });
}
console.log(recorreArreglo(numeros)); //[1, 8, 27, 64, 125]

Contexto this en Arrows Functions

La principal diferencia entre una función clásica y una arrow function es la implementación de this. En una función tradicional this varía dependiendo a donde se escriba la función, por ejemplo:

const perro ={
  saludarPerro: function(){
    setTimeout(function(){
      this.saludar();
    },3000);
  },

  saludar:function(){
    alert("Hola");
  }
}

perro.saludarPerro(); //  Uncaught TypeError: this.saludar is not a function

A simple vista este ejemplo debería funcionar sin ningún inconveniente, el problema radica que al crear un nueva función dentro de otra también se crea un nuevo contexto.

La solución es usar una arrow function:

const perro ={
  saludarPerro: function(){
    setTimeout(() => {
    },3000);
  },

  saludar:function(){
    alert("Hola");
  }
}
perro.saludarPerro();

Ahora si se obtendrá un alert por pantalla con el texto "Hola".

this y su funcionamiento se explica de manera más detallada en este enlace.

Conclusiones ✔

• Las fat arrows functions, arrows functions o funciones de tipo flecha mejoran la legibilidad del código por la simpleza de su implementación.

• La sintaxis (entradas) => {salida} asemeja a un proceso de entrada de datos, proceso y salida de datos.

• Si la función tipo flecha solo necesita un parámetro se pueden omitir los paréntesis de declaración, el motor de javascript comprenderá que solo se requiere un parámetro y funcionará a la perfección.

• Si la función de tipo flecha solo retorna una línea de código, es posible omitir las llaves de salida de datos y también la palabra reservada return, el motor de javascript usará un return implícito.

• Se acostumbra almacenar la arrow function en una variable let o const.

• Las arrows functions resolver el problema clásico de this en el lenguaje.

• Este tipo de escribir funciones se usan bastante en librerías front-end modernas como React.js.

Referencias 📎

• https://www.w3schools.com/js/js_arrow_function.asp
• https://desarrolloweb.com/articulos/arrow-functions-es6.html

Puedes leer más artículos de mi autoria relacionados con JavaScript en la siguiente lista: