En este tutorial, aprenderá sobre la función de flecha de JavaScript con la ayuda de ejemplos.
La función de flecha es una de las características introducidas en la versión ES6 de JavaScript. Le permite crear funciones de una manera más limpia en comparación con las funciones normales. Por ejemplo,
esta función
// function expression let x = function(x, y) ( return x * y; )
Se puede escribir como
// using arrow functions let x = (x, y) => x * y;
usando una función de flecha.
Sintaxis de la función de flecha
La sintaxis de la función de flecha es:
let myFunction = (arg1, arg2,… argN) => ( statement(s) )
Aquí,
myFunctiones el nombre de la funciónarg1, arg2,… argNson los argumentos de la funciónstatement(s)es el cuerpo funcional
Si el cuerpo tiene una sola declaración o expresión, puede escribir la función de flecha como:
let myFunction = (arg1, arg2,… argN) => expression
Ejemplo 1: función de flecha sin argumento
Si una función no acepta ningún argumento, entonces debes usar paréntesis vacíos. Por ejemplo,
let greet = () => console.log('Hello'); greet(); // Hello
Ejemplo 2: función de flecha con un argumento
Si una función tiene solo un argumento, puede omitir los paréntesis. Por ejemplo,
let greet = x => console.log(x); greet('Hello'); // Hello
Ejemplo 3: función de flecha como expresión
También puede crear dinámicamente una función y usarla como expresión. Por ejemplo,
let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby
Ejemplo 4: Funciones de flecha de varias líneas
Si el cuerpo de una función tiene varias declaraciones, debe ponerlas entre corchetes (). Por ejemplo,
let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12
esto con la función de flecha
Dentro de una función regular, esta palabra clave se refiere a la función a la que se llama.
Sin embargo, thisno está asociado con las funciones de flecha. La función de flecha no tiene la suya propia this. Entonces, siempre que llame this, se refiere a su alcance principal. Por ejemplo,
Dentro de una función regular
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();
Salida
25 Ventana indefinida ()
Aquí, el this.ageinterior this.sayName()es accesible porque this.sayName()es el método de un objeto.
Sin embargo, innerFunc()es una función normal y this.ageno es accesible porque se thisrefiere al objeto global (objeto Ventana en el navegador). Por tanto, this.agedentro de la innerFunc()función da undefined.
Dentro de una función de flecha
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();
Salida
25 25
Aquí, la innerFunc()función se define mediante la función de flecha. Y dentro de la función de flecha, se thisrefiere al alcance del padre. Por lo tanto, this.ageda 25 .
Vinculación de argumentos
Las funciones regulares tienen argumentos vinculantes. Es por eso que cuando pasa argumentos a una función normal, puede acceder a ellos usando la argumentspalabra clave. Por ejemplo,
let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)
Las funciones de flecha no tienen argumentos vinculantes.
Cuando intente acceder a un argumento usando la función de flecha, dará un error. Por ejemplo,
let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments
Para resolver este problema, puede utilizar la sintaxis de propagación. Por ejemplo,
let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)
Función de flecha con promesas y devoluciones de llamada
Las funciones de flecha proporcionan una mejor sintaxis para escribir promesas y devoluciones de llamada. Por ejemplo,
// ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));
Se puede escribir como
// ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);
Cosas que debe evitar con las funciones de flecha
1. No debe utilizar funciones de flecha para crear métodos dentro de objetos.
let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined
2. No puede utilizar una función de flecha como constructor . Por ejemplo,
let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor
Nota : Las funciones de flecha se introdujeron en ES6 . Es posible que algunos navegadores no admitan el uso de funciones de flecha. Visite el soporte de la función de flecha JavaScript para obtener más información.
