Arrow functions en JavaScript (funciones flecha)

Por Darío Rivera

Publicado el 2022-03-02 en Javascript

En un post anterior vimos todo acerca de las funciones en javascript. En este post dedicaremos un espacio especial a la funciones flecha las cuales tiene un comportamiento particular y bastante interesante. Después de leer este post tendrás un conocimiento profundo de las arrow functions en Javascript.

Este tipo de función es como un tipo de shorthand para funciones que simplifica bastante el código y además tiene un tipo de comportamiento particular con el this. Miremos la siguiente función:

const square = function(number) {
  return number * number;
}

En primer lugar con una arrow function nos podemos ahorrar la palabra function en la declaración.

const square = (number) => {
  return number * number;
}

Ya es una arrow function pero se puede mejorar. En este caso como la expresión de retorno consta de una sola línea no son necesarios los square brackets ni la palabra return.

const square = (number) => number * number;

Y como si fuera poco, como es un solo parámetro el que se recibe nos podemos ahorrar también los paréntesis.

const square = number => number * number;

Por otro lado, las funciones flecha al ser un tipo de shorthand se comportan de manera muy similar a las funciones anónimas, es decir, no tiene hosting. Además de esto las funciones flecha no pueden ser usadas en la declaración de métodos de clases.

Ahora bien, las funciones flecha no saben que es this, por lo cual lo toman del scope más cercano que se tenga. Veamos el siguiente código.

class MyMath
{
   constructor(number) {
       this.number = number;
   }
   square() {
     console.log('Square is ' + this.number * this.number);
   }
}

Al ejecutar este código se obtiene el resultado esperado.

(new MyMath(3)).square();   // Square is 9

Ahora veamos qué sucede cuando agregamos una función anónima que se autoinvoca y una función arrow autoinvocada.

class MyMath
{
   constructor(number) {
       this.number = number;
   }
   square() {
      (() => {
         console.log('Square is ' + this.number * this.number);
      })();
      (function(){
         console.log('Square is ' + this.number * this.number);
      })()
   }
}

Al ejecutar el código obtenemos lo siguiente

(new MyMath(3)).square();
// Square is 9
// Uncaught TypeError: Cannot read properties of undefined (reading 'number')

En el primer caso la arrow function interpreta el this más cercano el cual es el de la clase en cuestión e imprime el resultado. En el segundo caso la función autoinvocada como tiene hositing es "movida" al principio de su scope el cual es la misma clase en donde no existe nada!. No sé exactamente en qué punto del multiverso se encuentre esta función!. Modifiquemos un poco nuestro ejemplo con un objeto en el espacio global.

let myMath =
{
   number: 3,
   square() {
      (() => {
         console.log('Square is ' + this.number * this.number);
      })();
      (function(){
         console.log('Square is ' + this.number * this.number);
      })()
   }
}

Al ejecutar el código obtenemos lo siguiente

myMath.square()
// Square is 9
// Square is NaN

Ahora bien, podemos verificar que la función es hosteada cl comienzo si agregamos una definición de number al inicio del script.

window.number = 10

let myMath =
{
   number: 3,
   square() {
      (() => {
         console.log('Square is ' + this.number * this.number);
      })();
      (function(){
         console.log('Square is ' + this.number * this.number);
      })()
   }
}

Al ejecutar el código obtenemos lo siguiente

myMath.square()
// Square is 9
// Square is 100

En conclusión, las funciones flecha no tienen hoisting, por lo cual para invocarlas es necesario haberlas declarado previamente.

Categorías