Existen diferencias adicionales entre los dos además de la sintaxis.
Como casi todos los lenguajes de programación modernos, JavaScript ofrece formas de crear funciones para permitir la reutilización del código. Para aquellos que no están familiarizados con el lenguaje, existen dos formas diferentes de declarar una función en JavaScript.
Originalmente, el función Se utilizó la palabra clave y, más tarde, se creó la sintaxis de flecha. Aunque difieren en la accesibilidad del alcance, tanto la palabra clave de la función como la sintaxis de la flecha crean resultados similares.
La incapacidad de distinguir entre los dos puede causar problemas y provocar un uso incorrecto. Es una necesidad para el desarrollador de JS moderno comprender cómo cada declaración de función afecta el alcance y la visibilidad.
¿Qué son las funciones de flecha de JavaScript?
Funciones de flecha de JavaScript son una forma alternativa de definir funciones que no utilizan el valor predeterminado función palabra clave:
funciónmensaje de registro(mensaje) {
consola.log (mensaje);
}constante mensaje de registro = (mensaje) => {
consola.log (mensaje);
}
constante mensaje de registro = mensaje =>consola.log (mensaje);
Arriba, puedes ver el mismo mensaje escrito de tres maneras diferentes. El primero usa el método de declaración de función regular. Los siguientes dos muestran las dos formas de usar las funciones de flecha de ES6.
JavaScript adoptó por primera vez la sintaxis de la función de flecha con el lanzamiento de los estándares ECMAScript 2015. Las funciones de flecha ofrecieron una forma limpia y concisa de crear funciones rápidamente y una solución interesante para varios problemas de alcance de ejecución prolongada dentro de JavaScript.
Estas funciones rápidamente convirtieron a las funciones de flecha en un éxito entre muchos desarrolladores. Los programadores que busquen una base de código JavaScript moderna tienen la misma probabilidad de encontrar funciones de flecha que funciones regulares.
¿En qué se diferencian las funciones de flecha de las funciones regulares en JavaScript?
A primera vista, las funciones de flecha no parecen diferir mucho de las funciones declaradas con la palabra clave function. Fuera de la sintaxis, ambos encapsulan un conjunto reutilizable de acciones que se pueden llamar desde cualquier parte del código.
Sin embargo, a pesar de las similitudes entre los dos, existen algunas diferencias que los desarrolladores deben tener en cuenta.
Diferencia en el alcance
Cada vez que se declara una función regular en JavaScript, esa la función funciona como un cierre que crea su propio alcance. Esto puede causar un problema al usar ciertas funciones especializadas como establecer tiempo de espera y establecerIntervalo.
Antes de ES6, había una cantidad significativa de soluciones alternativas que elevaban los elementos a niveles más altos de alcance para su uso en las devoluciones de llamada. Estos trucos funcionaron, pero a menudo eran difíciles de entender y podían causar problemas con la sobrescritura de ciertas variables.
Las funciones de flecha resolvieron ambos problemas de una manera simple y elegante. Cuando se utiliza una función de flecha como parte de una devolución de llamada, tiene acceso al mismo ámbito que la función desde la que se llamó.
Esto permitió que las funciones se usaran como devoluciones de llamada sin perder el acceso al contexto en el que se llamó al evento original. Como una prueba simple para mostrar este principio en acción, puede configurar una función de mensajería diferida como la siguiente:
funciónmensaje retrasado(mensaje, retraso) {
establecerTiempo de espera(función(mensaje) {
consola.log (mensaje);
}, demora);}
mensaje retrasado ("Hola Mundo", 1000);
La función es simple, aceptando mensaje y demora en milisegundos. Una vez superada la demora, debería registrar el mensaje en la consola. Sin embargo, cuando se ejecuta el código, indefinido se registrará en la consola en lugar del mensaje que se pasó.
Cuando se ejecuta la función de devolución de llamada, el alcance cambia y ya no se puede acceder al mensaje original. El uso del mensaje desde dentro del cierre requiere que el mensaje se eleve a una variable global, lo que podría provocar que se sobrescriba antes de la devolución de llamada.
Una función de flecha es una solución adecuada para este problema. Si reemplaza el primer argumento por establecer tiempo de espera, el alcance se puede mantener y la función tendrá acceso al mensaje pasado a mensaje retrasado.
funciónmensaje retrasado(mensaje, retraso) {
establecerTiempo de espera(() => {
consola.log (mensaje);
}, demora);}
mensaje retrasado ("Hola Mundo", 1000);
Ahora, cuando se ejecuta, el mensaje retrasado La función registrará el mensaje. Además, esto permite que varios mensajes se pongan en cola con diferentes retrasos, y todos seguirán ocurriendo en el momento correcto.
Esto se debe a que cada vez mensaje retrasado se utiliza, genera su propio alcance con su propia copia de la función de flecha interna.
Legibilidad del código
Si bien las funciones de flecha son útiles como devoluciones de llamada, también se usan para mantener el código limpio y conciso. En la sección anterior, puede ver que el uso de una función de flecha hace que sea obvio lo que sucederá cuando el mensaje retrasado se llama la función.
A medida que las funciones se vuelven más complejas, tener un poco de claridad puede hacer que el código sea mucho más legible. Al componer objetos, esto puede simplificar el código al agregar funciones cortas:
claseencimera{
_cuenta = 0;
incremento = () => {
este._cuenta += 1;
}
decremento = () => {
este._cuenta -= 1;
}
contar = () => {
devolvereste._contar;
}
}
dejar ct = nuevo encimera();
Rol en la Programación Orientada a Objetos
Si bien las funciones de flecha de JavaScript son una parte integral de la programación funcional, también tienen un lugar en programación orientada a objetos. Las funciones de flecha se pueden usar dentro de las declaraciones de clase:
claseorderLineItem{
_LineItemID = 0;
_Producto = {};
_Cantidad = 1;constructor(producto) {
este._LineItemID = crypto.randomUUID();
este._Producto = producto
}
changeLineItemQuantity = (cantidad nueva) => {
este._Cantidad = nuevaCantidad;
}
}
Usar una función de flecha para declarar métodos dentro de una declaración de clase no cambia el comportamiento de la función dentro de la clase. Sin embargo, fuera de la clase, expone la función, lo que permite que otras clases la utilicen.
No se puede acceder a las funciones regulares fuera de la declaración de clase sin llamarlas. Esto significa que mientras que otras declaraciones de clase pueden heredar estas funciones, no se puede acceder a ellas directamente para componer otras clases.
¿Cuándo debería usar las funciones de flecha de JavaScript?
Las funciones de flecha de JavaScript son una característica increíblemente poderosa que brinda a los desarrolladores mucho más control sobre el alcance al que tiene acceso una función. Saber cuándo una devolución de llamada debe tener acceso al alcance de su padre y cuándo no, puede ayudar a un desarrollador a determinar qué tipo de declaración usar.
Las funciones de flecha brindan a los programadores una forma clara y concisa de escribir devoluciones de llamada sin exponer partes del alcance que deberían estar ocultas. También permiten la creación de composiciones limpias y simples, lo que permite aún más la programación funcional en JavaScript.
Los desarrolladores de JS deben ser conscientes de las diferencias entre las dos sintaxis y tener en cuenta qué sintaxis es adecuada al declarar sus funciones.
