Tutorial de la función de flecha de ES6

 

Echemos un vistazo a las funciones de flecha de ES6 . Si ha pasado una cantidad de tiempo programando JavaScript, sabe que después de un tiempo, se siente como si estuviera escribiendo esa palabra clave de función una y otra y otra vez. Escribe una función aquí, escribe una función allí. Aquí una función, allí una función, en todas partes una función función. Esto se debe a que cada vez que desee que suceda algo en su secuencia de comandos, ¡debe escribir otra función! ¿Alguna vez has pensado, "sería bueno si no tuviera que escribir la palabra clave de función con tanta frecuencia". Si es así, tiene suerte con ES6, porque hay una nueva forma abreviada para escribir funciones y se las conoce como funciones de flecha ES6 . Investigámoslos un poco ahora.

---

Las funciones de flecha usan la sintaxis Fat Arrow

Es posible que haya oído hablar de estas nuevas funciones de flecha como el uso de la sintaxis de flecha gruesa . Esto se debe a que este nuevo símbolo para definir funciones en ES6 es la combinación de un signo igual =y un símbolo mayor que >. Póngalos juntos y ahora tiene su flecha gorda =>. El signo igual es lo que engorda a la flecha. Así que comencemos creando una función en ES5, y luego veamos qué tenemos que hacer para convertirla en una función de flecha de ES6.

---

Aquí hay un ejemplo de una función de suma simple en ES5

1 2 3 4 5 6 7

var sum = function (num1, num2) {     return num1 + num2; };   console.log(sum(7, 12));   // 19

Podemos reescribir esta función usando flechas gruesas =>en un par de pasos.

• 1. Elimina la functionpalabra clave a la izquierda de los argumentos de la función.
• 2. Inserta una flecha ancha a la derecha de los argumentos de la función.

---

Tu primera función de flecha

1 2 3 4 5 6 7

var sum = (num1, num2) => {     return num1 + num2; };   console.log(sum(7, 12));   // 19

¡Felicidades! ¡Acaba de crear su primera función de flecha en ES6! Demos un paso más.

Puede omitir la returnpalabra clave para expresiones simples colocando todo en una línea y eliminando los corchetes o llaves como tal.

1 2 3 4 5

var sum = (num1, num2) => num1 + num2;   console.log(sum(7, 12));   // 19

Finalmente, si solo hay un argumento para la función, incluso puede dejar el paréntesis así.

1 2 3 4 5

var square = num1 => num1 * num1;   console.log(square(7));   // 49

Ahora tiene menos posibilidades de desarrollar el síndrome del túnel carpiano debido al estrés repetitivo de la función de mecanografía.

---

Las funciones de flecha sin entrada deben usar paréntesis

En este ejemplo a continuación, creamos una función de flecha súper simple y la asignamos a la pointsvariable. En contraste con el ejemplo anterior donde cuadramos un número a través de una función y requiere un número como parámetro, esta función aquí no tiene parámetro. Si no hay ningún parámetro para una función de flecha, debe utilizar la sintaxis de paréntesis vacía.

1 2 3 4 5

'use strict'; var points = () => 100; console.log(typeof points);   // function

---

Captura de pantalla de la función de flecha resaltada

Esta captura de pantalla resalta el área en el código que forma la función de flecha. Tenga en cuenta la falta de parámetros, declaración de retorno o llaves.

---

Cerrar una llamada a la función de flecha

1 2 3 4 5

'use strict'; var points = () => 100; console.log(points());   // 100

Si desconectamos el valor de una llamada a la points()función, podemos ver que obtenemos el resultado de 100. Verá, el código está manejando la devolución del valor por nosotros, no necesitamos especificarlo manualmente escribiendo la returnpalabra clave.

---

Ejemplo de función de flecha de argumento único

La única vez que no puede usar paréntesis es cuando hay un argumento para una función de flecha. Esto puede resultar un poco confuso. Si prefiere seguir una convención de solo usar el paréntesis en todos los casos de uso de una función de flecha ES6, puede hacerlo. Este ejemplo aquí de una función de flecha ES6 de un argumento funciona bien cuando incluimos el paréntesis.

1 2 3 4 5

'use strict'; var points = (multiplier) => multiplier * 10; console.log(points(4));   // 40

La misma función funciona de la misma manera si omitimos el paréntesis.

1 2 3 4 5

'use strict'; var points = multiplier => multiplier * 10; console.log(points(4));   // 40

---

Otro ejemplo de múltiples argumentos usando paréntesis

1 2 3 4 5

'use strict'; var points = (multiplier, bonus) => multiplier * 10 * (1 + bonus); console.log(points(3, 2));   // 90

---

Hacer uso de bloques o corchetes con funciones de flecha

1 2 3 4 5 6 7 8 9

'use strict'; var points = (multiplier, bonus) => {     var score = multiplier * 10;     score *= (1 + bonus);     return score; }; console.log(points(3, 2));   // 90

Las funciones de flecha de una sola línea son perfectas para expresiones simples. La mayoría de las veces, necesitará utilizar funciones que hagan más que una simple expresión que pueda caber en una línea. En ese caso, ciertamente puede hacer uso de corchetes como está acostumbrado a hacer al definir funciones. Una cosa clave para recordar al usar corchetes con funciones de flecha: debe incluir la returnpalabra clave para devolver un valor de su función. La devolución de un valor no sucederá automáticamente como sucedería con una función de flecha de una sola línea. Mantén esto en mente.

---

Función de flecha de varias líneas resaltada

---

Donde la Flecha Gorda no tiene sentido

Ahora que está familiarizado con las flechas gruesas y cómo escribir menos, mientras hace que su código sea más conciso, probablemente esté listo para eliminar todo rastro de una functionpalabra clave en cualquier proyecto en el que esté trabajando. Vaquero no tan rápido. Las flechas gordas no tienen sentido en todas partes. Por lo general, evitará el uso de la flecha gruesa en las funciones del constructor, así como en las extensiones de los prototipos. Si está utilizando ES6, es probable que utilice la sintaxis de la clase de todos modos, por lo que no tendrá que preocuparse demasiado por eso. Sin embargo, es un buen punto a tener en cuenta.

---

this es diferente en ES6 vs ES5!

Es probable que esté muy familiarizado con cómo funciona esto en ES5. Para ser honesto, es bastante confuso y hay una gran cantidad de reglas que determinan lo que thisrealmente apunta en un momento dado en su código JavaScript. Las funciones de flecha en ES6 toman todas las reglas de cómo usar thisen ES5 y las arrojan por la ventana. En ES6, las funciones de flecha vienen con enlace de contexto automático . El objetivo de esto es, con suerte, facilitar el uso de la thispalabra clave, ya que ya no debería tener que preocuparse tanto por el enlace de contexto. Considere este fragmento de código ES5 adjuntando un evento de clic al documento.

1 2 3 4 5 6

'use strict'; document.addEventListener('click', function () {    console.log(this); });   // #document

En ES5, cada vez que tenemos un controlador de eventos en nuestro código, thisse establece en el elemento que recibe el evento. Esto resulta en no tener acceso al contexto de la función.

Ahora cambiemos este código para hacer uso de una función de flecha y veamos cómo afecta esto this.

1 2 3 4

'use strict'; document.addEventListener('click', () => console.log(this));   // Window {...}

Esta vez, dado que estamos usando una función de flecha, thisse establece en el objeto Ventana global ya que estamos en el ámbito global. No estamos en el contexto de una función. Con la función de flecha, se thisrefiere al contexto real del código que estamos ejecutando.

Llevando esta idea un poco más allá, veamos las funciones de llamada que existen en los objetos en ES5 vs ES6.

1 2 3 4 5 6 7 8 9 10

'use strict'; var bill = {     servicenumber: 557,     process: function () {         console.log(this);     } }; bill.process();   // Object {servicenumber: 557}

Esto muestra que en este ejemplo, thisse está configurando el objeto en el que se llama a la función.

¿Qué sucede si cambiamos esto para usar una función de flecha? Veamos.

1 2 3 4 5 6 7 8

'use strict'; var bill = {     servicenumber: 557,     process: () => console.log(this) }; bill.process();   // Window {...}

Con la función de flecha en su lugar, obtenemos el contexto del código que estamos ejecutando. O en otras palabras, ¿en qué ámbito está operando este código en particular? En este caso es el alcance global, por lo tanto obtenemos el objeto Ventana global ya que este es el que representa el alcance global.

---

Contexto de función en ES6

1 2 3 4 5 6 7 8 9 10

'use strict'; var bill = {     servicenumber: 557,     process: function () {         return () => console.log(this.servicenumber);     } }; bill.process()();   // 557

Este ejemplo es un objeto literal que tiene un servicenumbervalor y una función de proceso. Esa función de proceso, en realidad, devuelve una función. Luego llamamos a la función de proceso e inmediatamente llamamos a la función devuelta. Esto es lo que se entiende por bill.process () (); Entonces, ¿qué está sucediendo thisdentro de la función devuelta? Bueno, la función de flecha se está ejecutando dentro del contexto de otra función, y es por eso que vemos el valor de en this.servicenumberlugar del objeto de ventana global.

---

bind no funciona con las funciones de flecha!

Llevando el código anterior un paso más allá, creamos otro objeto literal que también tiene una servicenumberpropiedad. Es posible que esté familiarizado con la llamada al bind()método en ES5 para establecer el contexto que elija. Probémoslo aquí con una función de flecha.

1 2 3 4 5 6 7 8 9 10 11 12 13

'use strict'; var bill = {     servicenumber: 557,     process: function () {         return () => console.log(this.servicenumber);     } }; var newBill = {     servicenumber: 900 }; bill.process().bind(newBill)();   // 557

¡Ahora mira eso! Pensarías que servicenumberlo sería 900, ya que intentamos vincular el newBillobjeto literal a nuestra función de proceso. Sin embargo, esto no funciona con las funciones de flecha ES6. Esto no produjo ningún error ni nada, por lo que si no supiera nada mejor, no tendría ni idea de por qué bind()estaba fallando. Con las funciones de flecha ES6, no puede utilizar bind().

Al igual que en el ejemplo anterior, ¡hacer uso de call()tampoco funciona!

1 2 3 4 5 6 7 8 9 10 11 12 13

'use strict'; var bill = {     servicenumber: 557,     process: function () {         return () => console.log(this.servicenumber);     } }; var newBill = {     servicenumber: 900 }; bill.process().call(newBill);   // 557

Con ES6 flecha funciones, utilizando bind(), call()y apply(), son todos inútiles! No se puede cambiar el valor de this.

---

Las flechas gordas no pueden ir en una nueva línea.

Aquí hay solo un consejo rápido sobre la sintaxis de las funciones de flecha. No puede colocar la flecha gruesa en una nueva línea o el script fallará.

1 2 3 4 5 6

'use strict'; var somenumber = ()   => 1234; console.log(typeof somenumber);   // Uncaught SyntaxError: Unexpected token =>

Deberá mantener la flecha gruesa en la misma línea y estará bien.

1 2 3 4 5

'use strict'; var somenumber = () => 1234; console.log(typeof somenumber);   // function

---

Las funciones de flecha no tienen prototipo

Otra cosa interesante a tener en cuenta con las funciones de flecha es que no tienen propiedad de prototipo. Las funciones declaradas mediante la palabra clave function tienen una propiedad de prototipo.

1 2 3 4 5

'use strict'; var somenumber = () => 1234; console.log(somenumber.hasOwnProperty('prototype'));   // false

Veamos algunos ejemplos del uso de la nueva sintaxis de clase en ES6. Estos dos primeros ejemplos hacen uso this, pero no en el contexto de una función de flecha. Esto es solo para familiarizarnos con la sintaxis antes de probar thisdentro de una función de flecha en un código más complejo.

---

Uso de la función ES5 en la función de registro

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

class GamesCollection {     constructor(games = []) {         this.games = games;     }       log() {         this.games.forEach(function (game) {             console.log(game.name + ' on ' + game.platform);         })     } }   class Game {     constructor(name, platform) {         this.name = name;         this.platform = platform;     } }   new GamesCollection([     new Game('Zelda', 'Nintendo'),     new Game('Halo', 'Xbox'),     new Game('Mario', 'Nintendo') ]).log();   // Zelda on Nintendo // Halo on Xbox // Mario on Nintendo

---

Usar una función de flecha en la función de registro

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

class GamesCollection {     constructor(games = []) {         this.games = games;     }       log() {         this.games.forEach((game) => {             console.log(game.name + ' on ' + game.platform);         })     } }   class Game {     constructor(name, platform) {         this.name = name;         this.platform = platform;     } }   new GamesCollection([     new Game('Zelda', 'Nintendo'),     new Game('Halo', 'Xbox'),     new Game('Mario', 'Nintendo') ]).log();   // Zelda on Nintendo // Halo on Xbox // Mario on Nintendo

En los dos ejemplos anteriores, obtenemos el mismo resultado si estamos usando funciones ES5 de funciones de flecha ES6 en la función de registro. Cada tipo no hace uso de la thispalabra clave, por lo que es de esperar.

Ahora cambiemos las cosas para hacer uso de la thispalabra clave dentro de la función de registro para ver qué sucede.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

class GamesCollection {     constructor(games = []) {         this.games = games;     }       log() {         this.games.forEach(function (game) {             console.log(this);         })     } }   class Game {     constructor(name, platform) {         this.name = name;         this.platform = platform;     } }   new GamesCollection([     new Game('Zelda', 'Nintendo'),     new Game('Halo', 'Xbox'),     new Game('Mario', 'Nintendo') ]).log();   // undefined // undefined // undefined

Tenga thisen cuenta que dentro de la función de registro es ahora undefined.

¿Qué tal si lo convertimos en una función de flecha ES6? Veamos qué pasa.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

class GamesCollection {     constructor(games = []) {         this.games = games;     }       log() {         this.games.forEach((game) => {             console.log(this);         })     } }   class Game {     constructor(name, platform) {         this.name = name;         this.platform = platform;     } }   new GamesCollection([     new Game('Zelda', 'Nintendo'),     new Game('Halo', 'Xbox'),     new Game('Mario', 'Nintendo') ]).log();   // GamesCollection {games: Array[3]} // GamesCollection {games: Array[3]} // GamesCollection {games: Array[3]}

En este ejemplo anterior, se thisrefiere a cada instancia del GamesCollectionObjeto a medida que las recorre.

---

Prueba thiscontra diferentes instancias de un objeto

Veamos un ejemplo más de cómo thisestá vinculado en las funciones de flecha frente a las funciones de ES5. A continuación, configuramos un constructor para un idioma. Luego ampliamos el prototipo de Language con una función greet (). Esta función simplemente cierra la sesión de su nombre después de un breve retraso.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var Language = function (name, delay) {     this.name = name;     this.delay = delay; };   Language.prototype.greet = function () {     setTimeout(() => {         console.log('Hi, I am ' + this.name);     }, this.delay); };   var java = new Language('PHP', 2000); var cpp = new Language('JavaScript', 30);   java.greet(); cpp.greet();   // Hi, I am JavaScript // 2 seconds later // Hi, I am PHP

¡Agradable! En este primer ejemplo, estamos usando una función de flecha y cuando llamamos a la función de saludo en dos objetos diferentes, thisautomáticamente apunta a la instancia correcta.

Eliminemos ahora la función de flecha y reemplácela con una función de estilo ES5. Obtenemos resultados diferentes.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var Language = function (name, delay) {     this.name = name;     this.delay = delay; };   Language.prototype.greet = function () {     setTimeout(function() {         console.log('Hi, I am ' + this.name);     }, this.delay); };   var java = new Language('PHP', 2000); var cpp = new Language('JavaScript', 30);   java.greet(); cpp.greet();   // Hi, I am // 2 seconds later // Hi, I am

Ahora, el código se rompe porque thisahora apunta al objeto de ventana global, en lugar de cualquier instancia de Language.

Para solucionar este problema en ES5, tuvimos que utilizar bind()like so

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var Language = function (name, delay) {     this.name = name;     this.delay = delay; };   Language.prototype.greet = function () {     setTimeout(function () {         console.log('Hi, I am ' + this.name);     }.bind(this), this.delay); };   var java = new Language('PHP', 2000); var cpp = new Language('JavaScript', 30);   java.greet(); cpp.greet();   // Hi, I am JavaScript // 2 seconds later // Hi, I am PHP

El código ahora vuelve a funcionar cuando se utilizan funciones de ES5 y bind().

---

Tutorial de la función de flecha de ES6

¡Felicitaciones, ahora eres un jefe en el uso de funciones de flecha en ES6! Bueno, tal vez todavía no sea el modo jefe, pero este tutorial cubrió mucho de lo que necesitará saber para hacer un buen uso de las funciones de flecha en su código ES6. ¿Cuáles son los puntos principales? Los casos de uso de flechas gordas son azúcar sintáctico y una forma más compacta de escribir funciones. En ES6, funciones de dirección automática vienen con marco vinculante, que debe ayudar con no tener que preocuparse por mantener la unión contexto manualmente a través de bind(), call()o apply(). En funciones de constructor y extensiones de prototipo, no tiene sentido utilizar la sintaxis de flecha gruesa. Puede seguir utilizando la palabra clave de función en esos escenarios.