valor - ¿Cuál es la diferencia entre una expresión de función vs declaración en JavaScript?

retornar valor de una funcion javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• var functionName = function () {} vs function functionName () {} 34 respuestas

¿Cuál es la diferencia entre las siguientes líneas de código?

//Function declaration
function foo() { return 5; }
//Anonymous function expression
var foo = function() { return 5; }
//Named function expression
var foo = function foo() { return 5; }

• ¿Qué es una expresión de función nombrada / anónima?
• ¿Qué es una función declarada?
• ¿Cómo tratan los navegadores con estas construcciones de manera diferente?

¿Qué hacen las respuestas a una pregunta similar ( var functionName = function () {} vs function functionName () {} ) no son exactamente correctas?

Answer 1

Declaración de funciones

function foo() { ... }

Debido a la función de elevación , la función declarada de esta manera puede llamarse después y antes de la definición.

Expresión de la función

1. Expresión de función nombrada

   var foo = function bar() { ... }

2. Expresión de función anónima

   var foo = function() { ... }

foo() se puede llamar después de la creación.

Expresión de función inmediatamente invocada (IIFE)

(function() { ... }());

Conclusión

Crockford recomienda usar la expresión de función porque deja claro que foo es una variable que contiene un valor de función. Bueno, personalmente, prefiero usar la Declaración a menos que haya una razón para la Expresión.

Answer 2

Aunque la diferencia completa es más complicada, la única diferencia que me preocupa es cuando la máquina crea el objeto de función. Lo que en el caso de las declaraciones es antes de que se ejecute cualquier instrucción, pero después de invocar un cuerpo de instrucción (ya sea el cuerpo del código global o de una subfunción), y en el caso de las expresiones es cuando se ejecuta la instrucción en la que se encuentra. Aparte de eso, para todos los intentos y propósitos, los navegadores los tratan de la misma manera.

Para ayudarlo a comprender, eche un vistazo a esta test rendimiento que supuso la suposición que había hecho de las funciones declaradas internamente que no necesitan ser recreadas por la máquina cuando se invoca la función externa. Una especie de vergüenza también, ya que me gustaba escribir código de esa manera.

Answer 3

La primera declaración depende del contexto en el que se declara.

Si se declara en el contexto global, creará una variable global implícita llamada "foo" que será una variable que apunta a la función. Por lo tanto, la función llamada "foo ()" se puede realizar en cualquier parte de su programa javascript.

Si la función se crea en un cierre, creará una variable local implícita llamada "foo" que luego puede usar para invocar la función dentro del cierre con "foo ()"

EDITAR:

También debería haber dicho que las declaraciones de función (la primera) se analizan antes que las expresiones de función (las otras 2). Esto significa que si declara la función en la parte inferior de su secuencia de comandos, aún podrá utilizarla en la parte superior. Las expresiones de función solo se evalúan a medida que son golpeadas por el código de ejecución.

EDICIÓN FINAL

Las declaraciones 2 y 3 son bastante equivalentes entre sí. Nuevamente, si se usan en el contexto global, crearán variables globales y si se usan dentro de un cierre crearán variables locales. Sin embargo, vale la pena tener en cuenta que la declaración 3 ignorará el nombre de la función, por lo que es posible que pueda llamar a la función cualquier cosa. Por lo tanto

var foo = function foo() { return 5; }

Es lo mismo que

var foo = function fooYou() { return 5; }

Answer 4

Respecto a la 3ª definición:

var foo = function foo() { return 5; }

Aquí hay un ejemplo que muestra cómo usar la posibilidad de una llamada recursiva:

a = function b(i) {
if (i>10) {
return i;
}
else {
return b(++i);
}
}
console.log(a(5)); // outputs 11
console.log(a(10)); // outputs 11
console.log(a(11)); // outputs 11
console.log(a(15)); // outputs 15

Edición: ejemplo más interesante con cierres:

a = function(c) {
return function b(i){
if (i>c) {
return i;
}
return b(++i);
}
}
d = a(5);
console.log(d(3)); // outputs 6
console.log(d(8)); // outputs 8

Answer 5

Son realmente muy similares. La forma en que los llama es exactamente la misma. La diferencia radica en cómo el navegador los carga en el contexto de ejecución.

Las declaraciones de funciones se cargan antes de ejecutar cualquier código.

Las expresiones de función se cargan solo cuando el intérprete llega a esa línea de código.

Entonces, si intentas llamar a una expresión de función antes de que se cargue, ¡obtendrás un error! Si, en cambio, llama a una declaración de función, siempre funcionará, ya que no se puede llamar a ningún código hasta que se carguen todas las declaraciones.

Ejemplo: Expresión de función

alert(foo()); // ERROR! foo wasn''t loaded yet
var foo = function() { return 5; }

Ejemplo: Declaración de función

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; }

En cuanto a la segunda parte de tu pregunta:

var foo = function foo() { return 5; } var foo = function foo() { return 5; } es realmente lo mismo que los otros dos. Es solo que esta línea de código solía causar un error en el safari, aunque ya no lo hace.