Cómo usar las funciones de flecha en JavaScript

La sintaxis de las funciones de flecha se introdujo con ECMAScript6: al usar esta nueva sintaxis, en algunos (pero no en todos), podemos producir un código más conciso y legible, especialmente cuando nuestra función contiene una sola expresión. En este tutorial veremos cómo podemos definir una función de flecha, cuáles son las diferencias con las funciones estándar y cuáles son los casos en que el uso de funciones de flecha no es apropiado.

En este tutorial aprenderás:

• ¿Qué es una función de flecha?.
• Cómo se define una función de flecha.
• Las diferencias entre las funciones de flecha y las funciones estándar.
• Los casos en los que no se pueden usar las funciones de flecha.

Requisitos de software y convenciones de línea de comandos de Linux

Categoría	Requisitos, convenciones o versión de software utilizada
Sistema	Sistema operativo agnóstico.
Software	Una instalación de nodo Para seguir este tutorial en un entorno no artificial.
Otro	Conocimiento de JavaScript y conceptos orientados a objetos.
Convenciones	# - requiere que los comandos de Linux dados se ejecuten con privilegios raíz directamente como un usuario raíz o mediante el uso de sudo dominio ps - Requiere que los comandos de Linux dados se ejecuten como un usuario regular no privilegiado

¿Qué es una "función de flecha"??

Las funciones de flecha se introdujeron con ECMAScript6: al usar esta nueva sintaxis, a menudo podemos obtener un código más conciso, en algunos casos traducir devoluciones de llamada de varias líneas a frases únicas, gracias a características como la Retorno implícito. Debido a sus peculiaridades, sin embargo, las funciones de flecha no pueden reemplazar las funciones estándar en todas partes: hay algunos contextos en los que no podemos usarlas, y veremos por qué.

---

---

Desde funciones estándar hasta funciones de flecha

En este párrafo veremos un ejemplo de cómo podemos reemplazar una función estándar con una función de flecha: utilizaremos una devolución de llamada de función de orden superior como un ejemplo perfecto de cuando se realiza dicha sustitución está completamente bien.

Como seguramente sabes, un función de orden superior es una función que devuelve otra función o acepta otra función como argumento. En este ejemplo usaremos filtrar, o formación.prototipo.filtrar Si te gusta. Este método del objeto de matriz, toma una función como su argumento y devuelve una nueva matriz, poblada por todos los elementos de la matriz original que son positivas para la prueba implementada dentro de la función de devolución de llamada.

Veamos un ejemplo de usar filtro con una función clásica. Imagina que tenemos una variedad de objetos, Cada uno de ellos representa personajes del libro "El señor de los anillos":

const caracteres = [nombre: 'Frodo', Race: 'Hobbit', Nombre: 'Sam', Race: 'Hobbit', Nombre: 'Legolas', Race: 'Elf', Nombre: ' Aragorn ', raza:' hombre ', nombre:' Boromir ', raza:' hombre '] 

Copiar

El caracteres La matriz contiene 5 elementos; Cada uno de ellos tiene dos propiedades: nombre y carrera. Ahora, supongamos que queremos crear una nueva matriz poblada solo por los personajes que pertenecen a la raza de los hombres. Usando el filtro y la sintaxis de la función estándar, escribimos:

const hombres = personajes.filtro (función filtreMen (elemento) elemento return.raza == 'hombre'; ); 

Copiar

Como se dijo antes, filtrar, toma una función como argumento: cuando se usa la sintaxis estándar, esta función puede ser nombrada o anónima. En la mayoría de las situaciones, las funciones anónimas se usan como devoluciones de llamada, pero en aras de este ejemplo, y para resaltar más tarde una de las diferencias entre la sintaxis de las funciones estándar y de flecha, dimos un nombre a nuestra función: Filtermen.

La función de devolución de llamada para usarse con filtrar, Toma solo uno obligatorio Parámetro, que es el elemento de la matriz original que se está procesando cada vez. Si la función regresa verdadero, El elemento se inserta como miembro de la nueva matriz, si la función regresa FALSO El elemento no es. En este caso específico, definimos una prueba simple:

personaje.raza == 'hombre'

Copiar

Esta prueba regresa verdadero Si el carrerapropiedad del elemento que se está procesando, es igual a la cadena 'hombre'. Aquí está el resultado de lo que escribimos anteriormente:

[nombre: 'Aragorn', Race: "Man ', Nombre:' Boromir ', Race:" Man'] 

Copiar

Ahora, supongamos que queremos refactorizar el código anterior usando un función de flecha. Escribiríamos:

const hombres = personajes.filtro (elemento => elemento.raza == 'hombre'); 

Copiar

Mediante el uso del Funciones de flecha Sintaxis, hemos podido lograr el mismo resultado del ejemplo anterior con una sola línea de código: qué agradable es eso?!. No se preocupe si a primera vista la nueva sintaxis lo confunde, solo continúa leyendo.

La función de la función de flecha sintaxis

Mientras definimos una función estándar utilizando el función Palabra clave, una función de flecha se define utilizando el => símbolo. Esta, obviamente, no es la única diferencia entre los dos: una de las más importantes que debemos destacar aquí es que, si bien las funciones clásicas, en las expresiones de funciones, pueden ser nombradas o anónimas, las funciones de flecha siempre son anónimas.

---

---

Definición de argumentos en funciones de flecha

En el ejemplo anterior, ya que nos deshacemos del función Palabra clave, lo primero que podemos leer es elemento, ¿Cuál es el argumento aceptado por la función de flecha?. La regla a seguir al definir los argumentos esperados por una función de flecha es simple: si la función acepta múltiples argumentos, o no hay argumentos en absoluto, debemos encerrarlos entre paréntesis; Si la función contiene solo un argumento, como es el caso en nuestro ejemplo, podemos omitir el paréntesis por completo.

Como ejemplo, imagine que queremos definir una función que devuelva el producto de dos números aprobados como sus argumentos. Escribiríamos:

// Dado que la función toma dos parámetros, debemos usar paréntesis const multiply = (a, b) => a * b; 

Copiar

Retorno implícito y aparatos ortopédicos rizados

En todos los ejemplos anteriores, puede haber notado la ausencia de otra cosa: el aparatos ortopédicos que delimitan el cuerpo de la función. ¿Por qué los omitimos?? Si el cuerpo de la función de flecha consta de una sola expresión, se pueden omitir los aparatos rizados: si es el caso, el resultado de la expresión se devuelve implícitamente:

// Si omitimos los frenos rizados, el resultado de la expresión se devuelve implícitamente const multiply = (a, b) => a * b; multiplicar (2,3); 6 // El resultado es 6: se devuelve implícitamente // si usamos aparatos ortopédicos rizados, el resultado no se devuelve implícitamente const multiply = (a, b) => a * b multiply (2,3); Undefinado // El resultado estará indefinido, ya que no devolvimos explícitamente el resultado de la expresión 

Copiar

En el código anterior definimos una función muy simple, multiplicar: Esta función espera dos parámetros, por lo tanto, debemos encerrarlos entre paréntesis. El => El símbolo define la función de flecha. En el primer ejemplo, dado que solo tenemos una expresión, que devuelve el producto de los dos números aprobados como parámetros, podemos omitir los aparatos ortopédicos y aprovechar la función de retorno implícita.

En el segundo ejemplo utilizamos los aparatos ortopédicos rizados, por lo tanto, la función regresó indefinido, Dado que no tenemos un retorno implícito: para obtener el resultado esperado, deberíamos haber usado devolver explícitamente.

Múltiples declaraciones o expresiones en el cuerpo de funciones

Los frenos rizados también son la única forma en que podemos especificar múltiples declaraciones o expresiones dentro de una función de flecha. Por ejemplo, supongamos que, en lugar de devolver el producto de dos números, queremos que nuestra función emita una cadena, mostrándola:

const multiply = (a, b) => const producto = a*b; consola.log ('el producto de $ a y $ b es $ producto');  multiplicar (2,3); El producto de 2 y 3 es 6 

Copiar

¿Qué pasa si nuestras funciones de flecha tienen que devolver un objeto literal, delimitado por los aparatos ortopédicos?? En ese caso, debemos encerrar el objeto literal entre paréntesis:

---

---

const createChar = (Charactername, caracteresRace) => (nombre: Charactername, Race: caracteresrace); createChar ('Gimli', 'Dwarf') Nombre: "Gimli ', Race:" Dwarf' 

Copiar

Cómo este se comporta dentro de las funciones de flecha

Una de las diferencias más relevantes, si no más relevantes entre las funciones clásicas y las funciones de flecha, es cómo este obras. Esta diferencia es la razón principal por la que en algunos casos no podemos usar las funciones de flecha, como veremos pronto. Antes de resaltar las diferencias, recapitulemos como este funciona cuando se usa en funciones estándar. Lo primero que debe recordar es que el valor de este está determinado por cómo se llama la función en sí, veamos algunos ejemplos.

El valor por defecto: este es una referencia al alcance global

Cuando este se usa dentro de una función independiente, y no estamos trabajando en Modo estricto, es referencias el alcance global, que es el ventana objeto en un entorno de navegador, o el objeto global en nodo.js. En la misma situación, pero en modo estricto, este será indefinido y recibiremos un error:

var i = 20; // Aquí usamos var en lugar de let Let porque este último no crea una propiedad en el alcance global. función foo () consola.Log (esto.i);  // Modo no estricto foo () 20 // Modo estricto foo () typeError: No se puede leer la propiedad 'i' de indefinido 

Copiar

Vinculación implícita

Cuando se hace referencia a una función estándar dentro de un objeto, y esa función se llama con ese objeto como un contexto, Usando la notación de puntos, este se convierte en una referencia a ese objeto. Esto es lo que llamamos vinculación implícita:

función foo () consola.Log (esto.i);  Let Object = i: 20, foo: foo // La propiedad foo es una referencia a la función foo objeto.foo () // Esta es una referencia al objeto, así que esto.yo es objeto.I 20 

Copiar

Vinculación explícita

Decimos que estamos usando un vinculación explícita Cuando declaramos explícitamente lo que este debe hacer referencia. Se puede lograr usando el llamar, aplicar o unir Métodos de una función (que en JavaScript es en sí mismo un objeto de primera clase. Recuerde el primer caso que mencionamos anteriormente, cuando se aplica el enlace predeterminado:

var i = 20; función foo () consola.Log (esto.i);  const objeto = i: 100 foo () // Esto emitirá 20 o generará un typeError en modo estricto. // Si establecemos explícitamente esto como una referencia al objeto, las cosas cambian. // Llame y aplique Ejecutar la función inmediatamente con el nuevo contexto: Foo.llamar (objeto) // la salida es 100 foo.Aplicar (objeto) // la salida es 100 // en su lugar, devuelve una nueva función con el contexto especificado. Let Boundfoo = foo.Bind (Object) Boundfoo () // La salida es 100 

Copiar

Son algunas diferencias entre llamar, aplicar y unir: lo relevante es que este último devuelve un nueva función ligado al contexto especificado, mientras que con los otros dos, la función, unida al contexto especificado, se ejecuta inmediatamente. Hay otras diferencias, pero no las veremos aquí. Lo importante es comprender cómo funciona explícitamente vinculante.

Cómo las funciones de flecha son diferentes en este respecto?

En todos los casos y ejemplos anteriores, vimos cómo, al usar funciones estándar, el valor de este depende de cómo se llame la función. Funciones de flecha, en su lugar, use el Léxico esto: no tienen el suyo este, Pero siempre usa el este de su alcance de la cierra. Un ejemplo típico en el que esto podría producir efectos inesperados es en los oyentes de eventos. Supongamos que tenemos un botón con ID "Button1", y queremos cambiar su texto cuando se haga clic:

---

---

Haz click en mi! // El oyente de eventos con una función estándar como documento de devolución de llamada.getElementById ('Button1').addEventListener ('hacer clic', function () this.inteText = "Haga clic!";) 

Copiar

El código funciona perfectamente, y una vez que se hace clic en el botón, su texto cambia como se esperaba. ¿Qué pasa si usamos una función de flecha en este caso?? Supongamos que lo escribimos así:

documento.getElementById ('Button1').addEventListener ('Click', () => esto.inteText = "Haga clic!";) 

Copiar

El código anterior no funciona, ¿por qué? Fácil: porque, como dijimos antes, mientras estaba en el primer ejemplo, este Dentro de la función de devolución de llamada estándar hace referencia al objeto en el que ocurre el evento (el botón), cuando usamos la función de flecha este se hereda del alcance principal, que en este caso es el ventana objeto. En aras de la integridad, debemos decir que el ejemplo anterior podría arreglarse fácilmente para trabajar con una función de flecha:

documento.getElementById ('Button1').addEventListener ('hacer clic', evento => Evento.objetivo.inteText = "Haga clic!";) 

Copiar

Esta vez el código funciona porque no usamos este Para hacer referencia al botón, pero dejamos que nuestra función acepte un argumento, que es evento. En el cuerpo de la función usamos evento.objetivo Para hacer referencia al objeto que envió el evento.

Por la misma razón que mencionamos anteriormente, las funciones de flecha no pueden usarse como métodos de objeto o métodos prototipo:

// Las funciones de flecha no funcionan como métodos de objeto ... const object1 = i: 1000, foo: () => consola.log ('El valor de I es $ esto.i ') objeto1.foo () El valor de I está indefinido // ... y no funcionan como métodos prototipo. constt Person = function (nombre, edad) this.nombre = nombre; este.edad = edad;  Persona.prototipo.introducir = () => Consola.Log ('Mi nombre es $ esto.nombre y yo soy $ esto.edad años '); const jack = nueva persona ('Jack', 100); Jacobo.Nombre 'Jack' Jack.Edad 100 Jack.introducir () mi nombre está indefinido y tengo años indefinidos 

Copiar

Conclusiones

La sintaxis de la función de flecha es una característica muy buena introducida con ECMAScript6. Con esta nueva forma de definir funciones podemos escribir un código más corto y limpio. Vimos cómo definir una función de flecha y cómo funciona la nueva sintaxis.

También vimos por qué las funciones de flecha no pueden reemplazar las funciones estándar en todas las circunstancias, porque no tienen las suyas este, y usa el de su alcance adjunto: esto, como vimos en este tutorial, no se puede usar como métodos o constructores. Si está interesado en otros tutoriales de JavaScript, estén atentos: en el próximo tutorial hablaremos sobre el buscar, función. Mientras tanto, puede consultar nuestro artículo sobre promesas.

Tutoriales de Linux relacionados:

• Bash Regex avanzado con ejemplos
• Introducción a JavaScript Loops
• Una introducción a la automatización, herramientas y técnicas de Linux
• Mastering Bash Script Loops
• Cosas para instalar en Ubuntu 20.04
• Bucles anidados en guiones Bash
• Bash regexps para principiantes con ejemplos
• Mint 20: Mejor que Ubuntu y Microsoft Windows?
• Tutorial de depuración de GDB para principiantes
• Crear redireccionamiento y reescribir reglas en .Htaccess en Apache ..