¿Cuáles son las funciones de flecha en JavaScript?

Una de las mejores características que Modern JavaScript nos ha proporcionado es el función de flecha denotado a través de "=>". También conocido como "flecha gorda"Viene con varios beneficios en la programación. Viene con "esto" vinculante y el uso de estos hace que el código se vea más organizado y más corto.

Estas funciones son la razón por la cual las funciones de flecha son estrictamente preferidas sobre otros tipos de declaración de función. Pero con estas ventajas también vienen algunos inconvenientes también.

En este artículo, aprenderemos cómo escribir funciones utilizando funciones de flecha en JavaScript y cómo convertir sus funciones simples en funciones de flecha. Pero antes de saltar a eso, comprendamos algunos conceptos básicos sobre las funciones de flecha en JavaScript.

Funciones de flecha en JavaScript

ES6 nos proporcionó una de las características más importantes y útiles que es una función de flecha que ayuda en la declaración de funciones de una manera más simple y reduce las líneas de código. La sintaxis de la función de flecha se menciona a continuación:

Sintaxis:

Let FunctionName = (P1, P2, ... Pn) =>
declaraciones)

Aquí,

• nombre de la función: El nombre de la función
• P1, P2, .. . PN: Estos son los parámetros de las funciones
• declaraciones): Las líneas del código JavaScript dentro del cuerpo de la función.

Usando estos podemos convertir nuestro código complejo en una versión más precisa y compacta. Las siguientes son algunas de las características que proporciona:

Retorno implícito

A través de esto, el uso de cualquier tipo de paréntesis, funciones o las palabras clave de retorno se vuelven opcionales, lo que permite el retorno implícito. Aquí hay un ejemplo:

// función de flecha
ejemplo.onClick = (x, y, z) => esto.hacer algo()
// equivalente a la función simple
ejemplo.onClick = function (x, y, z)
devolver esto.hacer algo();
.atar (esto);

Mediante el uso de funciones de flecha, es simplemente permitir una sola expresión y devolverla implícitamente.

"Esto" vinculante : Vincula automáticamente la palabra clave "esto" al código rodeado por funciones de flecha. Por ejemplo:

var x = esto;
ejemplo.onClick = function ()
X.hacer algo();
;

a

ejemplo.onClick = () => esto.hacer algo()

Además, proporciona una versión más corta, más simple y compacta de su código.

Cómo usar las funciones de flecha en JavaScript

En JavaScript, podemos usar funciones de flecha con parámetros únicos, múltiples o incluso sin parámetros. Son útiles para una acción de una línea, reduciendo el código de múltiples líneas en menos líneas y, por lo tanto, guardar espacio. Entendamos esto con el ejemplo:

Función de flecha JavaScript sin parámetros

La siguiente sintaxis se usa cuando la función de flecha funciona con cero parámetros.

Sintaxis:

() => Declaración (s)

Aquí, la declaración es el cuerpo de la función que contiene líneas de código.

Ejemplo:

dejar imprimir = () => Consola.log ("hola");
imprimir();

En el ejemplo anterior, simplemente estamos imprimiendo "hola" usando la función de flecha. Como puede ver, las funciones de flecha no tienen ningún nombre, por lo que también se conocen como funciones anónimas. En última instancia, no podemos llamar o reutilizarlos nuevamente cuando sea necesario, ya que no tienen ningún nombre, pero si tenemos que llamar o reutilizar las funciones de flecha, debemos asignarlas a una variable y luego llamarlos usando ese nombre de variable.

Aquí, lo hemos asignado a la variable "Imprimir" y llamamos a la variable en la segunda línea.

Producción:

Función de flecha JavaScript con un solo parámetro

En el caso de un solo parámetro, se utiliza la siguiente sintaxis:

Sintaxis:

(p) => Declaración (s)

O puede eliminar los paréntesis y reescribirlo como:

P => Declaración (s)

Aquí, la declaración es el cuerpo de la función que contiene líneas de código y pag ¿Se pasa el parámetro?.

Ejemplo:
En este ejemplo, la función de flecha se está utilizando como un argumento del método map () que convierte una matriz de cadenas en una matriz que contiene la longitud de la cadena:

Let days = ['lunes', 'martes', 'miércoles'];
Dejar longitudes = días.mapa (días => días.longitud);
consola.log (longitudes);

Producción:

Función de flecha JavaScript con múltiples parámetros

La siguiente sintaxis se usa al pasar dos o más parámetros:

Sintaxis:

(P1, P2, ..., Pn) => Declaración;

Aquí, la declaración es el cuerpo de la función que contiene líneas de código y pag ¿Se pasa el parámetro?. En esto, la declaración "=>" es equivalente a:

=> Declaración de retorno;

En el siguiente ejemplo, se usa un método Sort () sin usar la función de flecha, para ordenar los números en orden descendente:

dejar num = [3,1,5];
numer.sort (función (a, b)
regreso b - a;
);
consola.log (num);

Esto se puede transformar en una función de flecha

dejar num = [3,1,5];
numer.sort ((a, b) => b - a);
consola.log (num);

En el ejemplo anterior, la función tiene una sola expresión "B-A", por lo que simplemente devuelve el resultado de la expresión. Pero en caso de sintaxis de bloque, debe mencionar la palabra clave de retorno.

Producción:

De esta manera, podemos transformar cualquier función en una función de flecha. Pero, hay dos puntos que deben tenerse en cuenta mientras se trabaja con funciones de flecha:

• La función de flecha no debe usarse para la creación de métodos dentro de los objetos
• Las funciones de flecha no se pueden usar como constructor.

Conclusión

Las funciones de flecha son la forma más fácil de declarar cualquier función y reduce las líneas de los códigos, sin afectar la funcionalidad del código. En este artículo aprendimos que las funciones de flecha son extremadamente útiles, cómo convierten una sintaxis compleja y una larga línea de código en código más compacto y simple. Además, no es necesario nombrar una función de flecha a menos que tenga que llamar o reutilizar la función.

Al principio, las funciones de flecha pueden parecer difíciles, pero con el tiempo a medida que comprende el concepto, se vuelven más fáciles y convenientes de implementar. Por lo tanto, convirtiendo su código en menos líneas con una lógica más simple.