¿Cuándo se deben usar las funciones de flecha en ES6?

En este artículo, intentaremos comprender cuándo se deben usar las funciones de flecha en ES6 en lugar de la sintaxis de la función tradicional con la ayuda de algunos ejemplos.

Antes de analizar por qué deberíamos usar funciones de flecha, primero comprendamos los detalles básicos que están asociados con las funciones de flecha (incluida la sintaxis de las funciones de flecha y muchos más detalles).

Funciones de flecha: con la ayuda de la siguiente representación pictórica, intentaremos comprender los detalles básicos asociados con las funciones de flecha.

Como podemos visualizar que la sintaxis de función tradicional, el uso de llaves está ahí, seguido de la palabra clave de función y también requiere más número de líneas ejecutables, pero como podemos ver, el hecho de que las funciones de flecha permiten a cualquier usuario acortar el sintaxis de escribir la función tradicional de una manera mucho más compacta. 

Sintaxis para escribir una función de flecha: La siguiente es la sintaxis simple para escribir una función de flecha:

let name_of_function = (parameters) => ...

También podemos incluir cualquier número de parámetros dentro de las llaves redondas (forma de mostrar que la variable se trata como una función).

Ventajas de usar la función de flecha: los siguientes puntos describirán la lista de ventajas asociadas con el uso de funciones de flecha en lugar de funciones normales:

• Esta función de flecha reduce mucho código y hace que el modo sea más legible.
• La sintaxis de la función de flecha vincula automáticamente «esto» al contexto del código circundante.
• Escribir la flecha => es más flexible en comparación con la palabra clave de función de escritura .

Cuándo se debe usar la función Flecha: Dado que en secciones anteriores hemos discutido la sintaxis, las ventajas y la flexibilidad asociadas con la sintaxis de la función flecha, aquí veremos y analizaremos cuándo y cuándo debemos usar funciones flecha en lugar de funciones normales.

• Podemos usar la sintaxis de la función de flecha con nuestro método asociado con la array, como map(), reduce(), filter() ya que al usar la sintaxis de la función de flecha en lugar de usar la sintaxis de la función normal, uno podría leer y comprender fácilmente, así como escribir el código. más eficazmente.
• Si podemos usar funciones de flecha al declarar promesas y devoluciones de llamada, sería mucho más fácil para cualquier usuario entender el concepto detrás de ellas; de lo contrario, al usar conceptos de sintaxis de funciones tradicionales como infiernos de devolución de llamada, el enstringmiento de promesas eventualmente sería más difícil de entender, o incluso escribir. se volvería un poco complejo.

Veamos algunos ejemplos en los que usaremos solo la sintaxis de la función de flecha y, además, veremos el buen efecto legible asociado con las funciones de flecha.

Ejemplo 1: En este ejemplo, usaremos la función de flecha para verificar si un número ingresado por el usuario es mayor que 10 o no.

<script>
    let checkNumber = (num) => num > 10 ?
        console.log("Yes") : console.log("No");
 
    checkNumber(5);
    checkNumber(10);
    checkNumber(20);
    checkNumber(32);
</script>

Salida: La salida del fragmento de código anterior es la siguiente:

No
No
Yes
Yes

Ejemplo 2: En este ejemplo, usaremos métodos de array (como mapear, reducir y filtrar) para realizar diferentes operaciones en los elementos de la array.

<script>
    let array = [1, 3, 5, 8, 9, 7, 6, 2];
 
    let sumOfElements =
        array.reduce((a, b) => a + b);
    console.log(sumOfElements);
 
    let multiplyElements =
        array.map((element) => element * 10);
    console.log(multiplyElements);
 
    let filterElements = array.filter(
        (element) => element % 2 === 0);
    console.log(filterElements);
</script>

Salida: La salida del fragmento de código anterior es la siguiente:

41
[
 10, 30, 50, 80,
 90, 70, 60, 20 
]
[ 8, 6, 2 ]

Limitaciones del uso de funciones de flecha: A continuación, se muestran algunas limitaciones del uso de una función de flecha:

• Una función de flecha no tiene sus propios enlaces con this o super.
• Una función de flecha no debe usarse como método.
• Una función de flecha no se puede utilizar como constructores.
• Una función de flecha no puede usar yield dentro de su cuerpo.
• La función de flecha no puede ser adecuada para los métodos de aplicación y vinculación de llamadas.