¿Por qué utilizar expresiones de función con nombre?

Tenemos dos formas diferentes de hacer la expresión de funciones en JavaScript:

Expresión de función nombrada (NFE) :

var boo = function boo () {
  alert(1);
};

Expresión de función anónima :

var boo = function () {
  alert(1);
};

Y ambos se pueden llamar con boo();. Realmente no puedo ver por qué / cuándo debería usar funciones anónimas y cuándo debería usar Expresiones de función con nombre. ¿Qué diferencia hay entre ellos?

En el caso de la expresión de función anónima, la función es anónima  ; literalmente, no tiene nombre. La variable a la que lo está asignando tiene un nombre, pero la función no. (Actualización: Eso fue cierto a través de ES5. A partir de ES2015 [también conocido como ES6], a menudo una función creada con una expresión anónima obtiene un nombre verdadero [pero no un identificador automático], sigue leyendo ...)

Los nombres son útiles. Los nombres se pueden ver en seguimientos de pila, pilas de llamadas, listas de puntos de interrupción, etc. Los nombres son algo bueno ™.

(Solía ​​tener que tener cuidado con las expresiones de función con nombre en versiones anteriores de IE [IE8 y anteriores], porque crearon por error dos objetos de función completamente separados en dos momentos completamente diferentes [más en el artículo de mi blog Doble toma ]. Si es necesario admite IE8 [!!], probablemente sea mejor seguir con expresiones de función anónimas o declaraciones de función , pero evite las expresiones de función con nombre).

Una cosa clave acerca de una expresión de función nombrada es que crea un identificador dentro del alcance con ese nombre para la función dentro del cuerpo de la función:

var x = function example() {
    console.log(typeof example); // "function"
};
x();
console.log(typeof example);     // "undefined"

Sin embargo, a partir de ES2015, muchas expresiones de función "anónimas" crean funciones con nombres, y esto fue precedido por varios motores JavaScript modernos que son bastante inteligentes para inferir nombres a partir del contexto. En ES2015, su expresión de función anónima da como resultado una función con el nombre boo. Sin embargo, incluso con la semántica de ES2015 +, no se crea el identificador automático:

var obj = {
    x: function() {
       console.log(typeof x);   // "undefined"
       console.log(obj.x.name); // "x"
    },
    y: function y() {
       console.log(typeof y);   // "function"
       console.log(obj.y.name); // "y"
    }
};
obj.x();
obj.y();

La asignación del nombre de la función se realiza con la operación abstracta SetFunctionName utilizada en varias operaciones en la especificación.

La versión corta es básicamente cada vez que aparece una expresión de función anónima en el lado derecho de algo como una asignación o inicialización, como:

var boo = function() { /*...*/ };

(o podría ser leto en constlugar de var) , o

var obj = {
    boo: function() { /*...*/ }
};

o

doSomething({
    boo: function() { /*...*/ }
});

(esos dos últimos son realmente lo mismo) , la función resultante tendrá un nombre (boo , en los ejemplos).

Hay una excepción importante e intencionada: asignar una propiedad a un objeto existente:

obj.boo = function() { /*...*/ }; // <== Does not get a name

Esto se debió a las preocupaciones sobre la filtración de información que surgieron cuando la nueva función estaba en proceso de ser agregada; detalles en mi respuesta a otra pregunta aquí .

Las funciones de nombres son útiles si necesitan referenciarse a sí mismas (por ejemplo, para llamadas recursivas). De hecho, si está pasando una expresión de función literal como un argumento directamente a otra función, esa expresión de función no puede hacer referencia directamente a sí misma en el modo estricto de ES5 a menos que tenga un nombre.

Por ejemplo, considere este código:

setTimeout(function sayMoo() {
    alert('MOO');
    setTimeout(sayMoo, 1000);
}, 1000);

Sería imposible escribir este código de forma tan limpia si la expresión de función pasada setTimeoutfuera anónima; tendríamos que asignarlo a una variable antes de la setTimeoutllamada. De esta forma, con una expresión de función nombrada, es un poco más corta y ordenada.

Históricamente, era posible escribir código como este incluso usando una expresión de función anónima, explotando arguments.callee...

setTimeout(function () {
    alert('MOO');
    setTimeout(arguments.callee, 1000);
}, 1000);

... pero arguments.calleeestá obsoleto y totalmente prohibido en el modo estricto de ES5. Por lo tanto, MDN aconseja:

Evitar el uso arguments.callee()por cualquiera de las expresiones de función que da un nombre o usar una declaración de función en una función debe llamarse a sí misma.

(énfasis mío)

Si una función se especifica como una expresión de función, se le puede dar un nombre.

Solo estará disponible dentro de la función (excepto IE8-).

var f = function sayHi(name) {
  alert( sayHi ); // Inside the function you can see the function code
};

alert( sayHi ); // (Error: undefined variable 'sayHi')

Este nombre está destinado a una llamada de función recursiva confiable, incluso si está escrito en otra variable.

Además, el nombre NFE (expresión de función con nombre) PUEDE sobrescribirse con el Object.defineProperty(...)método de la siguiente manera:

var test = function sayHi(name) {
  Object.defineProperty(test, 'name', { value: 'foo', configurable: true });
  alert( test.name ); // foo
};

test();

Nota: con la Declaración de función esto no se puede hacer. Este nombre de función interna "especial" se especifica sólo en la sintaxis de expresión de función.

Siempre debe usar expresiones de función con nombre , por eso:

1. Puede usar el nombre de esa función cuando necesite recursividad.

2. Las funciones anónimas no ayudan al depurar, ya que no puede ver el nombre de la función que causa problemas.

3. Cuando no nombra una función, más adelante es más difícil entender qué está haciendo. Darle un nombre hace que sea más fácil de entender.

var foo = function bar() {
    //some code...
};

foo();
bar(); // Error!

Aquí, por ejemplo, debido a que la barra de nombre se usa dentro de una expresión de función, no se declara en el ámbito externo. Con expresiones de función nombradas, el nombre de la expresión de función se incluye dentro de su propio ámbito.

El uso de expresiones de función con nombre es mejor, cuando desea poder hacer referencia a la función en cuestión sin tener que depender de características obsoletas como arguments.callee.