Funciones Flecha

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since septiembre de 2016.

Learn more
See full compatibility

Una expresin de funcin flecha es una alternativa compacta a una expresin de funcin tradicional, pero es limitada y no se puede utilizar en todas las situaciones.

Diferencias y limitaciones:

No tiene sus propios enlaces a this o super y no se debe usar como mtodos.
No tiene argumentos o palabras clave new.target.
No apta para los mtodos call, apply y bind, que generalmente se basan en establecer un mbito o alcance
No se puede utilizar como constructor.
No se puede utilizar yield dentro de su cuerpo.

Prubalo

const materials = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

console.log(materials.map((material) => material.length));
// Expected output: Array [8, 6, 7, 9]

Comparacin de funciones tradicionales con funciones flecha

Observa, paso a paso, la descomposicin de una "funcin tradicional" hasta la "funcin flecha" ms simple: Nota: Cada paso a lo largo del camino es una "funcin flecha" vlida

// Funcin tradicional
function (a){
  return a + 100;
}

// Desglose de la funcin flecha

// 1. Elimina la palabra "function" y coloca la flecha entre el argumento y el corchete de apertura.
(a) => {
  return a + 100;
}

// 2. Quita los corchetes del cuerpo y la palabra "return"  el return est implcito.
(a) => a + 100;

// 3. Suprime los parntesis de los argumentos
a => a + 100;

Nota: Como se muestra arriba, los { corchetes }, ( parntesis ) y "return" son opcionales, pero pueden ser obligatorios.

Por ejemplo, si tienes varios argumentos o ningn argumento, debers volver a introducir parntesis alrededor de los argumentos:

// Funcin tradicional
function (a, b){
  return a + b + 100;
}

// Funcin flecha
(a, b) => a + b + 100;

// Funcin tradicional (sin argumentos)
let a = 4;
let b = 2;
function (){
  return a + b + 100;
}

// Funcin flecha (sin argumentos)
let a = 4;
let b = 2;
() => a + b + 100;

Del mismo modo, si el cuerpo requiere lneas de procesamiento adicionales, debers volver a introducir los corchetes Ms el "return" (las funciones flecha no adivinan mgicamente qu o cundo quieres "volver"):

// Funcin tradicional
function (a, b){
  let chuck = 42;
  return a + b + chuck;
}

// Funcin flecha
(a, b) => {
  let chuck = 42;
  return a + b + chuck;
}

Y finalmente, en las funciones con nombre tratamos las expresiones de flecha como variables

// Funcin tradicional
function bob(a) {
  return a + 100;
}

// Funcin flecha
let bob = (a) => a + 100;

Sintaxis

Sintaxis bsica

Un parmetro. Con una expresin simple no se necesita return:

param => expression;
(param) => expression;

Varios parmetros requieren parntesis. Con una expresin simple no se necesita return:

(param1, paramN) => expression;

Las declaraciones de varias lneas requieren corchetes y return:

(param) => {
  let a = 1;
  return a + b;
};

Varios parmetros requieren parntesis. Las declaraciones de varias lneas requieren corchetes y return:

(param1, paramN) => {
  let a = 1;
  return a + b;
};

Sintaxis avanzada

Para devolver una expresin de objeto literal, se requieren parntesis alrededor de la expresin:

(params) => ({ foo: "a" }); // devuelve el objeto {foo: "a"}

Los parmetros rest son compatibles:

(a, b, ...r) => expression;

Se admiten los parmetros predeterminados:

(a = 400, b = 20, c) => expression;

Desestructuracin dentro de los parmetros admitidos:

([a, b] = [10, 20]) => a + b; // el resultado es 30
({ a, b } = { a: 10, b: 20 }) => a + b; // resultado es 30

Descripcin

Consulta tambin "ES6 en profundidad: funciones flecha" en hacks.mozilla.org.

"`this`" y funciones flecha

Una de las razones por las que se introdujeron las funciones flecha fue para eliminar complejidades del mbito (this) y hacer que la ejecucin de funciones sea mucho ms intuitiva.

Nota: Si this es un misterio para ti, consulta este documento para obtener ms informacin sobre cmo funciona this. Para resumir, this se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave new. De lo contrario, this se establecer de forma predeterminada en el mbito o alcance de window.

En las funciones tradicionales de manera predeterminada this est en el mbito de window:

window.age = 10; // <-- me notas?
function Person() {
  this.age = 42; // <-- me notas?
  setTimeout(function () {
    // <-- La funcin tradicional se est ejecutando en el mbito de window
    console.log("this.age", this.age); // genera "10" porque la funcin se ejecuta en el mbito de window
  }, 100);
}

var p = new Person();

Las funciones flecha no predeterminan this al mbito o alcance de window, ms bien se ejecutan en el mbito o alcance en que se crean:

window.age = 10; // <-- me notas?
function Person() {
  this.age = 42; // <-- me notas?
  setTimeout(() => {
    // <-- Funcin flecha ejecutndose en el mbito de "p" (una instancia de Person)
    console.log("this.age", this.age); // genera "42" porque la funcin se ejecuta en el mbito de Person
  }, 100);
}

var p = new Person();

En el ejemplo anterior, la funcin flecha no tiene su propio this. Se utiliza el valor this del mbito lxico adjunto; las funciones flecha siguen las reglas normales de bsqueda de variables. Entonces, mientras busca this que no est presente en el mbito actual, una funcin flecha termina encontrando el this de su mbito adjunto.

Relacin con el modo estricto

Dado que this proviene del contexto lxico circundante, en el modo estricto se ignoran las reglas con respecto a this.

var f = () => {
  "use strict";
  return this;
};

f() === window; // o el objeto global

Todas las dems reglas del modo estricto se aplican normalmente.

Advertencia: Comprueba las notas sobre el modo estricto.

Funciones flecha utilizadas como mtodos

Como se indic anteriormente, las expresiones de funcin flecha son ms adecuadas para funciones que no son mtodos. Observa qu sucede cuando intentas usarlas como mtodos:

"use strict";

var obj = {
  // no crea un nuevo mbito
  i: 10,
  b: () => console.log(this.i, this),
  c: function () {
    console.log(this.i, this);
  },
};

obj.b(); // imprime indefinido, Window {...} (o el objeto global)
obj.c(); // imprime 10, Object {...}

Las funciones flecha no tienen su propio this. Otro ejemplo que involucra Object.defineProperty():

"use strict";

var obj = {
  a: 10,
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this); // indefinida 'undefined' Window {...} (o el objeto global)
    return this.a + 10; // representa el objeto global 'Window', por lo tanto 'this.a' devuelve 'undefined'
  },
});

`call`, `apply` y `bind`

Los mtodos call, apply y bind NO son adecuados para las funciones flecha, ya que fueron diseados para permitir que los mtodos se ejecuten dentro de diferentes mbitos, porque las funciones flecha establecen "this" segn el mbito dentro del cual se define la funcin flecha.

Por ejemplo, call, apply y bind funcionan como se esperaba con las funciones tradicionales, porque establecen el mbito para cada uno de los mtodos:

// ----------------------
// Ejemplo tradicional
// ----------------------
// Un objeto simplista con su propio "this".
var obj = {
  num: 100,
};

// Establece "num" en window para mostrar cmo NO se usa.
window.num = 2020; // Ay!

// Una funcin tradicional simple para operar en "this"
var add = function (a, b, c) {
  return this.num + a + b + c;
};

// call
var result = add.call(obj, 1, 2, 3); // establece el mbito como "obj"
console.log(result); // resultado 106

// apply
const arr = [1, 2, 3];
var result = add.apply(obj, arr); // establece el mbito como "obj"
console.log(result); // resultado 106

// bind
var result = add.bind(obj); // estable el mbito como "obj"
console.log(result(1, 2, 3)); // resultado 106

Con las funciones flecha, dado que la funcin add esencialmente se crea en el mbito del window (global), asumir que this es window.

// ----------------------
// Ejemplo de flecha
// ----------------------

// Un objeto simplista con su propio "this".
var obj = {
  num: 100,
};

// Establecer "num" en window para mostrar cmo se recoge.
window.num = 2020; // Ay!

// Funcin flecha
var add = (a, b, c) => this.num + a + b + c;

// call
console.log(add.call(obj, 1, 2, 3)); // resultado 2026

// apply
const arr = [1, 2, 3];
console.log(add.apply(obj, arr)); // resultado 2026

// bind
const bound = add.bind(obj);
console.log(bound(1, 2, 3)); // resultado 2026

Quizs el mayor beneficio de usar las funciones flecha es con los mtodos a nivel del DOM (setTimeout, setInterval, addEventListener) que generalmente requieren algn tipo de cierre, llamada, aplicacin o vinculacin para garantizar que la funcin se ejecute en el mbito adecuado.

Ejemplo tradicional:

var obj = {
  count: 10,
  doSomethingLater: function () {
    setTimeout(function () {
      // la funcin se ejecuta en el mbito de window
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater(); // la consola imprime "NaN", porque la propiedad "count" no est en el mbito de window.

Ejemplo de flecha:

var obj = {
  count: 10,
  doSomethingLater: function () {
    // por supuesto, las funciones flecha no son adecuadas para mtodos
    setTimeout(() => {
      // dado que la funcin flecha se cre dentro del "obj", asume el "this" del objeto
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater();

Sin enlace de `arguments`

Las funciones flecha no tienen su propio objeto arguments. Por tanto, en este ejemplo, arguments simplemente es una referencia a los argumentos del mbito adjunto:

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // Los argumentos implcitos de foo son vinculantes. arguments[0] es n
  return f();
}

foo(3); // 6

En la mayora de los casos, usar parmetros rest es una buena alternativa a usar un objeto arguments.

function foo(n) {
  var f = (...args) => args[0] + n;
  return f(10);
}

foo(1); // 11

Uso del operador `new`

Las funciones flecha no se pueden usar como constructores y arrojarn un error cuando se usen con new.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo no es un constructor

Uso de la propiedad `prototype`

Las funciones flecha no tienen una propiedad prototype.

var Foo = () => {};
console.log(Foo.prototype); // undefined

Uso de la palabra clave `yield`

La palabra clave yield no se puede utilizar en el cuerpo de una funcin flecha (excepto cuando est permitido dentro de las funciones anidadas dentro de ella). Como consecuencia, las funciones flecha no se pueden utilizar como generadores.

Cuerpo de funcin

Las funciones flecha pueden tener un "cuerpo conciso" o el "cuerpo de bloque" habitual.

En un cuerpo conciso, solo se especifica una expresin, que se convierte en el valor de retorno implcito. En el cuerpo de un bloque, debes utilizar una instruccin return explcita.

var func = (x) => x * x;
// sintaxis de cuerpo conciso, "return" implcito

var func = (x, y) => {
  return x + y;
};
// con cuerpo de bloque, se necesita un "return" explcito

Devolver objetos literales

Ten en cuenta que devolver objetos literales utilizando la sintaxis de cuerpo conciso params => {object: literal} no funcionar como se esperaba.

var func = () => { foo: 1 };
// Llamar a func() devuelve undefined!

var func = () => { foo: function() {} };
// SyntaxError: la declaracin function requiere un nombre

Esto se debe a que el cdigo entre llaves ({}) se procesa como una secuencia de declaraciones (es decir, foo se trata como una etiqueta, no como una clave en un objeto literal).

Debes envolver el objeto literal entre parntesis:

var func = () => ({ foo: 1 });

Saltos de lnea

Una funcin flecha no puede contener un salto de lnea entre sus parmetros y su flecha.

var func = (a, b, c)
  => 1;
// SyntaxError: expresin esperada, obtuve '=>'

Sin embargo, esto se puede modificar colocando el salto de lnea despus de la flecha o usando parntesis/llaves como se ve a continuacin para garantizar que el cdigo se mantenga bonito y esponjoso. Tambin puedes poner saltos de lnea entre argumentos.

var func = (a, b, c) => 1;

var func = (a, b, c) => 1;

var func = (a, b, c) => {
  return 1;
};

var func = (a, b, c) => 1;

// no se lanza SyntaxError

Orden de procesamiento

Aunque la flecha en una funcin flecha no es un operador, las funciones flecha tienen reglas de procesamiento especiales que interactan de manera diferente con prioridad de operadores en comparacin con las funciones regulares.

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};
// SyntaxError: argumentos de funcin flecha no vlidos

callback = callback || (() => {});    // bien

Ejemplos

Uso bsico

// Una funcin flecha vaca devuelve undefinided
let empty = () => {};

(() => "foobar")();
// Devuelve "foobar"
// (esta es una expresin de funcin invocada inmediatamente)

var simple = (a) => (a > 15 ? 15 : a);
simple(16); // 15
simple(10); // 10

let max = (a, b) => (a > b ? a : b);

// Fcil filtrado de arreglos, mapeo, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter((v) => v % 2 == 0);
// [6, 0, 18]

var double = arr.map((v) => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// Cadenas de promesas ms concisas
promise
  .then((a) => {
    // ...
  })
  .then((b) => {
    // ...
  });

// Funciones flecha sin parmetros que son visualmente ms fciles de procesar
setTimeout(() => {
  console.log("suceder antes");
  setTimeout(() => {
    // cdigo ms profundo
    console.log("Suceder ms tarde");
  }, 1);
}, 1);

Especificaciones

Specification
ECMAScript 2027 LanguageSpecification # sec-arrow-function-definitions

Compatibilidad con navegadores

Ve tambin

"ES6 en profundidad: funciones flecha" en hacks.mozilla.org

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 23 jul 2026 by MDN contributors.

View this page on GitHub Report a problem with this content

Funciones Flecha

In this article

Help improve MDN