ES6: Fat Arrows Functions en JavaScript
Tags: javascript, webdev, es6, spanish
Published: 2020-08-21 15:34:28

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: 

```javascript
(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:

![funcion](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Function_machine2.svg/440px-Function_machine2.svg.png)

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:

```js
(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.

```js
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:

```js
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:

```js
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:

```js
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:

```js
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.

```js
//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:

```js

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:

```js

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](https://dev.to/crisfer4217/this-en-javascript-5782) 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

![end](https://media.giphy.com/media/9nABcoXr2lqUM/giphy.gif)

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