Por qué debe tener cuidado al usar funciones de flecha en JavaScript

La sintaxis de la función de flecha llegó con el lanzamiento de ECMAScript 2015, también conocido como ES6. Hoy en día, las funciones de flecha se han convertido en la característica favorita de muchos programadores de JavaScript. Este amor por las funciones de flecha se debe a la sintaxis concisa y al comportamiento directo de la palabra clave "this".

Pero las funciones de flecha tienen algunas desventajas. Conozca las diferencias clave entre las funciones de flecha y las funciones regulares y descubra por qué, en la mayoría de los casos, es mejor atenerse a las funciones regulares.

1. Debe definir una función de flecha antes de usarla

No puede izar una función de flecha. Reglas de elevación predeterminadas de JavaScript le permiten llamar a una función antes de definirla, pero ese no es el caso con las funciones de flecha. Si tiene un archivo JavaScript con funciones, esto significa que todo el código importante estará en la parte inferior del archivo.

Considere el siguiente código JavaScript, por ejemplo:

constante numerosdobles = (numeros) { 
 numeros.mapa(norte => norte * 2)
}
constante halveNumbers = (números) { 
 numeros.mapa(norte => n / 2)
}
constante sumaNúmeros = (números) { 
 numeros.reducir((suma) => { 
devolver suma + n; 
 }, 0)
}
constante números = [1, 20, 300, 700, 1500]
constante duplicado = doubleNumbers (números)
consola.log (halveNumbers (duplicado))
consola.log (sumNumbers (números))

En el bloque de código anterior, el código importante se encuentra en la parte inferior. Todas las funciones auxiliares se definen antes del punto de ejecución. Tener que crea tus funciones JavaScript en la parte superior del archivo puede ser inconveniente porque tendrá que desplazarse hacia abajo para ver el código real que hace el trabajo.

Si movió las funciones auxiliares hacia abajo y el código real hacia arriba, obtendrá un error de referencia. El tiempo de ejecución trata la función como una variable. Por lo tanto, debe definirlo primero antes de acceder o invocarlo. Pero si convirtió todas las funciones de flecha en funciones regulares (con el función palabra clave), entonces su código funcionaría bien. Al mismo tiempo, el código importante permanece en la parte superior donde puede ubicarlo.

Este es uno de los mayores problemas con el uso de funciones de flecha. No exhiben ningún comportamiento de hospedaje. En otras palabras, debe definirlos antes del lugar real donde los usaría. Por otro lado, puede izar funciones regulares.

2. Las funciones de flecha pueden ser confusas para algunas personas

Otra razón para usar funciones regulares en lugar de funciones de flecha es la legibilidad. Las funciones regulares son más fáciles de leer porque usan explícitamente el función palabra clave. Esta palabra clave identifica que el código en cuestión es una función.

Por otro lado, asigna funciones de flecha a las variables. Como novato, esto podría confundirlo al pensar que el código es una variable, en lugar de una función.

Compare las dos funciones siguientes:

constante números a la mitad = (números) => {
devolver numeros.mapa(norte => n / 2)
}
funciónreducir a la mitad(números) { 
devolver numeros.mapa(norte => n / 2)
}

A primera vista, puede darse cuenta fácilmente de que el segundo fragmento de código es una función. La sintaxis deja claro que el código es una función. Sin embargo, el primero es ambiguo: es posible que no sepa fácilmente si es una variable o una función.

3. No puede usar funciones de flecha como métodos

Cuando utiliza una función de flecha, la este palabra clave corresponde a lo que está fuera de lo que estamos dentro. En la mayoría de los casos, es el objeto ventana.

Considere el siguiente objeto:

constante persona = {
 nombre de pila: "kyle",
 apellido: "Cocinar",
 imprimirNombre: () => {
consola.registro(`${este.nombre de pila}``${este.apellido}` )
 }
}
persona.imprimirNombre()

Si ejecuta el código, notará que el navegador imprime indefinido tanto para el nombre como para el apellido. Como estamos usando una función de flecha, este palabra clave corresponde al objeto ventana. Además, no hay nombre de pila o apellido propiedad definida allí.

Para resolver este problema, debe usar una función normal en su lugar:

constante persona = {
 nombre de pila: "kyle",
 apellido: "Cocinar",
 imprimirNombre: función() {
consola.registro(`${este.nombre de pila}``${este.apellido}` )
 }
}
persona.imprimirNombre()

Esto va a funcionar bien porque este se refiere a persona objeto. Si va a hacer mucho este tipo de programación orientada a objetos, entonces deberá asegurarse de que está usando funciones regulares. Las funciones de flecha no funcionarán.

Cuándo usar las funciones de flecha

Use funciones de flecha principalmente en lugares donde necesita una función anónima. Un ejemplo de tal escenario es tratar con una función de devolución de llamada. Es mejor usar una función de flecha al escribir una devolución de llamada porque la sintaxis es mucho más simple que escribir una función completa.

Compare estos dos y decida cuál es más sencillo:

funciónreducir a la mitad(números) {
devolver numeros.mapa(norte => n / 2)
}
funciónreducir a la mitad(números) {
devolver numeros.mapa(función(norte) {
devolver n / 2
 })
}

Ambos casos pasan una función de devolución de llamada al método map(). Pero la primera devolución de llamada es una función de flecha, mientras que la segunda es una función completa. Puede ver cómo la primera función ocupa menos líneas de código que la segunda función: tres vs. cinco.

El otro momento para usar funciones de flecha es siempre que desee tratar con una sintaxis particular de "esto". El objeto "esto" cambiará dependiendo de si está usando funciones regulares o funciones de flecha para cosas particulares.

El siguiente bloque de código registra dos detectores de eventos de "clic" en el objeto del documento. La primera instancia usa una función normal como devolución de llamada, mientras que la segunda usa una función de flecha. Dentro de ambas devoluciones de llamada, el código registra el objeto de ejecución (este) y el objetivo del evento:

documento.addEventListener("hacer clic", función(mi) {
consola.registro("FUNCIÓN", este, e.objetivo)
})
documento.addEventListener("hacer clic", (e) => {
consola.registro("FLECHA", este, e.objetivo)
})

Si tuviera que ejecutar este script, notará que "esta" referencia es diferente para ambos. Para la función normal, esta propiedad hace referencia al documento, que es el mismo que el e.objetivo propiedad. Pero para la función de flecha, esto hace referencia al objeto de ventana.

Cuando usa una función regular como devolución de llamada, esto se referirá al elemento donde activamos el evento. Pero cuando utiliza una función de flecha, esta palabra clave se establece de forma predeterminada en el objeto de la ventana.

Obtenga más información sobre las funciones de flecha frente a las funciones regulares

Hay varias otras diferencias sutiles entre las funciones regulares y las funciones de flecha. Dominar ambos tipos de funciones es fundamental para dominar JavaScript. Aprenda cuándo usar uno y cuándo usar el otro; Entonces comprenderá las implicaciones de usar una función regular o una función de flecha en su JavaScript.