Diferencia entre funciones regulares y funciones de flecha

Este artículo analiza las principales diferencias entre las funciones regulares y las funciones de flecha.

Las funciones de flecha, una nueva característica introducida en ES6, permiten escribir funciones concisas en JavaScript. Si bien las funciones regulares y de flecha funcionan de manera similar, existen ciertas diferencias interesantes entre ellas, como se explica a continuación.

Sintaxis

Sintaxis de funciones regulares : –

let x = function function_name(parameters){
   // body of the function
};

Ejemplo de funciones regulares :-

let square = function(x){
  return (x*x);
};
console.log(square(9));

Producción:

La sintaxis de las funciones de flecha : –

let x = (parameters) => {
    // body of the function
};

Ejemplo de funciones de flecha : –

var square = (x) => {
    return (x*x);
};
console.log(square(9));

Producción:

Uso de esta palabra clave

A diferencia de las funciones normales , las funciones de flecha no tienen las suyas propias this.
Por ejemplo:-

let user = {
    name: "GFG",
    gfg1:() => {
        console.log("hello " + this.name); // no 'this' binding here
    },
    gfg2(){       
        console.log("Welcome to " + this.name); // 'this' binding works here
    }  
 };
user.gfg1();
user.gfg2();

Producción:

Disponibilidad de argumentsobjetos

Los objetos de argumentos no están disponibles en las funciones de flecha, pero están disponibles en las funciones normales.

Ejemplo usando regular():-

let user = {      
    show(){
        console.log(arguments);
    }
};
user.show(1, 2, 3);

Producción:

Ejemplo usando la flecha():-

let user = {     
        show_ar : () => {
        console.log(...arguments);
    }
};
user.show_ar(1, 2, 3);

Producción:

Usando newpalabra clave

Las funciones regulares creadas usando declaraciones de funciones o expresiones son ‘construibles’ y ‘invocables’. Dado que las funciones regulares son construibles, se pueden llamar usando la palabra clave ‘nuevo’. Sin embargo, las funciones de flecha solo son ‘llamables’ y no construibles. Por lo tanto, obtendremos un error de tiempo de ejecución al intentar construir una función de flecha no construible usando la nueva palabra clave.

Ejemplo usando la función regular : –

let x = function(){
    console.log(arguments);
};
new x =(1,2,3);

Salida:

Ejemplo usando la función de flecha : –

let x = ()=> {
    console.log(arguments);
};
new x(1,2,3);

Salida:

para obtener más información sobre las funciones de flecha, consulte este enlace .