path: root/files/es/web/javascript/referencia/funciones/arrow_functions/index.html

---
title: Funciones Flecha
slug: Web/JavaScript/Referencia/Funciones/Arrow_functions
tags:
  - ECMAScript6
  - Intermedio
  - JavaScript
  - Referencia
  - función
translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
---
<div>{{jsSidebar("Functions", "Funciones")}}</div>

<p>Una <strong>expresión de función flecha</strong> es una alternativa compacta a una {{JSxRef("Operadores/function", "expresión de función")}} tradicional, pero es limitada y no se puede utilizar en todas las situaciones.</p>

<p><strong>Diferencias y limitaciones:</strong></p>

<ul>
 <li>No tiene sus propios enlaces a {{JSxRef("Operadores/this", "this")}} o {{JSxRef("Operadores/super", "super")}} y no se debe usar como {{Glossary("Method", "métodos")}}.</li>
 <li>No tiene {{JSxRef("Funciones/arguments", "argumentos")}} o palabras clave {{JSxRef("../Operadores/new.target", "new.target")}}.</li>
 <li>No apta para los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}}, que generalmente se basan en establecer un {{Glossary("Scope", "ámbito o alcance")}}</li>
 <li>No se puede utilizar como {{Glossary("constructor", "constructor")}}.</li>
 <li>No se puede utilizar {{JSxRef("Operadores/yield", "yield")}} dentro de su cuerpo.</li>
</ul>

<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p>

<h3 id="Comparación_de_funciones_tradicionales_con_funciones_flecha">Comparación de funciones tradicionales con funciones flecha</h3>

<p>Observa, paso a paso, la descomposición de una "función tradicional" hasta la "función flecha" más simple:<br>
 <strong>Nota</strong>: Cada paso a lo largo del camino es una "función flecha" válida</p>

<pre class="brush: js notranslate">// Función tradicional
function (a){
  return a + 100;
}

// Desglose de la función flecha

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

// 2. Quita los corchetes del cuerpo y la palabra "return" — el return está implícito.
(a) =&gt; a + 100;

// 3. Suprime los paréntesis de los argumentos
a =&gt; a + 100;</pre>

<div class="blockIndicator note">
<p>Como se muestra arriba, los { corchetes }, ( paréntesis ) y "return" son opcionales, pero pueden ser obligatorios.</p>
</div>

<p>Por ejemplo, si tienes <strong>varios argumentos</strong> o <strong>ningún argumento</strong>, deberás volver a introducir paréntesis alrededor de los argumentos:</p>

<pre class="brush: js notranslate">// Función tradicional
function (a, b){
  return a + b + 100;
}

// Función flecha
(a, b) =&gt; a + b + 100;

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

// Función flecha (sin argumentos)
let a = 4;
let b = 2;
() =&gt; a + b + 100;</pre>

<p>Del mismo modo, si el cuerpo requiere <strong>líneas de procesamiento adicionales</strong>, deberás volver a introducir los corchetes <strong>Más el "return"</strong> (las funciones flecha no adivinan mágicamente qué o cuándo quieres "volver"):</p>

<pre class="brush: js notranslate">// Función tradicional
function (a, b){
  let chuck = 42;
  return a + b + chuck;
}

// Función flecha
(a, b) =&gt; {
  let chuck = 42;
  return a + b + chuck;
}</pre>

<div>Y finalmente, en las <strong>funciones con nombre</strong> tratamos las expresiones de flecha como variables</div>

<div>
<pre class="brush: js notranslate">// Función tradicional
function bob (a){
  return a + 100;
}

// Función flecha
let bob = a =&gt; a + 100;</pre>
</div>

<div></div>

<div></div>

<h2 id="Sintaxis">Sintaxis</h2>

<h3 id="Sintaxis_básica">Sintaxis básica</h3>

<p class="syntaxbox notranslate">Un parámetro. Con una expresión simple no se necesita <code>return</code>:</p>

<pre class="brush: js notranslate">param =&gt; expression</pre>

<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Con una expresión simple no se necesita <code>return</code>:</p>

<pre class="brush: js notranslate">(param1, paramN) =&gt; expression</pre>

<p class="syntaxbox notranslate">Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p>

<pre class="brush: js notranslate">param =&gt; {
  let a = 1;
  return a + b;
}</pre>

<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p>

<pre class="brush: js notranslate">(param1, paramN) =&gt; {
   let a = 1;
   return a + b;
}</pre>

<h3 id="Sintaxis_avanzada">Sintaxis avanzada</h3>

<p class="syntaxbox notranslate">Para devolver una expresión de objeto literal, se requieren paréntesis alrededor de la expresión:</p>

<pre class="brush: js notranslate">params =&gt; ({foo: "a"}) // devuelve el objeto {foo: "a"}</pre>

<p class="syntaxbox notranslate">Los {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} son compatibles:</p>

<pre class="brush: js notranslate">(a, b, ...r) =&gt; expression</pre>

<p class="syntaxbox notranslate">Se admiten los {{JSxRef("Funciones/Parametros_por_defecto", "parámetros predeterminados")}}:</p>

<pre class="brush: js notranslate">(a=400, b=20, c) =&gt; expression</pre>

<p class="brush: js">{{JSxRef("Operadores/Destructuring_assignment", "Desestructuración")}} dentro de los parámetros admitidos:</p>

<pre class="brush: js notranslate">([a, b] = [10, 20]) =&gt; a + b;  // el resultado es 30
({ a, b } = { a: 10, b: 20 }) =&gt; a + b; // resultado es 30
</pre>

<h2 id="Descripción">Descripción</h2>

<p>Consulta también <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a>.</p>

<h3 id="this_y_funciones_flecha">"<code>this</code>" y funciones flecha</h3>

<p class="brush: js notranslate">Una de las razones por las que se introdujeron las funciones flecha fue para eliminar complejidades del ámbito ({{JSxRef("Operadores/this", "this")}}) y hacer que la ejecución de funciones sea mucho más intuitiva.</p>

<div class="blockIndicator note">
<p class="brush: js notranslate">Si <code>this</code> es un misterio para ti, consulta {{JSxRef("Operadores/this", "este documento")}} para obtener más información sobre cómo funciona <code>this</code>. Para resumir, <code>this</code> se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave <code>new</code>. De lo contrario, <code>this</code> se establecerá —de forma predeterminada— en el {{Glossary("Scope", "ámbito o alcance")}} de window.</p>
</div>

<p class="brush: js notranslate">En las <strong>funciones tradicionales</strong> de manera predeterminada <code>this</code> está en el ámbito de <code>window</code>:</p>

<ul>
</ul>

<pre class="brush: js notranslate">window.age = 10; // &lt;-- ¿me notas?
function Person() {
  this.age = 42; // &lt;-- ¿me notas?
  setTimeout(function () {// &lt;-- La función tradicional se está ejecutando en el ámbito de window
    console.log("this.age", this.age); // genera "10" porque la función se ejecuta en el ámbito de window
  }, 100);
}

var p = new Person();

</pre>

<p>Las <strong>funciones flecha</strong> <strong>no</strong> predeterminan <code>this</code> al {{Glossary("Scope", "ámbito o alcance")}} de <code>window</code>, más bien se ejecutan en el {{Glossary("Scope", "ámbito o alcance")}} en que se crean:</p>

<pre class="brush: js notranslate">window.age = 10; // &lt;-- ¿me notas?
function Person() {
  this.age = 42; // &lt;-- ¿me notas?
  setTimeout(() =&gt; {// &lt;-- Función flecha ejecutándose en el ámbito de "p" (una instancia de Person)
    console.log("this.age", this.age); // genera "42" porque la función se ejecuta en el ámbito de Person
  }, 100);
}

var p = new Person();

</pre>

<p>En el ejemplo anterior, la función flecha no tiene su propio <code>this</code>. Se utiliza el valor <code>this</code> del {{Glossary("Scope", "ámbito")}} léxico adjunto; las funciones flecha siguen las reglas normales de búsqueda de variables. Entonces, mientras busca <code>this</code> que no está presente en el {{Glossary("Scope", "ámbito")}} actual, una función flecha termina encontrando el <code>this</code> de su {{Glossary("Scope", "ámbito")}} adjunto.</p>

<p><strong>Relación con el modo estricto</strong></p>

<p>Dado que <code>this</code> proviene del contexto léxico circundante, en el {{JSxRef("Modo_estricto", "modo estricto")}} se ignoran las reglas con respecto a <code>this</code>.</p>

<pre class="brush: js notranslate">var f = () =&gt; {
    'use strict';
    return this;
};

f() === window; // o el objeto global</pre>

<p>Todas las demás reglas del {{JSxRef("Modo_estricto", "modo estricto")}} se aplican normalmente.</p>

<div class="blockIndicator warning">
<p><strong>Nota</strong>: Comprueba las notas sobre el {{JSxRef("Modo_estricto", "modo estricto")}}.</p>
</div>

<h3 id="Funciones_flecha_utilizadas_como_métodos">Funciones flecha utilizadas como métodos</h3>

<p>Como se indicó anteriormente, las expresiones de función flecha son más adecuadas para funciones que no son métodos. Observa qué sucede cuando intentas usarlas como métodos:</p>

<pre class="brush: js notranslate">'use strict';

var obj = { // no crea un nuevo ámbito
  i: 10,
  b: () =&gt; 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 {...}</pre>

<p>Las funciones flecha no tienen su propio <code>this</code>. Otro ejemplo que involucra {{JSxRef("Object.defineProperty()")}}:</p>

<pre class="brush: js notranslate">'use strict';

var obj = {
  a: 10
};

Object.defineProperty(obj, 'b', {
  get: () =&gt; {
    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'
  }
});
</pre>

<h3 id="call_apply_y_bind"><code>call</code>, <code>apply</code> y <code>bind</code></h3>

<p>Los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} <strong>NO son adecuados</strong> para las funciones flecha, ya que fueron diseñados para permitir que los métodos se ejecuten dentro de diferentes ámbitos, porque <strong>las funciones flecha establecen "<code>this</code>" según el ámbito dentro del cual se define la función flecha.</strong></p>

<p>Por ejemplo, {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} funcionan como se esperaba con las funciones tradicionales, porque establecen el ámbito para cada uno de los métodos:</p>

<pre class="brush: js notranslate">// ----------------------
// Ejemplo tradicional
// ----------------------
// Un objeto simplista con su propio "this".
var obj = {
    num: 100
}

// Establece "num" en window para mostrar cómo NO se usa.
window.num = 2020; // ¡Ay!

// Una función 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</pre>

<p>Con las funciones flecha, dado que la función <code>add</code> esencialmente se crea en el ámbito del <code>window</code> (global), asumirá que <code>this</code> es window.</p>

<pre class="brush: js notranslate">// ----------------------
// Ejemplo de flecha
// ----------------------

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

// Establecer "num" en window para mostrar cómo se recoge.
window.num = 2020; // ¡Ay!

// Función flecha
var add = (a, b, c) =&gt; 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
</pre>

<p>Quizás el mayor beneficio de usar las funciones flecha es con los métodos a nivel del DOM (<code>setTimeout</code>, <code>setInterval</code>, <code>addEventListener</code>) que generalmente requieren algún tipo de cierre, llamada, aplicación o vinculación para garantizar que la función se ejecute en el ámbito adecuado.</p>

<p><strong>Ejemplo tradicional:</strong></p>

<pre class="brush: js notranslate">var obj = {
    count : 10,
    doSomethingLater : function (){
        setTimeout(function(){ // la función 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.</pre>

<p><strong>Ejemplo de flecha:</strong></p>

<pre class="brush: js notranslate">var obj = {
    count : 10,
    doSomethingLater : function(){  // por supuesto, las funciones flecha no son adecuadas para métodos
        setTimeout( () =&gt; { // dado que la función flecha se creó dentro del "obj", asume el "this" del objeto
            this.count++;
            console.log(this.count);
        }, 300);
    }
}

obj.doSomethingLater();</pre>

<h3 id="Sin_enlace_de_arguments">Sin enlace de <code>arguments</code></h3>

<p>Las funciones flecha no tienen su propio objeto {{JSxRef("Funciones/arguments", "arguments")}}. Por tanto, en este ejemplo, <code>arguments</code> simplemente es una referencia a los argumentos del ámbito adjunto:</p>

<pre class="brush: js notranslate">var arguments = [1, 2, 3];
var arr = () =&gt; arguments[0];

arr(); // 1

function foo(n) {
  var f = () =&gt; arguments[0] + n; // Los argumentos implícitos de foo son vinculantes. arguments[0] es n
  return f();
}

foo(3); // 6</pre>

<p>En la mayoría de los casos, usar {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} es una buena alternativa a usar un objeto <code>arguments</code>.</p>

<pre class="brush: js notranslate">function foo(n) {
  var f = (...args) =&gt; args[0] + n;
  return f(10);
}

foo(1); // 11</pre>

<h3 id="Uso_del_operador_new">Uso del operador <code>new</code></h3>

<p>Las funciones flecha no se pueden usar como constructores y arrojarán un error cuando se usen con <code>new</code>.</p>

<pre class="brush: js notranslate">var Foo = () =&gt; {};
var foo = new Foo(); // TypeError: Foo no es un constructor</pre>

<h3 id="Uso_de_la_propiedad_prototype">Uso de la propiedad <code>prototype</code></h3>

<p>Las funciones flecha no tienen una propiedad <code>prototype</code>.</p>

<pre class="brush: js notranslate">var Foo = () =&gt; {};
console.log(Foo.prototype); // undefined
</pre>

<h3 id="Uso_de_la_palabra_clave_yield">Uso de la palabra clave <code>yield</code></h3>

<p>La palabra clave {{JSxRef("Operadores/yield", "yield")}} no se puede utilizar en el cuerpo de una función flecha (excepto cuando está permitido dentro de las funciones anidadas dentro de ella). Como consecuencia, las funciones flecha no se pueden utilizar como generadores.</p>

<h3 id="Cuerpo_de_función">Cuerpo de función</h3>

<p>Las funciones flecha pueden tener un "cuerpo conciso" o el "cuerpo de bloque" habitual.</p>

<p>En un cuerpo conciso, solo se especifica una expresión, que se convierte en el valor de retorno implícito. En el cuerpo de un bloque, debes utilizar una instrucción <code>return</code> explícita.</p>

<pre class="brush: js notranslate">var func = x =&gt; x * x;
// sintaxis de cuerpo conciso, "return" implícito

var func = (x, y) =&gt; { return x + y; };
// con cuerpo de bloque, se necesita un "return" explícito
</pre>

<h3 id="Devolver_objetos_literales">Devolver objetos literales</h3>

<p>Ten en cuenta que devolver objetos literales utilizando la sintaxis de cuerpo conciso <code>params =&gt; {object: literal}</code> no funcionará como se esperaba.</p>

<pre class="brush: js notranslate">var func = () =&gt; { foo: 1 };
// ¡Llamar a func() devuelve undefined!

var func = () =&gt; { foo: function() {} };
// SyntaxError: la declaración function requiere un nombre</pre>

<p>Esto se debe a que el código entre llaves ({}) se procesa como una secuencia de declaraciones (es decir, <code>foo</code> se trata como una etiqueta, no como una clave en un objeto literal).</p>

<p>Debes envolver el objeto literal entre paréntesis:</p>

<pre class="brush: js notranslate">var func = () =&gt; ({ foo: 1 });</pre>

<h3 id="Saltos_de_línea">Saltos de línea</h3>

<p>Una función flecha no puede contener un salto de línea entre sus parámetros y su flecha.</p>

<pre class="brush: js notranslate">var func = (a, b, c)
  =&gt; 1;
// SyntaxError: expresión esperada, obtuve '=&gt;'</pre>

<p>Sin embargo, esto se puede modificar colocando el salto de línea después de la flecha o usando paréntesis/llaves como se ve a continuación para garantizar que el código se mantenga bonito y esponjoso. También puedes poner saltos de línea entre argumentos.</p>

<pre class="brush: js notranslate">var func = (a, b, c) =&gt;
  1;

var func = (a, b, c) =&gt; (
  1
);

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

var func = (
  a,
  b,
  c
) =&gt; 1;

// no se lanza SyntaxError</pre>

<h3 id="Orden_de_procesamiento">Orden de procesamiento</h3>

<p>Aunque la flecha en una función flecha no es un operador, las funciones flecha tienen reglas de procesamiento especiales que interactúan de manera diferente con {{JSxRef("Operadores/Operator_Precedence", "prioridad de operadores")}} en comparación con las funciones regulares.</p>

<pre class="brush: js notranslate">let callback;

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

callback = callback || () =&gt; {};
// SyntaxError: argumentos de función flecha no válidos

callback = callback || (() =&gt; {});    // bien
</pre>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Uso_básico">Uso básico</h3>

<pre class="brush: js notranslate">// Una función flecha vacía devuelve undefinided
let empty = () =&gt; {};

(() =&gt; 'foobar')();
// Devuelve "foobar"
// (esta es una expresión de función invocada inmediatamente)

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

let max = (a, b) =&gt; a &gt; b ? a : b;

// Fácil filtrado de arreglos, mapeo, ...

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

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

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

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

// Cadenas de promesas más concisas
promise.then(a =&gt; {
  // ...
}).then(b =&gt; {
  // ...
});

// Funciones flecha sin parámetros que son visualmente más fáciles de procesar
setTimeout( () =&gt; {
  console.log('sucederá antes');
  setTimeout( () =&gt; {
    // código más profundo
    console.log ('Sucederá más tarde');
  }, 1);
}, 1);
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Definición de función flecha')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>

<div>
<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>

<p>{{Compat("javascript.functions.arrow_functions")}}</p>
</div>

<h2 id="Ve_también">Ve también</h2>

<ul>
 <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a></li>
</ul>