Cuándo y por qué vale la pena usar las funciones de flecha ES6, y cuándo no

Hola Habr! Te presento la traducción del artículo " Cuándo (y por qué) deberías usar las funciones de flecha ES6, y cuándo no deberías " por Cynthia Lee.

Las funciones de flecha son la característica más popular de ES6. Esta es una forma nueva y concisa de escribir funciones.

function timesTwo(params) { return params * 2 } timesTwo(4); // 8 

Ahora lo mismo con la función de flecha.

 var timesTwo = params => params * 2 timesTwo(4); // 8 

¡Mucho más corto! Podemos omitir las llaves y la declaración de retorno (si no hay bloque, pero más sobre eso más adelante).

Veamos cómo el nuevo método difiere del habitual.

Sintaxis

Lo primero que notará rápidamente son las diversas variaciones de sintaxis. Veamos los principales:

1. Sin parámetros

Si la función no tiene parámetros, simplemente puede escribir paréntesis vacíos antes =>

 () => 42 

De hecho, ¡puedes prescindir de los paréntesis!

 _ => 42 

1. Un parámetro

Los paréntesis también son opcionales

 x => 42 || (x) => 42 

3. Varios parámetros

Aquí necesitamos paréntesis

 (x, y) => 42 

4. Instrucciones

Por lo general, una expresión funcional devuelve un valor, mientras que una instrucción es responsable de la acción.

Debe recordarse que en el caso de las funciones de flecha, si tenemos algún conjunto de acciones / instrucciones, debemos usar llaves y la declaración de retorno.
Aquí hay una función de flecha de ejemplo utilizada con la instrucción if:

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } } 

5. El cuerpo del bloque fúngico

Incluso si su función simplemente devuelve valores, pero su cuerpo está entre llaves, se requiere la declaración return.

 var addValues = (x, y) => { return x + y } 

6. Objeto literal

Si la función devuelve un objeto literal, debe encerrarse entre paréntesis.

 x =>({ y: x }) 

Funciones de flecha - Anónimo

Tenga en cuenta que las funciones de flecha son anónimas; no tienen nombre.

Esto crea algunas dificultades:

1. Difícil de degradar
   
   Cuando esto sucede, no podrá rastrear el nombre de la función y el número de línea donde ocurrió el error.
   
2. No se puede asignar a una variable
   
   Si necesita un enlace dentro de la función para sí mismo para algo (recursividad, un controlador de eventos que debe deshacerse), nada funcionará
   

Ventaja principal: no esto

En funciones regulares, esto indica el contexto en el que se llama a esta función. este de la función de flecha es el mismo que el del entorno en el que se declara la función de flecha.

Por ejemplo, mira la función setTimeout a continuación:

 // ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } }; 

En el ejemplo anterior, debe usar .bind (this) para pasar el contexto a la función. De lo contrario, esto será indefinido.

 // ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } }; 

En este ejemplo, no necesita vincular esto. La función de flecha tomará esto del cierre.

Cuándo usar las funciones de flecha

Ahora, creo, quedó claro que las funciones de flecha no reemplazan a las ordinarias.

Aquí hay algunos ejemplos cuando es poco probable que desee utilizarlos.

1. Métodos de objeto

Cuando llamas a cat.jumps, el número de vidas no disminuye. Esto se debe a que esto no está vinculado a nada y hereda el valor del cierre.

 var cat = { lives: 9, jumps: () => { this.lives--; } } 

2. Funciones de devolución de llamada con contexto dinámico

Si necesita un contexto dinámico, una función de flecha es una mala opción.

 var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); }); 

Si hacemos clic en el botón, obtenemos un TypeError. Esto se debe a que esto no está vinculado a un botón.

3. Cuando la legibilidad del código empeora

Con las funciones habituales, siempre está claro lo que quería decir. Con las puntas de flecha, dadas las variadas opciones de sintaxis, algunas cosas se vuelven menos obvias.

¿Cuándo vale la pena usar las funciones de flecha?

Las funciones de flecha son excelentes para casos en los que no necesita su propio contexto de función.

También me gusta mucho usar las funciones de flecha en todo tipo de map y reduce : el código se lee de esta manera mejor.