JavaScript
Funciones de flecha

Introducción

Sintaxis

• x => y // Retorno implícito

• x => {return y} // Retorno explícito

• (x, y, z) => {...} // Múltiples argumentos

• async () => {...} // Funciones de flecha asíncrona

• (() => {...}) () // Expresión de función invocada de inmediato

• const myFunc = x

  => x * 2 // Un salto de línea antes de la flecha arrojará un error 'Señal inesperada'

• const myFunc = x =>

  x * 2 // Un salto de línea después de la flecha es una sintaxis válida

Observaciones

Introducción

En JavaScript, las funciones pueden definirse de forma anónima utilizando la sintaxis de "flecha" ( => ), que a veces se denomina una expresión lambda debido a las similitudes de Common Lisp .

La forma más simple de una función de flecha tiene sus argumentos en el lado izquierdo de => y el valor de retorno en el lado derecho:

item => item + 1 // -> function(item){return item + 1}

Esta función se puede invocar inmediatamente proporcionando un argumento a la expresión:

(item => item + 1)(41) // -> 42

Si una función de flecha toma un solo parámetro, los paréntesis alrededor de ese parámetro son opcionales. Por ejemplo, las siguientes expresiones asignan el mismo tipo de función en variables constantes :

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;

Sin embargo, si la función de flecha no toma parámetros, o más de un parámetro, un nuevo conjunto de paréntesis debe encerrar todos los argumentos:

(() => "foo")() // -> "foo"

((bow, arrow) => bow + arrow)('I took an arrow ', 'to the knee...')
// -> "I took an arrow to the knee..."

Si el cuerpo de la función no consiste en una sola expresión, debe estar entre corchetes y usar una declaración de return explícita para proporcionar un resultado:

(bar => {
  const baz = 41;
  return bar + baz;
})(1); // -> 42

Si el cuerpo de la función de flecha consiste solo en un objeto literal, este objeto literal debe estar entre paréntesis:

(bar => ({ baz: 1 }))(); // -> Object {baz: 1}

Los paréntesis adicionales indican que los corchetes de apertura y cierre son parte del objeto literal, es decir, no son delimitadores del cuerpo de la función.

Alcance y vinculación léxica (valor de "esto")

Las funciones de las flechas tienen un alcance léxico ; esto significa que su this unión es unido al contexto del ámbito circundante. Es decir, todo this refiere a esto se puede preservar utilizando una función de flecha.

Echa un vistazo al siguiente ejemplo. La clase Cow tiene un método que le permite imprimir el sonido que produce después de 1 segundo.

class Cow {

  constructor() {
    this.sound = "moo";
  }

  makeSoundLater() {
    setTimeout(() => console.log(this.sound), 1000);
  }
}

const betsy = new Cow();

betsy.makeSoundLater();

En el método makeSoundLater() , this contexto se refiere a la instancia actual del objeto Cow , por lo que en el caso donde llamo a betsy.makeSoundLater() , this contexto se refiere a betsy .

Al utilizar la función de flecha, conservo this contexto para poder hacer referencia a this.sound Cuando llegue el momento de imprimirlo, es necesario que se imprima correctamente "moo".

Si hubiera usado una función regular en lugar de la función de flecha, perdería el contexto de estar dentro de la clase y no podría acceder directamente a la propiedad de sound .

Objeto de argumentos

Las funciones de flecha no exponen un objeto de argumentos; por lo tanto, los arguments se referirían simplemente a una variable en el alcance actual.

const arguments = [true];
const foo = x => console.log(arguments[0]);

foo(false); // -> true

Debido a esto, las funciones de dirección tampoco son conscientes de su persona que llama / destinatario de la llamada.

Si bien la falta de un objeto de argumentos puede ser una limitación en algunos casos de borde, los parámetros de descanso son generalmente una alternativa adecuada.

const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);

foo(false); // -> false

Retorno implícito

Las funciones de flecha pueden devolver valores implícitamente al simplemente omitir las llaves que tradicionalmente envuelven el cuerpo de una función si su cuerpo solo contiene una sola expresión.

const foo = x => x + 1;
foo(1); // -> 2

Cuando se usan retornos implícitos, los literales de los objetos deben estar entre paréntesis para que las llaves no se confundan con la apertura del cuerpo de la función.

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}

Retorno explícito

Las funciones de flecha pueden comportarse de forma muy similar a las funciones clásicas , ya que puede devolver explícitamente un valor utilizando la palabra clave return ; simplemente envuelve el cuerpo de tu función entre llaves y devuelve un valor:

const foo = x => {
  return x + 1;
}

foo(1); // -> 2

La flecha funciona como un constructor.

Las funciones de flecha lanzarán un TypeError cuando se utilicen con la new palabra clave.

const foo = function () {
  return 'foo';
}

const a = new foo();

const bar = () => {
  return 'bar';
}

const b = new bar(); // -> Uncaught TypeError: bar is not a constructor...