¿Qué son las funciones de flecha de JavaScript?

En este artículo, aprenderá todo sobre las funciones de flecha de JavaScript. Las funciones de flecha que usamos para hacer que el código sea más conciso y hay muchas variaciones que puede escribir.

Javascript es un lenguaje muy funcional . Las funciones en javascript son uno de los conceptos más valiosos. Escribimos funciones, pasamos funciones, devoluciones de llamada y el código de sincronización tenemos funciones. Es sólo una parte fundamental de JavaScript.

Durante mucho tiempo, hemos escrito palabras clave de función para escribir una función en javascript. Aquí hay algunos ejemplos de funciones en JavaScript. Puede ver que estamos usando una palabra clave de función aquí.

(function () {
   //...
});

No se puede acceder a una función anónima después de su creación inicial. Por lo tanto, a menudo necesita asignarlo a una variable.

Por ejemplo, lo siguiente muestra una función anónima que muestra un mensaje:

let show = function() {
    console.log('Anonymous function');
};

show();

Debido a que necesitamos llamar a la función anónima más tarde, asignamos la función anónima a la show variable.

Dado que toda la asignación de la función anónima a la variable show constituye una expresión válida, no es necesario que envuelva la función anónima entre paréntesis ().

En la práctica, a menudo pasa funciones anónimas como argumentos a otras funciones. Por ejemplo:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

Tenga en cuenta que las funciones son ciudadanos de primera clase en JavaScript. Por lo tanto, puede pasar una función a otra función como argumento.

Aquí puede ver cada vez que necesitamos escribir una palabra clave de función y definir una función. Pero aquí es donde la función de flecha entra en escena. ES6 introdujo expresiones de función de flecha que proporcionan una abreviatura para declarar funciones anónimas. Una expresión de función de flecha es una alternativa compacta a una expresión de función tradicional , con algunas diferencias semánticas y limitaciones de uso deliberadas.

Normalmente, las funciones de flecha son más cortas y, a veces, se comportan de manera diferente en comparación con las funciones de JavaScript tradicionales.

Las funciones de flecha no son compatibles con Internet Explore .

Usamos los símbolos '= y >' cuando definimos una función de flecha. Parece una flecha, por eso llamamos a esas funciones funciones de flecha.

let show = () => console.log('Anonymous function');

Podemos escribir la función normal como una función de flecha como esta.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Si tiene 2 argumentos, puede usar paréntesis como una función normal:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Para eliminar este problema, debemos envolverlo entre paréntesis .

Ahora javascript lo sabe como un valor de retorno y no es solo una llave para el cuerpo de una función.

Las funciones de flecha no tienen sus propios enlaces a this, argumentso super, y no deben usarse como métodos

• Las expresiones de función de flecha solo deben usarse para funciones que no sean de método porque no tienen su propio this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

Estoy llamando a la acción en un objeto de persona y el valor del nombre regresará con la cadena concatenada. Ahora usemos funciones de flecha en lugar de funciones regulares.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

Ahora solo obtenemos " dice hola " como salida. ¿Que pasó aquí? Cuando usamos funciones de flecha, el valor del nombre no se establece como funcionan las funciones normales. Simplemente se establece en el objeto de ventana cuando lo usamos en funciones de flecha. Se comporta como si la función de acciones fuera una función independiente.

Por razones similares, los métodos call(), apply()y bind()no son útiles cuando se invocan en funciones de flecha, porque las funciones de flecha se establecen thisen función del ámbito en el que se define la función de flecha, y el thisvalor no cambia en función de cómo se invoca la función.

• Las funciones de flecha no se pueden usar como constructores y generarán un error cuando se llamen con new. Tampoco tienen prototypepropiedad.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

Esto es todo acerca de las funciones de flecha y espero que obtenga una comprensión perfecta de las funciones de flecha. Nos vemos en otro tutorial.

¡Gracias!