El significado de => en JavaScript

1. Función de flecha => en JavaScript
2. Función de flecha sin argumento
3. Función de flecha con un argumento
4. Funciones de flecha multilínea
5. Llamar o ejecutar la función de flecha en JavaScript
6. Use funciones de flecha con promesas y devoluciones de llamada
7. Limitaciones de las funciones de flecha

Una función en JavaScript le permite escribir un bloque de código que realiza una tarea específica. Hay varias formas de escribir funciones en JavaScript.

En este artículo, veremos qué es una función de flecha en JavaScript, cómo funciona y cuáles son sus limitaciones.

Función de flecha => en JavaScript

La función flecha es una combinación del signo igual = y el signo mayor >. Se introdujo en la versión ES6 de JavaScript.

Es una forma más corta de escribir funciones en JavaScript, conocidas como funciones de flecha. La ventaja de usar la función flecha es que tiene una sintaxis más corta que la expresión función.

La función de flecha a veces también se denomina función anónima. Esto se debe a que estas funciones no tienen ningún nombre.

El siguiente fragmento de código muestra la comparación entre la sintaxis de la función normal y la sintaxis de las funciones de flecha.

Fragmento de código - JavaScript:

// normal fn
function abc() {}

// arrow
() => {}

La función de flecha puede no tomar argumentos o cualquier cantidad de argumentos.

Función de flecha sin argumento

El fragmento de código siguiente muestra una función de flecha que no acepta argumentos. Además, si tenemos una función de flecha con una sola línea de código, podemos evitar el uso de llaves, como se muestra a continuación.

Fragmento de código - JavaScript:

() => console.log('This is a single line arrow fn which takes no arguments')

Función de flecha con un argumento

Si desea pasar argumentos a una función de flecha, puede pasarlos dentro de los corchetes. A continuación se muestra la función de flecha con un argumento.

Fragmento de código - JavaScript:

(name) => console.log(`Good Morning ${name}`)

Funciones de flecha multilínea

En los ejemplos anteriores, hemos visto una función de flecha que tiene una sola línea de código. Pero si desea escribir código de varias líneas dentro de una función de flecha, debe usar llaves, como se muestra a continuación.

Fragmento de código - JavaScript:

() => {
  greetMe();
  loadData();
  console.log('The data is loaded....')
}

Llamar o ejecutar la función de flecha en JavaScript

Podría preguntar, si una función de flecha no tiene un nombre, ¿cómo podemos llamarla o ejecutarla? La respuesta es simple; podemos almacenar la función de flecha dentro de una variable y darle un nombre a esa variable.

Luego, usando los corchetes (), podemos llamar o ejecutar esa función de manera similar a como ejecutamos una función normal, como se muestra a continuación. Esto se llama una función de flecha como una expresión.

Fragmento de código - JavaScript:

const abc = () => {
  console.log('hello');
}

Si solo tiene una declaración dentro de la función de flecha, puede eliminar las llaves {} y escribir directamente la función de flecha en una sola línea. Esto aumenta la legibilidad del código y reduce las líneas de código.

Fragmento de código - JavaScript:

const abc = () => console.log('hello');

Y, en el caso de las funciones de flecha, si desea devolver algo después de la ejecución de la función, también puede usar () en lugar de la palabra clave return. Pero cuando se trata de funciones normales, debe usar la palabra clave return.

Fragmento de código - JavaScript:

(params) => ({key: 'value'})

Además, un punto importante para recordar es que la palabra clave this en la función normal siempre se refiere al contexto de la función que se llama en JavaScript. Pero este no es el caso de las funciones de flecha.

La palabra clave this en las funciones de flecha no tiene su contexto; se refiere al ámbito donde está presente la función.

Use funciones de flecha con promesas y devoluciones de llamada

Lo bueno de las funciones de flecha es que se pueden usar en múltiples lugares (con promesas) y de varias formas (como devoluciones de llamada).

Fragmento de código - JavaScript:

new Promise(function(resolve, reject) {
  funReturningPromise().then(data => resolve(data)).catch(err => reject(err));
});

Aquí, estamos usando “promesas”, y como sabemos, “promesa” toma un método de devolución de llamada como argumento. Esta devolución de llamada toma dos argumentos para “resolver” y “rechazar”.

Supongamos que tenemos una función que devuelve un objeto promesa. La promesa puede resolverse o rechazarse.

Entonces, dependiendo de lo que le pueda pasar a una promesa, podemos usar dos métodos, entonces y atrapar. Podemos usar las funciones de flecha en estos métodos, como se muestra en el ejemplo anterior.

Limitaciones de las funciones de flecha

1. No se pueden utilizar como constructores.
2. No apto para los métodos call, apply y bind.
3. No tienen sus enlaces a this, arguments o super, y no deben usarse como métodos.
4. No tener acceso a la palabra clave new.target.