6 diferencias entre funciones de flecha y funciones regulares en JavaScript

Las funciones son una parte esencial de JavaScript que debe usar para escribir código reutilizable. Los dos tipos principales de función son las funciones regulares y de flecha, y hay muchas formas de definirlas.

Aunque satisfacen necesidades similares, tienen algunas diferencias críticas que pueden influir fundamentalmente en cómo los usa en su código. Aprenda todo sobre varias diferencias entre las funciones de flecha y las funciones regulares.

1. Diferencias de sintaxis

La sintaxis que elija al desarrollar funciones de JavaScript tiene un gran impacto en lo simple que es leer y comprender su código. La sintaxis de las funciones regulares y de flecha difiere significativamente, lo que afecta la forma en que las escribe y usa.

Funciones de flecha de JavaScript use una estructura de lenguaje más pequeña que sea más comprensible. Puede usarlos para crear funciones combinándolos en una sola expresión o declaración.

constante agregar = (un, b) => a + b;

En este ejemplo, el agregar La función acepta dos entradas, a y by devuelve su total. El => sign define esto como una función de flecha.

Por otro lado, definir una función regular requiere el uso de la función palabra clave, con una sintaxis más detallada, como se muestra en este ejemplo:

funciónagregar(un, b) {
devolver a + b;
}

En este ejemplo, el función palabra clave define una función regular que también utiliza llaves y la devolver declaración.

Las funciones regulares son más útiles para la sintaxis compleja que requiere múltiples declaraciones o expresiones. Por el contrario, las funciones de flecha utilizan una sintaxis más concisa que puede hacer que su código sea más fácil de leer y comprender.

2. Diferencias de alcance

El término "ámbito" describe cómo se puede acceder a las funciones y variables internas de una función. En JavaScript, defines y accedes a variables y funciones a lo largo de tu código usando el alcance. sus distintos el alcance puede afectar significativamente la forma en que escribe y usa JavaScript Flecha y funciones regulares.

En el alcance, cómo las funciones de flecha manejan el este La palabra clave difiere significativamente de cómo lo hacen las funciones normales. Las funciones regulares definen el este palabra clave en sí mismos; por lo tanto, puede cambiar según el contexto en el que invoque la función.

Por otro lado, debido a que no especifican el este palabra clave, las funciones de flecha usan el mismo este como el alcance estático que los rodea.

Para ver la diferencia, echa un vistazo al siguiente ejemplo. Digamos que tienes un persona objeto con un nombre propiedad y un método llamado decirNombre() que registra el nombre de la persona usando una función normal:

constante persona = {
 nombre: 'John,'
 decirNombre: función() {
consola.registro(este.nombre);
 }
};
persona.sayName(); // registra 'Juan'

Aquí, la función regular sayName() es un método del objeto persona y el este La palabra clave dentro de esa función se refiere a ese objeto de persona.

Probemos ahora lo mismo con una función de flecha:

constante persona = {
 nombre: 'John',
 decirNombre: () => {
consola.registro(este.nombre);
 }
};
persona.sayName(); // registros indefinidos

Debido a que la función de flecha utilizada en el decirNombre() El método no define su propio este palabra clave, utiliza la este del alcance estático que lo rodea. En este caso, ese es el alcance global de la instancia.

Como resultado, cuando llamas persona.decirNombre(), usted obtiene indefinido en vez de "John." Esto puede afectar significativamente la forma en que escribe y usa funciones en su código.

3. Casos de uso y mejores prácticas

Las funciones regulares son más adecuadas para funciones que requieren su propia este palabra clave, como métodos en un objeto.

Las funciones de flecha son más adecuadas para programación funcional y devoluciones de llamada que no requieren este palabra clave.

4. Diferencias de enlace de función

La vinculación de funciones es el término utilizado para describir la relación entre este palabra clave y funciones en su código. Las variaciones en el enlace de funciones entre las funciones de flecha y las funciones normales pueden tener un fuerte impacto en la forma en que construye y usa las funciones de flecha.

Utilizando el este La palabra clave lo hace único en funciones regulares y se asocia con varios objetos según el método utilizado para llamar a la función. El enlace de función es una de las distinciones más importantes entre funciones regulares y de flecha.

Por el contrario, las funciones de flecha no tienen este palabra clave; más bien, lo obtienen de los ámbitos circundantes.

Veamos un ejemplo para entender más sobre esta diferencia. Suponga que tiene un persona objeto con un nombre campo y un método llamado decirNombre() que usa una función regular para registrar el nombre de la persona:

constante persona = {
 nombre: 'John',
 decirNombre: función() {
consola.registro(este.nombre);
 }
};
constante otra persona = {
 nombre: 'Jane'
};
persona.decirNombre.llamar (otraPersona); // registra 'Jane'

En este ejemplo, usted llama al objeto persona decirNombre() método con el valor otra persona utilizando el llamar() método. Debido a esto, el decirNombre() método, este, la palabra clave está vinculada a la otra persona objeto, y registra "jane" en vez de "John."

Ahora usemos lo mismo con una función de flecha:

constante persona = {
 nombre: 'John',
 decirNombre: () => {
consola.registro(este.nombre);
 }
};
constante otra persona = {
 nombre: 'Jane'
};
persona.decirNombre.llamar (otraPersona); // registros indefinidos

Desde el decirNombre() La técnica no tiene su propia palabra clave, está utilizando una función de flecha dentro de ella en este ejemplo. En este caso, la función de flecha hereda las propiedades del ámbito circundante, que es el ámbito global.

Esto significa que cuando ejecuta persona.decirNombre.llamar (otraPersona), la función de flecha este palabra clave sigue siendo el objeto global, y indefinido toma el lugar de jane en el registro

Si necesita vincular una función a una específica este valor, una función ordinaria puede ser preferible. Sin embargo, si no necesita vincular una función a una función específica este valor, una función de flecha puede ser más corta y más fácil de entender.

5. Retorno implícito

La función de flecha tiene una función de retorno implícita. Si el cuerpo de la función consta de una sola expresión, las funciones devuelven esa expresión.

Como ejemplo:

constante doble = (X) => X * 2;

Esta función de flecha devuelve un doble de un parámetro. No es necesario utilizar un explícito devolver palabra clave porque el cuerpo de la función solo tiene una expresión.

6. Diferencias de compatibilidad

Las diferencias de compatibilidad se refieren a las funciones de flecha añadidas de ECMAScript 6, que pueden no funcionar con navegadores o entornos más antiguos. Por otro lado, las funciones regulares han existido desde el comienzo de JavaScript y son ampliamente compatibles.

Aquí hay una ilustración de una función de flecha que puede no funcionar en condiciones más establecidas:

constante agregar = (un, b) => a + b;

La siguiente es una función regular comparable que debería funcionar en la mayoría de las situaciones:

funciónagregar(un, b) {
devolver a + b;
}

Utilice funciones regulares en lugar de funciones de flecha cuando se dirija a entornos más antiguos para garantizar la compatibilidad. Sin embargo, las funciones de flecha pueden proporcionar una sintaxis que es más fácil de entender y más condensada cuando se trabaja con navegadores y entornos modernos.

Elegir entre funciones de flecha y funciones regulares en JavaScript

En JavaScript, las funciones regulares y de flecha tienen características y aplicaciones distintas. Las funciones de flecha tienen una sintaxis simple, heredando este término de palabra clave del contexto de su uso, mientras que las funciones regulares son más adaptables y pueden manejar situaciones más complejas.

Es fundamental saber en qué se diferencian y cómo usarlos según los requisitos de su código. Al seleccionar qué tipo de función usar, también debe considerar las diferencias de compatibilidad.

En última instancia, las funciones regulares y de flecha de JavaScript son herramientas poderosas que lo ayudan a escribir código más limpio y eficiente.