38 Pregunta: var functionName = function () {} vs function functionName () {}

pregunta creada en Mon, Apr 15, 2019 12:00 AM

Recientemente comencé a mantener el código JavaScript de otra persona. Estoy corrigiendo errores, agregando funciones y también tratando de ordenar el código y hacerlo más consistente.

El desarrollador anterior usa dos formas de declarar funciones y no puedo averiguar si hay una razón detrás de ello o no.

Las dos formas son:

 
var functionOne = function() {
    // Some code
};
 
function functionTwo() {
    // Some code
}

¿Cuáles son las razones para usar estos dos métodos diferentes y cuáles son los pros y los contras de cada uno? ¿Hay algo que se pueda hacer con un método que no se pueda hacer con el otro?

    
6485
  1. permadi.com/tutorial /jsFunc/index.html es una muy buena página sobre las funciones de JavaScript
    2010-04-09 11: 51: 59Z
  2. Lo relacionado es este excelente artículo sobre Expresiones de funciones con nombre .
    2011-04-21 21: 30: 10Z
  3. @ CMS hace referencia a este artículo: kangax.github.com/nfe/#expr-vs-decl
    2011-08-03 14: 18: 43Z
  4. Hay dos cosas que debe tener en cuenta: # 1 En JavaScript, las declaraciones se elevan. Lo que significa que var a = 1; var b = 2; se convierte en var a; var b; a = 1; b = 2. Entonces, cuando declara functionOne, se declara, pero su valor no se establece de inmediato. Mientras que functionTwo es solo una declaración, se coloca en la parte superior del alcance. # 2 functionTwo te permite acceder a la propiedad del nombre y eso ayuda mucho cuando intentas depurar algo.
    2012-08-21 16: 20: 22Z
  5. Oh y btw, la sintaxis correcta es con un ";" Después de la asignación y sin después de la declaración. P.ej. function f(){} vs var f = function(){};.
    2012-08-21 16: 27: 11Z
30 Respuestas                              30                         

La diferencia es que functionOne es una expresión de función y, por lo tanto, solo se define cuando se alcanza esa línea, mientras que functionTwo es una declaración de función y se define tan pronto como se ejecuta su función o script circundante (debido a izar ).

Por ejemplo, una expresión de función:

 
// TypeError: functionOne is not a function
functionOne();

var functionOne = function() {
  console.log("Hello!");
};

Y, una declaración de función:

 
// Outputs: "Hello!"
functionTwo();

function functionTwo() {
  console.log("Hello!");
}

Esto también significa que no puede definir funciones de forma condicional mediante declaraciones de funciones:

 
if (test) {
   // Error or misbehavior
   function functionThree() { doSomething(); }
}

Lo anterior realmente define functionThree independientemente del valor de test, a menos que use strict esté vigente, en cuyo caso simplemente genera un error.

    
4805
2018-05-15 09: 03: 16Z
  1. @ Greg: Por cierto, la diferencia no es solo que se analicen en momentos diferentes. Esencialmente, su functionOne es simplemente una variable que tiene asignada una función anónima, mientras que functionTwo es en realidad una función con nombre. Llame al .toString() en ambos para ver la diferencia. Esto es importante en algunos casos en los que desea obtener el nombre de una función mediante programación.
    2011-08-05 21: 18: 09Z
  2. @ Jason Bunting ... no estoy seguro de a qué te refieres, .toString () parece devolver esencialmente el mismo valor (la diversiónction definition) para ambos: cl.ly/2a2C2Y1r0J451o0q0B1B
    2011-09-09 16: 29: 42Z
  3. Hay dos diferentes. El primero es un function expression, el segundo es un function declaration. Puede leer más sobre el tema aquí: javascriptweblog. wordpress.com/2010/07/06/…
    2011-11-14 06: 03: 31Z
  4. @ Greg La parte de su respuesta con respecto al tiempo de análisis frente al tiempo de ejecución no es correcta. En JavaScript, las declaraciones de funciones no se definen durante el tiempo de análisis, sino durante el tiempo de ejecución. El proceso es el siguiente: se analiza el código fuente - > Se evalúa el programa JavaScript - > Se inicializa el contexto de ejecución global - > Se realiza la declaración de instanciación vinculante. Durante este proceso, las declaraciones de funciones se crean instancias (consulte el paso 5 del Capítulo 10.5 ).
    2012-01-04 00: 59: 56Z
  5. La terminología de este fenómeno se conoce como elevación.
    2013-01-03 07: 22: 33Z

Primero quiero corregir a Greg: function abc(){} también tiene un ámbito, el nombre abc se define en el ámbito donde se encuentra esta definición. Ejemplo:

 
function xyz(){
  function abc(){};
  // abc is defined here...
}
// ...but not here

En segundo lugar, es posible combinar ambos estilos:

 
var xyz = function abc(){};

xyz se definirá como de costumbre, abc no está definido en todos los navegadores, pero Internet Explorer, no confíe en que esté definido. Pero se definirá dentro de su cuerpo:

 
var xyz = function abc(){
  // xyz is visible here
  // abc is visible here
}
// xyz is visible here
// abc is undefined here

Si desea crear alias de funciones en todos los navegadores, use este tipo de declaración:

 
function abc(){};
var xyz = abc;

En este caso, tanto xyz como abc son alias del mismo objeto:

 
console.log(xyz === abc); // prints "true"

Una razón convincente para usar el estilo combinado es el atributo "nombre" de los objetos de función ( no es compatible con Internet Explorer ). Básicamente cuando se define una función como

 
function abc(){};
console.log(abc.name); // prints "abc"

su nombre se asigna automáticamente. Pero cuando lo definas como

 
var abc = function(){};
console.log(abc.name); // prints ""

su nombre está vacío: creamos una función anónima y la asignamos a alguna variable.

Otra buena razón para usar el estilo combinado es usar un nombre interno corto para referirse a sí mismo, mientras se proporciona un nombre largo y no conflictivo para usuarios externos:

 
// Assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
  // Let it call itself recursively:
  shortcut(n - 1);
  // ...
  // Let it pass itself as a callback:
  someFunction(shortcut);
  // ...
}

En el ejemplo anterior, podemos hacer lo mismo con un nombre externo, pero será demasiado difícil de manejar (y más lento).

(Otra forma de referirse a sí mismo es usar arguments.callee, que todavía es relativamente largo y no se admite en el modo estricto).

En el fondo, JavaScript trata ambas declaraciones de manera diferente. Esta es una declaración de función:

 
function abc(){}

abc aquí se define en todas partes en el alcance actual:

 
// We can call it here
abc(); // Works

// Yet, it is defined down there.
function abc(){}

// We can call it again
abc(); // Works

Además, se elevó a través de una declaración return:

 
// We can call it here
abc(); // Works
return;
function abc(){}

Esta es una expresión de función:

 
var xyz = function(){};

xyz aquí se define desde el punto de asignación:

 
// We can't call it here
xyz(); // UNDEFINED!!!

// Now it is defined
xyz = function(){}

// We can call it here
xyz(); // works

La declaración de función frente a la expresión de función es la verdadera razón por la que Greg demuestra una diferencia.

Dato curioso:

 
var xyz = function abc(){};
console.log(xyz.name); // Prints "abc"

Personalmente, prefiero la declaración de "expresión de función" porque de esta manera puedo controlar la visibilidad. Cuando defino la función como

 
var abc = function(){};

Sé que definí la función localmente. Cuando defino la función como

 
abc = function(){};

Sé que lo definí globalmente siempre que no definí abc en ninguna parte de la cadena de ámbitos. Este estilo de definición es resistente incluso cuando se usa dentro de eval(). Mientras que la definición

 
function abc(){};

depende del contexto y puede dejarte adivinar dónde está realmente definido, especialmente en el caso de eval(); la respuesta es: depende del navegador.

    
1880
2016-10-10 20: 38: 55Z
  1. Me refiero a RoBorg pero no se encuentra en ninguna parte. Simple: RoBorg === Greg. Así es como la historia puede reescribirse en la era de internet. ;-)
    2009-07-26 02: 52: 14Z
  2. var xyz = function abc () {}; console.log (xyz === abc); Todos los navegadores que he probado (Safari 4, Firefox 3.5.5, Opera 10.10) me dan "Variable no definida: abc".
    2009-12-03 17: 43: 04Z
  3. En general, creo que esta publicación explica bien las diferencias y las ventajas de utilizar la declaración de función. Estaré de acuerdo en no estar de acuerdo en cuanto a los beneficios de utilizar asignaciones de expresión de funciones a una variable, especialmente porque el "beneficio" parece ser una recomendación de declarar una entidad global ... y todos saben que no debe abarrotar el espacio de nombres global , ¿derecho? ;-)
    2013-10-08 16: 30: 28Z
  4. imo una gran razón para usar la función con nombre es porque los depuradores pueden usar el nombre para ayudarlo a entender la pila de llamadas o el seguimiento de la pila. apesta cuando miras la pila de llamadas y ves "función anónima" a 10 niveles de profundidad ...
    2014-01-26 18: 25: 18Z
  5. var abc = function(){}; console.log(abc.name); ya no produce "", sino "abc".
    2018-05-04 12: 49: 49Z

Aquí está el resumen de los formularios estándar que crean funciones: (Originalmente escrito para otra pregunta, pero adaptado después de pasar a la pregunta canónica).

Términos:

La lista rápida:

  • Declaración de función

  • "Anónimo" Expresión function (que a pesar del término, a veces crea funciones con nombres)

  • Expresión con el nombre function

  • Inicializador de funciones de accesores (ES5 +)

  • Expresión de la función de flecha (ES2015 +) (que, al igual que las expresiones de funciones anónimas, no implica un nombre explícito y, sin embargo, puede crear funciones con nombres)

  • Declaración de método en Inicializador de objetos (ES2015 +)

  • Declaraciones de constructor y método en class (ES2015 +)

Declaración de función

La primera forma es una declaración de función , que se ve así:

 
function x() {
    console.log('x');
}

Una declaración de función es una declaración ; No es una declaración o expresión. Como tal, no lo sigues con un ; (aunque hacerlo es inofensivo).

Una declaración de función se procesa cuando la ejecución entra en el contexto en el que aparece, antes se ejecuta cualquier código paso a paso. La función que crea recibe un nombre propio (x en el ejemplo anterior), y ese nombre se coloca en el ámbito en el que aparece la declaración.

Debido a que se procesa antes de cualquier código paso a paso en el mismo contexto, puedes hacer cosas como estas:

 
x(); // Works even though it's above the declaration
function x() {
    console.log('x');
}

Hasta ES2015, la especificación no cubría lo que debería hacer un motor de JavaScript si coloca una declaración de función dentro de una estructura de control como try, if, switch, while, etc., como esto:

 
if (someCondition) {
    function foo() {    // <===== HERE THERE
    }                   // <===== BE DRAGONS
}

Y como se procesan antes se ejecuta el código paso a paso, es difícil saber qué hacer cuando están en una estructura de control.

Aunque al hacer esto no se especificó hasta ES2015, era una extensión permitida para admitir las declaraciones de funciones en bloques. Desafortunadamente (e inevitablemente), diferentes motores hicieron cosas diferentes.

A partir de ES2015, la especificación dice qué hacer. De hecho, da tres cosas separadas para hacer:

  1. Si está en modo suelto no en un navegador web, se supone que el motor de JavaScript debe hacer una cosa
  2. Si está en modo suelto en un navegador web, se supone que el motor de JavaScript debe hacer otra cosa
  3. Si está en modo estricto (navegador o no), se supone que el motor de JavaScript debe hacer otra cosa.

Las reglas para los modos sueltos son complicadas, pero en el modo estricto , las declaraciones de funciones en bloques son fáciles: son locales al bloque (tienen ámbito de bloque , que también es nuevo en ES2015), y están en la parte superior del bloque. Entonces:

"use strict";
if (someCondition) {
    foo();               // Works just fine
    function foo() {
    }
}
console.log(typeof foo); // "undefined" (`foo` is not in scope here
                         // because it's not in the same block)

Expresión function "Anónima"

La segunda forma común se denomina expresión de función anónima :

 
var y = function () {
    console.log('y');
};

Como todas las expresiones, se evalúa cuando se alcanza en la ejecución paso a paso del código.

En ES5, la función que crea no tiene nombre (es anónimo). En ES2015, a la función se le asigna un nombre si es posible inferiéndolo del contexto. En el ejemplo anterior, el nombre sería y. Algo similar se hace cuando la función es el valor de un inicializador de propiedad. (Para obtener detalles sobre cuándo sucede esto y las reglas, busque SetFunctionName en la especificación - aparece todo el lugar.)

Expresión denominada function

La tercera forma es una expresión de función denominada ("NFE"):

 
var z = function w() {
    console.log('zw')
};

La función que crea tiene un nombre propio (w en este caso). Como todas las expresiones, esto se evalúa cuando se alcanza en la ejecución paso a paso del código. El nombre de la función es no agregado al ámbito en el que aparece la expresión; el nombre es en el alcance dentro de la función en sí:

 
var z = function w() {
    console.log(typeof w); // "function"
};
console.log(typeof w);     // "undefined"

Tenga en cuenta que las NFE con frecuencia han sido una fuente de errores para las implementaciones de JavaScript. IE8 y anteriores, por ejemplo, manejan NFEs completamente incorrecto , creando dos diferentes Funciona en dos momentos diferentes. Las primeras versiones de Safari también tenían problemas. La buena noticia es que las versiones actuales de los navegadores (IE9 y superior, Safari actual) ya no tienen esos problemas. (Pero a la fecha de este escrito, lamentablemente, IE8 sigue siendo de uso generalizado, por lo que el uso de NFE con código para la web en general sigue siendo problemático).

Inicializador de funciones de accesores (ES5 +)

Algunas veces las funciones pueden pasar inadvertidas en gran medida; ese es el caso con funciones de acceso . Aquí hay un ejemplo:

 
var obj = {
    value: 0,
    get f() {
        return this.value;
    },
    set f(v) {
        this.value = v;
    }
};
console.log(obj.f);         // 0
console.log(typeof obj.f);  // "number"

¡Tenga en cuenta que cuando usé la función, no usé ()! Eso es porque es una función de acceso para una propiedad. Obtenemos y configuramos la propiedad de la forma normal, pero detrás de escena, se llama a la función.

También puede crear funciones de acceso con Object.defineProperty, Object.defineProperties, y el segundo argumento menos conocido para Object.create.

Expresión de la función de flecha (ES2015 +)

ES2015 nos trae la función de flecha . Aquí hay un ejemplo:

 
var a = [1, 2, 3];
var b = a.map(n => n * 2);
console.log(b.join(", ")); // 2, 4, 6

¿Ves esa cosa n => n * 2 que se esconde en la llamada map()? Esa es una función.

Un par de cosas sobre las funciones de flecha:

  1. No tienen su propio this. En su lugar, se cierran sobre el this del contexto donde se definen. (También cierran más de arguments y, donde sea relevante, super). Esto significa que el this dentro de ellos es el mismo que el this donde se crearon, y no se puede cambiar.

  2. Como habrá notado con lo anterior, no usa la palabra clave function; en su lugar, utiliza =>.

El ejemplo n => n * 2 anterior es una forma de ellos. Si tiene varios argumentos para pasar la función, use parens:

 
var a = [1, 2, 3];
var b = a.map((n, i) => n * i);
console.log(b.join(", ")); // 0, 2, 6

(Recuerde que Array#map pasa la entrada como primer argumento y el índice como segundo).

En ambos casos, el cuerpo de la función es solo una expresión; el valor de retorno de la función será automáticamente el resultado de esa expresión (no utiliza un return explícito).

Si estás haciendo más que solo una expresión, usa {} y return explícito (si necesitas devolver un valor), como de costumbre:

 
var a = [
  {first: "Joe", last: "Bloggs"},
  {first: "Albert", last: "Bloggs"},
  {first: "Mary", last: "Albright"}
];
a = a.sort((a, b) => {
  var rv = a.last.localeCompare(b.last);
  if (rv === 0) {
    rv = a.first.localeCompare(b.first);
  }
  return rv;
});
console.log(JSON.stringify(a));

La versión sin { ... } se denomina función de flecha con un cuerpo de expresión o cuerpo conciso . (También: una función de flecha concisa ). La función con { ... } que define el cuerpo es una función de flecha con un cuerpo de función . (También: una función de flecha detallada .)

Declaración de método en el inicializador de objetos (ES2015 +)

ES2015 permite una forma más corta de declarar una propiedad que hace referencia a una función llamada definición de método ; se parece a esto:

 
var o = {
    foo() {
    }
};

el casi equivalente en ES5 y anterior sería:

 
var o = {
    foo: function foo() {
    }
};

la diferencia (aparte de la verbosidad) es que un método puede usar super, pero una función no. Entonces, por ejemplo, si tuviera un objeto que definió (por ejemplo) valueOf usando la sintaxis del método, podría usar super.valueOf() para obtener el valor que Object.prototype.valueOf habría devuelto (antes de hacer algo más con él), mientras que la versión ES5 tendría que hacerlo Object.prototype.valueOf.call(this) en su lugar.

Eso también significa que el método tiene una referencia al objeto en el que se definió, por lo que si ese objeto es temporal (por ejemplo, se lo pasa a Object.assign como uno de los objetos de origen), sintaxis del método podría significar que el objeto se conserva en la memoria cuando, de lo contrario, podría hSe ha recolectado basura (si el motor de JavaScript no detecta esa situación y la maneja si ninguno de los métodos utiliza super).

Declaraciones de constructor y método en class (ES2015 +)

ES2015 nos ofrece la sintaxis class, incluidos los métodos y constructores declarados:

 
class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return this.firstName + " " + this.lastName;
    }
}

Más arriba hay dos declaraciones de funciones: una para el constructor, que recibe el nombre Person, y otra para getFullName, que es una función asignada a Person.prototype.

    
593
2019-01-11 13: 58: 57Z
  1. entonces, ¿el nombre w simplemente se ignora?
    2014-03-04 13: 37: 32Z
  2. @ PellePenna: los nombres de funciones son útiles para muchas cosas. En mi opinión, los dos grandes protagonistas son la recursión, y el nombre de la función que se muestra en las pilas de llamadas, las trazas de excepciones y demás.
    2014-03-04 13: 42: 57Z
  3. @ ChaimEliyah - "Aceptar no significa que sea la mejor respuesta, solo significa que funcionó para la persona que preguntó". fuente
    2016-02-10 10: 19: 34Z
  4. @ A.R .: Muy cierto. Sin embargo, es gracioso, justo encima de lo que dice "Las mejores respuestas aparecen primero para que siempre sean fáciles de encontrar". Dado que la respuesta aceptada aparece primero incluso sobre las respuestas más votadas, el recorrido puede ser algo contradictorio. ;-) También un poco inexacto, si determinamos "mejor" por votos (lo que no es confiable, es justo lo que tenemos), las "mejores" respuestas solo aparecen primero si estás usando la pestaña "Votos" - De lo contrario, las respuestas que son primero son las activas, o las más antiguas.
    2016-02-10 10: 32: 23Z
  5. @ T.J.Crowder: De acuerdo. 'arreglado por fecha' es a veces molesto.
    2016-02-10 10: 46: 56Z

Hablando sobre el contexto global, tanto la declaración var como la FunctionDeclaration al final crearán una propiedad no eliminable en el objeto global, pero el valor de ambos se puede sobrescribir .

La diferencia sutil entre las dos formas es que cuando la instanciación variable proceso ejecuta (antes de la ejecución del código real) todos los identificadores declarados con var se inicializarán con undefined, y los utilizados por los FunctionDeclaration estarán disponibles desde ese momento, por ejemplo:

 
 alert(typeof foo); // 'function', it's already available
 alert(typeof bar); // 'undefined'
 function foo () {}
 var bar = function () {};
 alert(typeof bar); // 'function'

La asignación del bar FunctionExpression tiene lugar hasta el tiempo de ejecución.

Una propiedad global creada por un FunctionDeclaration puede sobrescribirse sin ningún problema, como un valor variable, por ejemplo:

 
 function test () {}
 test = null;

Otra diferencia obvia entre sus dos ejemplos es que la primera función no tiene un nombre, pero la segunda lo tiene, lo que puede ser realmente útil al depurar (es decir, inspeccionar una pila de llamadas).

Acerca de su primer ejemplo editado (foo = function() { alert('hello!'); };), es una tarea no declarada, le recomiendo que siempre use la palabra clave var.

Con una asignación, sin la declaración var, si el identificador al que se hace referencia no se encuentra en la cadena de alcance, se convertirá en una propiedad eliminable del objeto global.

Además, las asignaciones no declaradas arrojan un ReferenceError en ECMAScript 5 bajo Modo estricto .

Una lectura obligatoria:

Nota : esta respuesta se ha combinado de otra pregunta , en la que la duda principal y la idea errónea del OP fue que los identificadores declarados con un FunctionDeclaration, no se pudieron sobrescribir, lo que no es el caso.

    
138
2017-05-23 12: 10: 54Z
  1. ¡No sabía que las funciones podrían sobrescribirse en JavaScript! Además, esa orden de análisis es el gran punto de venta para mí. Supongo que necesito ver cómo creo las funciones.
    2010-08-08 19: 43: 48Z
  2. + 0 en el artículo "Las expresiones de la función de nombres desmitificaron", ya que se trata de 404ing. ¿Posible espejo ?: kangax.github.com/nfe
    2011-11-29 15: 10: 16Z
  3. @ CMS Nice one. ¡Tenga en cuenta que nunca vi el original, así que no sé si es un espejo o simplemente otro artículo con el mismo título!
    2011-11-29 15: 25: 01Z
  4. @ Mr_Chimp Estoy seguro de que sí, thewaybackmachine está diciendo que obtuvo un 302 en tiempo de rastreo y que la redirección fue al enlace que proporcionó.
    2012-01-30 15: 18: 46Z

Los dos fragmentos de código que has publicado allí, para casi todos los propósitos, se comportarán de la misma manera.

Sin embargo, la diferencia de comportamiento es que con la primera variante (var functionOne = function() {}), a esa función solo se puede llamar después de ese punto en el código.

Con la segunda variante (function functionTwo()), la función está disponible para el código que se ejecuta arriba donde se declara la función.

Esto se debe a que, con la primera variante, la función se asigna a la variable foo en tiempo de ejecución. En el segundo, la función se asigna a ese identificador, foo, en tiempo de análisis.

Más información técnica

JavaScript tiene tres formas de definir funciones.

  1. Tu primer fragmento de código muestra una expresión de función . Esto implica utilizar el operador de "función" para crear una función: el resultado de ese operador se puede almacenar en cualquier variable o propiedad de objeto. La función de expresión es poderosa de esa manera. La expresión de función a menudo se denomina "función anónima", porque no tiene que tener un nombre,
  2. Su segundo ejemplo es una declaración de función . Esto utiliza la declaración de "función" para crear una función. La función está disponible en tiempo de análisis y puede invocarse en cualquier parte de ese ámbito. Aún puede almacenarlo en una variable o propiedad de objeto más adelante.
  3. La tercera forma de definir una función es el "Function ()" constructor , que no se muestra en tu publicación original. No se recomienda usar esto, ya que funciona de la misma manera que eval(), que tiene sus problemas.
118
2015-12-28 19: 47: 08Z

Una mejor explicación para la respuesta de Greg

 
functionTwo();
function functionTwo() {
}

¿Por qué no hay error? Siempre nos enseñaron que las expresiones se ejecutan de arriba a abajo (??)

Porque:

  

Las declaraciones de funciones y las declaraciones de variables siempre son movidas (hoisted) invisiblemente al principio de su alcance de contenido por el intérprete de JavaScript. Los parámetros de función y los nombres definidos por el idioma están, obviamente, ya están allí. ben cherry

Esto significa que el código como este:

 
functionOne();                  ---------------      var functionOne;
                                | is actually |      functionOne();
var functionOne = function(){   | interpreted |-->
};                              |    like     |      functionOne = function(){
                                ---------------      };

Observe que la porción de asignación de las declaraciones no se elevó. Solo el nombre es izado.

Pero en el caso de las declaraciones de funciones, todo el cuerpo de la función también se elevará :

 
functionTwo();              ---------------      function functionTwo() {
                            | is actually |      };
function functionTwo() {    | interpreted |-->
}                           |    like     |      functionTwo();
                            ---------------
    
98
2017-05-23 12: 26: 42Z
  1. Hola, gracias por la información clara sobre el tema de la función. Ahora mi pregunta es cuál será la primera declaración en la jerarquía de declaración si la declaración variable (functionOne) o declaración de función (functionTwo)?
    2016-02-02 12: 09: 06Z

Otros comentaristas ya han cubierto la diferencia semántica de las dos variantes anteriores. Quería notar una diferencia estilística: solo la variación de "asignación" puede establecer una propiedad de otro objeto.

A menudo construyo módulos de JavaScript con un patrón como este:

 
(function(){
    var exports = {};

    function privateUtil() {
            ...
    }

    exports.publicUtil = function() {
            ...
    };

    return exports;
})();

Con este patrón, todas sus funciones públicas usarán asignación, mientras que sus funciones privadas usan declaración.

(Tenga en cuenta que la asignación debe requerir un punto y coma después de la declaración, mientras que la declaración lo prohíbe).

    
88
2014-10-19 22: 24: 30Z
  1. yuiblog. com /blog /2007/06/12 /module-pattern es la referencia primordial para el patrón de módulo, por lo que puedo decir. (Aunque ese artículo usa la sintaxis var foo = function(){...} incluso para variables privadas.
    2011-06-03 12: 32: 22Z
  2. En realidad, esto no es del todo cierto en algunas versiones anteriores de IE. (function window.onload() {} era una cosa.)
    2013-04-21 19: 42: 51Z

Una ilustración de cuándo preferir el primer método al segundo es cuando debes evitar anular las definiciones anteriores de una función.

Con

 
if (condition){
    function myfunction(){
        // Some code
    }
}

, esta definición de myfunction anulará cualquier definición anterior, ya que se hará en tiempo de análisis.

Mientras

 
if (condition){
    var myfunction = function (){
        // Some code
    }
}

hace el trabajo correcto de definir myfunction solo cuando se cumple condition.

    
75
2017-06-29 14: 08: 06Z
  1. este ejemplo es bueno y está cerca de la perfección, pero podría mejorarse. el mejor ejemplo sería definir var myFunc = null; fuera de un bucle, o fuera de un bloque if /elseif /else. Entonces puedes asignar condicionalmente diferentes funciones a la misma variable. En JS, es una mejor convención asignar un valor faltante a nulo, luego a indefinido. Por lo tanto, primero debe declarar myFunction como nulo, luego asignarlo de forma condicional.
    2015-05-26 20: 31: 32Z

Una razón importante es agregar una y solo una variable como la "Raíz" de su espacio de nombres ...

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

}

o

 
var MyNamespace = {
  foo: function() {
  },
  ...
}

Hay muchas técnicas para el espacio de nombres. Se ha vuelto más importante con la gran cantidad de módulos de JavaScript disponibles.

También vea ¿Cómo declaro un espacio de nombres en JavaScript?

    
60
2017-05-23 11: 55: 19Z
  1. Parece que esta respuesta se combinó con esta pregunta de otra pregunta, y la palabra podría parecer un poco no relacionada con esta pregunta. ¿Consideraría editar la respuesta para que parezca más dirigida específicamente a esta pregunta? (para reiterar; esto no es tu culpa en absoluto ... solo un efecto secundario de una pregunta fusionada). También puede eliminarlo, y creo que mantendría su reputación. O puedes dejarlo; ya que es viejo, puede que no haga una gran diferencia.
    2013-05-29 21: 13: 50Z

Hoisting es la acción del intérprete de JavaScript de mover todas las declaraciones de variables y funciones a la parte superior del alcance actual.

Sin embargo, solo se elevan las declaraciones reales. dejando las tareas donde están.

  • las variables /funciones declaradas dentro de la página son globales, y se puede acceder a ellas desde cualquier parte.
  • las funciones /de la variable declaradas dentro de la función tienen alcance local. significa que están disponibles /accedidos dentro del cuerpo de la función (alcance), no están disponibles fuera del cuerpo de la función.

Variable

Javascript se llama lenguaje escrito de forma holgada. Lo que significa que las variables de Javascript pueden mantener el valor de cualquier Data-Type . Javascript se encarga automáticamente de cambiar el tipo de variable según el valor /literal proporcionado durante el tiempo de ejecución.

 
global_Page = 10;                                               var global_Page;      « undefined
    « Integer literal, Number Type.   -------------------       global_Page = 10;     « Number         
global_Page = 'Yash';                 |   Interpreted   |       global_Page = 'Yash'; « String
    « String literal, String Type.    «       AS        «       global_Page = true;   « Boolean 
var global_Page = true;               |                 |       global_Page = function (){          « function
    « Boolean Type                    -------------------                 var local_functionblock;  « undefined
global_Page = function (){                                                local_functionblock = 777;« Number
    var local_functionblock = 777;                              };  
    // Assigning function as a data.
};  

Function

 
function Identifier_opt ( FormalParameterList_opt ) { 
      FunctionBody | sequence of statements

      « return;  Default undefined
      « return 'some data';
}
  • las funciones declaradas dentro de la página se elevan a la parte superior de la página con acceso global.
  • las funciones declaradas dentro del bloque de funciones se colocan en la parte superior del bloque.
  • El valor de retorno predeterminado de la función es ' undefined ', Variable valor predeterminado de la declaración también "no definido"

     
    Scope with respect to function-block global. 
    Scope with respect to page undefined | not available.
    

Declaración de función

 
function globalAccess() {                                  function globalAccess() {      
}                                  -------------------     }
globalAccess();                    |                 |     function globalAccess() { « Re-Defined / overridden.
localAccess();                     «   Hoisted  As   «         function localAccess() {
function globalAccess() {          |                 |         }
     localAccess();                -------------------         localAccess(); « function accessed with in globalAccess() only.
     function localAccess() {                              }
     }                                                     globalAccess();
}                                                          localAccess(); « ReferenceError as the function is not defined

Expresión de función

 
        10;                 « literal
       (10);                « Expression                (10).toString() -> '10'
var a;                      
    a = 10;                 « Expression var              a.toString()  -> '10'
(function invoke() {        « Expression Function
 console.log('Self Invoking');                      (function () {
});                                                               }) () -> 'Self Invoking'

var f; 
    f = function (){        « Expression var Function
    console.log('var Function');                                   f ()  -> 'var Function'
    };

Función asignada a la variable Ejemplo:

 
(function selfExecuting(){
    console.log('IIFE - Immediately-Invoked Function Expression');
}());

var anonymous = function (){
    console.log('anonymous function Expression');
};

var namedExpression = function for_InternalUSE(fact){
    if(fact === 1){
        return 1;
    }

    var localExpression = function(){
        console.log('Local to the parent Function Scope');
    };
    globalExpression = function(){ 
        console.log('creates a new global variable, then assigned this function.');
    };

    //return; //undefined.
    return fact * for_InternalUSE( fact - 1);   
};

namedExpression();
globalExpression();

javascript interpretado como

 
var anonymous;
var namedExpression;
var globalExpression;

anonymous = function (){
    console.log('anonymous function Expression');
};

namedExpression = function for_InternalUSE(fact){
    var localExpression;

    if(fact === 1){
        return 1;
    }
    localExpression = function(){
        console.log('Local to the parent Function Scope');
    };
    globalExpression = function(){ 
        console.log('creates a new global variable, then assigned this function.');
    };

    return fact * for_InternalUSE( fact - 1);    // DEFAULT UNDEFINED.
};

namedExpression(10);
globalExpression();

Puede verificar la declaración de la función, la prueba de expresión en diferentes navegadores utilizando jsperf Test Runner


Clases de función de constructor de ES5 : objetos de función creados mediante Function.prototype.bind

JavaScript trata las funciones como objetos de primera clase, por lo que al ser un objeto, puedes asignar propiedades a una función.

 
function Shape(id) { // Function Declaration
    this.id = id;
};
    // Adding a prototyped method to a function.
    Shape.prototype.getID = function () {
        return this.id;
    };
    Shape.prototype.setID = function ( id ) {
        this.id = id;
    };

var expFn = Shape; // Function Expression

var funObj = new Shape( ); // Function Object
funObj.hasOwnProperty('prototype'); // false
funObj.setID( 10 );
console.log( funObj.getID() ); // 10

ES6 introdujo función de flecha : una expresión de función de flecha tiene una sintaxis más corta, es más adecuada para funciones que no son de método y no pueden usarse como constructores.

  

ArrowFunction : ArrowParameters => ConciseBody .

 
const fn = (item) => { return item & 1 ? 'Odd' : 'Even'; };
console.log( fn(2) ); // Even
console.log( fn(3) ); // Odd
    
53
2017-09-28 06: 35: 18Z
  1. ahm, tu respuesta ... ¿no es ambigua? aunque está bien escrito, así que +1 para gastar y escribir demasiada información.
    2016-01-31 17: 56: 52Z

Estoy agregando mi propia respuesta solo porque todos los demás han cubierto la parte de elevación a fondo.

Me he preguntado qué camino es mejor por mucho tiempo, y gracias a http://jsperf.com ahora lo sé :)

ingrese la descripción de la imagen aquí

Las declaraciones de funciones son más rápidas, y eso es lo que realmente importa en el desarrollo web, ¿no? ;)

    
38
2015-05-01 15: 06: 55Z
  1. Diría que el mantenimiento es el aspecto más importante de la mayoría de los códigos. El rendimiento es importante, pero en la mayoría de los casos es probable que IO sea un cuello de botella más grande que la forma en que define sus funciones. Sin embargo, hay algunos problemas en los que necesita todo el rendimiento que pueda obtener y esto es útil en esos casos. También es bueno tener una respuesta aquí que responda claramente a una parte bien definida de la pregunta.
    2015-05-02 15: 22: 58Z
  2. Bueno, I fOund para que sea de otra manera con Firefox. jsperf.com/sandytest
    2015-11-17 14: 15: 48Z
  3. Las microbenchmarks siempre fallan. Mirar a jsperf.com es una pérdida de tiempo. Lo que realmente necesita es consultar el código fuente del motor JS, la documentación oficial o, al menos, rastrear blogs o listas de correo de desarrolladores.
    2016-01-10 15: 13: 21Z
  4. Solo una actualización, ya que ahora tengo el estilo de programación funcional completo en JavaScript, nunca uso declaraciones, solo expresiones de función, así que puedo encadenar y llamar a mis funciones por su nombres de variables Echa un vistazo a RamdaJS ...
    2016-12-28 16: 56: 35Z
  5. @ SandeepNayak Acabo de ejecutar tu propia prueba en Firefox 50.0.0 /Windows 7 0.0.0, y en realidad es de la misma manera que la de Leon. Entonces, si su prueba es correcta, concluiría que las pruebas de jsperf no son indicativas, y todo depende de su navegador y /o versión de SO, o en el estado particular de la máquina actual en ese momento en particular.
    2017-01-10 13: 40: 22Z

Una declaración de función y una expresión de función asignada a una variable se comportan de la misma manera una vez que se establece el enlace.

Sin embargo, hay una diferencia en cómo y cuando el objeto de función está realmente asociado con su variable. Esta diferencia se debe al mecanismo denominado elevación de variables en JavaScript.

Básicamente, todas las declaraciones de funciones y las declaraciones de variables se colocan en la parte superior de la función en la que se produce la declaración (es por esto que decimos que JavaScript tiene alcance de función ) .

  • Cuando se eleva una declaración de función, el cuerpo de la función "sigue" así, cuando se evalúa el cuerpo de la función, la variable se estar vinculado a un objeto de función.

  • Cuando se eleva una declaración de variable, la inicialización no se seguir, pero es "dejado atrás". La variable se inicializa a  undefined al comienzo del cuerpo de la función, y se asignará Un valor en su ubicación original en el código. (En realidad, se le asignará un valor en cada ubicación donde ocurra una declaración de una variable con el mismo nombre).

El orden de elevación también es importante: las declaraciones de función tienen prioridad sobre las declaraciones de variables con el mismo nombre, y la última declaración de función tiene prioridad sobre las declaraciones de función anteriores con el mismo nombre.

Algunos ejemplos ...

 
var foo = 1;
function bar() {
  if (!foo) {
    var foo = 10 }
  return foo; }
bar() // 10

La variable foo se eleva a la parte superior de la función, se inicializa a undefined, de modo que !foo es true, por lo que foo se asigna a 10. El foo fuera del alcance del bar no desempeña ningún papel y está intacto.

 
function f() {
  return a; 
  function a() {return 1}; 
  var a = 4;
  function a() {return 2}}
f()() // 2

function f() {
  return a;
  var a = 4;
  function a() {return 1};
  function a() {return 2}}
f()() // 2

Las declaraciones de función tienen prioridad sobre las declaraciones de variables, y la última declaración de función se "pega".

 
function f() {
  var a = 4;
  function a() {return 1}; 
  function a() {return 2}; 
  return a; }
f() // 4

En este ejemplo, a se inicializa con el objeto de función que resulta de evaluar la segunda declaración de función, y luego se le asigna 4.

 
var a = 1;
function b() {
  a = 10;
  return;
  function a() {}}
b();
a // 1

Aquí la declaración de función se eleva primero, declarando e inicializando la variable a. A continuación, a esta variable se le asigna 10. En otras palabras: la asignación no se asigna a la variable externa a.

    
32
2013-02-06 16: 29: 20Z
  1. Tienes una forma un poco rara de colocar las llaves de cierre. ¿Eres un codificador de Python? Parece que intentas hacer que Javascript se vea como Python. Me temo que es confuso para otras personas. Si tuviera que mantener su código JavaScript, primero dejaría que su código pasara por una impresora bonita automática.
    2013-05-14 12: 46: 50Z
  2. Excelente publicación. Una 'función autoejecutable' o 'expresión de función invocada de inmediato' debería ser lo suficientemente fácil de ver y su preferencia de estilo no debería restar valor a su publicación, que esPreciso y resume perfectamente el 'izamiento'. +1
    2013-12-17 18: 13: 19Z

El primer ejemplo es una declaración de función:

 
function abc(){}

El segundo ejemplo es una expresión de función:

 
var abc = function() {};

La principal diferencia es cómo se levantan (se levantan y se declaran). En el primer ejemplo, la declaración de la función completa es izada. En el segundo ejemplo, solo se levanta la var 'abc', su valor (la función) quedará indefinido, y la función permanecerá en la posición en la que se declara.

En pocas palabras:

 
//this will work
abc(param);
function abc(){}

//this would fail
abc(param);
var abc = function() {}

Para estudiar más sobre este tema, te recomiendo esto link

    
31
2015-05-09 09: 37: 41Z
  1. Su ejemplo es similar al de la respuesta principal
    2014-06-05 08: 34: 58Z
  2. La razón principal para publicar esta respuesta fue proporcionar el enlace en la parte inferior. Esta fue la pieza que faltaba para que entendiera completamente la pregunta anterior.
    2014-06-08 05: 44: 23Z
  3. Es muy bueno que quisieras compartir el enlace. Pero los enlaces a información adicional, en SO, deben ser solo un comentario sobre la pregunta o su respuesta favorita. Es muy poco óptimo saturar una página larga y complicada como esta con información repetida, solo para agregar un enlace útil al final. No, no obtendrás puntos de representación por proporcionar el enlace, pero estarás ayudando a la comunidad.
    2015-01-13 00: 26: 03Z

En términos de costo de mantenimiento del código, las funciones nombradas son más preferibles:

  • Independiente del lugar donde se declaran (pero todavía está limitado por el alcance).
  • Más resistente a los errores como la inicialización condicional (todavía puede anular si lo desea).
  • El código se vuelve más legible al asignar funciones locales por separado de la funcionalidad de alcance. Por lo general, en el ámbito de aplicación, la funcionalidad va primero, seguida de declaraciones de funciones locales.
  • En un depurador, verá claramente el nombre de la función en la pila de llamadas en lugar de una función "anónima /evaluada".

Sospecho que se siguen más PROS para funciones con nombre. Y lo que se enumera como una ventaja de las funciones con nombre es una desventaja para las funciones anónimas.

Históricamente, las funciones anónimas aparecían de la incapacidad de JavaScript como lenguaje para enumerar a los miembros con funciones nombradas:

 
{
    member:function() { /* How do I make "this.member" a named function? */
    }
}
    
28
2015-12-28 19: 44: 15Z
  1. Hay una prueba para confirmar: blog.firsov.net/2010/01/… prueba de rendimiento JS: alcance y funciones nombradas - Analytics
    2010-02-04 00: 45: 03Z

Utilizo el enfoque variable en mi código por una razón muy específica, cuya teoría se ha tratado de manera abstracta anteriormente, pero un ejemplo podría ayudar a algunas personas como yo, con experiencia limitada en JavaScript.

Tengo un código que necesito para ejecutar con 160 marcas de diseño independiente. La mayoría del código está en archivos compartidos, pero las cosas específicas de la marca están en un archivo separado, uno para cada marca.

Algunas marcas requieren funciones específicas y otras no. A veces tengo que agregar nuevas funciones para hacer nuevas cosas específicas de la marca. Estoy feliz de cambiar el código compartido,pero no quiero tener que cambiar todos los 160 conjuntos de archivos de marca.

Al usar la sintaxis de la variable, puedo declarar la variable (un puntero a la función esencialmente) en el código compartido y asignar una función de trivial stub, o establecerla en nula.

Las una o dos marcas que necesitan una implementación específica de la función pueden definir su versión de la función y asignarla a la variable si lo desean, y el resto no hace nada. Puedo probar una función nula antes de ejecutarla en el código compartido.

A partir de los comentarios de las personas anteriores, deduzco que también es posible redefinir una función estática, pero creo que la solución variable es agradable y clara.

    
24
2015-12-28 20: 26: 41Z

En términos informáticos, hablamos de funciones anónimas y funciones nombradas. Creo que la diferencia más importante es que una función anónima no está vinculada a un nombre, de ahí la función anónima. En JavaScript es un objeto de primera clase declarado dinámicamente en tiempo de ejecución.

Para obtener más información sobre las funciones anónimas y el cálculo lambda, Wikipedia es un buen comienzo ( http: //en. wikipedia.org/wiki/Anonymous_function ).

    
22
2014-10-19 22: 25: 19Z

La respuesta de Greg es lo suficientemente buena, pero todavía me gustaría agregar algo que aprendí justo ahora viendo videos de Douglas Crockford .

Expresión de función:

 
var foo = function foo() {};

Declaración de función:

 
function foo() {};

La declaración de función es solo una abreviatura de la declaración var con un valor function.

Entonces

 
function foo() {};

se expande a

 
var foo = function foo() {};

Que se expande más allá de:

 
var foo = undefined;
foo = function foo() {};

Y ambos están colocados en la parte superior del código.

Captura de pantalla del video

    
22
2017-05-23 12: 18: 36Z
  1. Lo siento, pero esto es incorrecto. No sé qué está tratando de decir Crockford en esa diapositiva. Ambas funciones y amp; Las declaraciones de variables siempre se elevan a la parte superior de su alcance. La diferencia es que las asignaciones de variables (ya sea que las asigne con una cadena, un valor booleano o una función) no se elevan a la parte superior, mientras que los cuerpos de funciones (que utilizan la declaración de funciones) son
    2015-10-05 16: 25: 35Z
  2. Eche un vistazo a estos ejemplos de código: gist .github.com /cyberthom /36603fbc20de8e04fd09
    2015-10-05 16: 51: 24Z

@EugeneLazutkin da un ejemplo donde él nombra una función asignada para poder usar shortcut() como una referencia interna a sí misma. John Resig ofrece otro ejemplo: copiar una función recursiva asignada a otro objeto en su Aprendizaje de Javascript avanzado tutorial. Si bien la asignación de funciones a propiedades no es estrictamente la cuestión aquí, recomiendo probar el tutorial de manera activa; ejecute el código haciendo clic en el botón en la esquina superior derecha y haga doble clic en el código para editarlo a su gusto.

Ejemplos del tutorial: llamadas recursivas en yell():

Las pruebas fallan cuando se elimina el objeto ninja original. (página 13)

var ninja = { 
  yell: function(n){ 
    return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); 

var samurai = { yell: ninja.yell }; 
var ninja = null; 

try { 
  samurai.yell(4); 
} catch(e){ 
  assert( false, "Uh, this isn't good! Where'd ninja.yell go?" ); 
}

Si nombra la función que se llamará recursivamente, las pruebas pasarán. (página 14)

 
var ninja = { 
  yell: function yell(n){ 
    return n > 0 ? yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "Works as we would expect it to!" ); 

var samurai = { yell: ninja.yell }; 
var ninja = {}; 
assert( samurai.yell(4) == "hiyaaaa", "The method correctly calls itself." );
    
18
2017-05-23 12: 34: 59Z
  1. Solo llamar al this.yell también funciona :)
    2013-04-21 20: 54: 08Z

Otra diferencia que no se menciona en las otras respuestas es que si usa la función anónima

 
var functionOne = function() {
    // Some code
};

y úsalo como constructor como en

 
var one = new functionOne();

entonces one.constructor.name no se definirá. Function.name no es estándar pero es compatible con Firefox, Chrome, otros navegadores derivados de Webkit e IE 9+.

Con

 
function functionTwo() {
    // Some code
}
two = new functionTwo();

es posible recuperar el nombre del constructor como una cadena con two.constructor.name.

    
16
2013-01-17 08: 48: 42Z
  1. El nombre en el primer caso no se definirá porque es una función anónima asignada a una variable. Creo que la palabra anónimo se inventó para cosas que no tienen su nombre definido :)
    2013-01-17 06: 13: 39Z
  2. En este ejemplo, two = new se convierte en una función global porque no hay var
    2015-08-29 05: 04: 03Z

Si utilizarías esas funciones para crear objetos, obtendrías:

 
var objectOne = new functionOne();
console.log(objectOne.__proto__); // prints "Object {}" because constructor is an anonymous function

var objectTwo = new functionTwo();
console.log(objectTwo.__proto__); // prints "functionTwo {}" because constructor is a named function
    
14
2013-10-25 16: 38: 22Z
  1. Parece que no puedo reproducir esto. console.log(objectOne.__proto__); imprime "functionOne {}" en mi consola. ¿Alguna idea de por qué este puede ser el caso?
    2015-03-22 10: 06: 25Z
  2. Parece que tampoco puedo reproducirlo.
    2016-01-21 15: 57: 23Z
  3. Esta es una capacidad de su depurador (para mostrar la "clase" del objeto registrado), y la mayoría de ellos puede derivar un nombre incluso para expresiones de funciones anónimas. dias. Por cierto, debe dejar claro que no hay una diferencia funcional entre las dos instancias.
    2016-01-21 16: 26: 32Z

La primera (función doSomething (x)) debe ser parte de una notación de objeto.

El segundo (var doSomething = function(x){ alert(x);}) es simplemente crear una función anónima y asignarla a una variable, doSomething. Así que doSomething () llamará a la función.

Es posible que desee saber qué es una declaración de función y expresión de función .

Una declaración de función define una variable de función nombrada sin requerir una asignación de variable. Las declaraciones de funciones se producen como construcciones independientes y no pueden anidarse dentro de bloques que no son de función.

 
function foo() {
    return 3;
}
  

ECMA 5 (13.0) define la sintaxis como
  Identificador de función (FormalParameterList opt ) {FunctionBody}

En la condición anterior, el nombre de la función es visible dentro de su alcance y el alcance de su principal (de lo contrario, sería inalcanzable).

Y en una expresión de función

Una expresión de función define una función como parte de una sintaxis de expresión mayor (generalmente una asignación de variable). Las funciones definidas a través de expresiones de funciones pueden ser nombradas o anónimas. Las expresiones de función no deben comenzar con "función".

 
// Anonymous function expression
var a = function() {
    return 3;
}

// Named function expression
var a = function foo() {
    return 3;
}

// Self-invoking function expression
(function foo() {
    alert("hello!");
})();
  

ECMA 5 (13.0) define la sintaxis como
  identificador de función opt (FormalParameterList opt ) {FunctionBody}

    
14
2015-12-28 20: 29: 40Z

Estoy enumerando las diferencias a continuación:

  1. Una declaración de función se puede colocar en cualquier parte del código. Incluso si se invoca antes de que aparezca la definición en el código, se ejecuta a medida que la declaración de la función se confirma en la memoria o, de alguna manera, se eleva, antes de que se inicie cualquier otro código en la página.

    Eche un vistazo a la función a continuación:

     
    function outerFunction() {
        function foo() {
           return 1;
        }
        return foo();
        function foo() {
           return 2;
        }
    }
    alert(outerFunction()); // Displays 2
    

    Esto se debe a que, durante la ejecución, se ve así: -

     
    function foo() {  // The first function declaration is moved to top
        return 1;
    }
    function foo() {  // The second function declaration is moved to top
        return 2;
    }
    function outerFunction() {
        return foo();
    }
    alert(outerFunction()); //So executing from top to bottom,
                            //the last foo() returns 2 which gets displayed
    

    Una expresión de función, si no se define antes de llamarlo, generará un error. Además, aquí la definición de la función en sí no se mueve a la parte superior ni se confirma en la memoria como en las declaraciones de funciones. Pero la variable a la que asignamos la función se alza y se le asigna indefinido .

    La misma función que usa expresiones de función:

     
    function outerFunction() {
        var foo = function() {
           return 1;
        }
        return foo();
        var foo = function() {
           return 2;
        }
    }
    alert(outerFunction()); // Displays 1
    

    Esto se debe a que, durante la ejecución, se ve así:

     
    function outerFunction() {
       var foo = undefined;
       var foo = undefined;
    
       foo = function() {
          return 1;
       };
       return foo ();
       foo = function() {   // This function expression is not reachable
          return 2;
       };
    }
    alert(outerFunction()); // Displays 1
    
  2. No es seguro escribir declaraciones de funciones en bloques no funcionales como si porque no serán accesibles.

     
    if (test) {
        function x() { doSomething(); }
    }
    
  3. Es posible que una expresión de función con nombre como la que se muestra a continuación, no funcione en los navegadores de Internet Explorer anteriores a la versión 9.

     
    var today = function today() {return new Date()}
    
14
2015-12-28 20: 35: 28Z
  1. @ Arjun ¿Cuál es el problema si una pregunta se hizo años antes? Una respuesta no solo beneficia al OP, sino también a todos los usuarios de SO, sin importar cuándo se hizo la pregunta. ¿Y qué tiene de malo responder preguntas que ya tienen una respuesta aceptada?
    2015-10-05 12: 58: 33Z
  2. @ Arjun, debes entender que responder preguntas antiguas no es malo. Si fuera a ser así, SO habría tenido tal barrera. Imagina que hay un cambio en la API (aunque no en el contexto de esta pregunta) y alguien la detecta y responde con la nueva API, ¿no debería estar permitido? Hasta ya menos que la respuesta no tenga sentido y no pertenezca aquí, se votaría y eliminaría automáticamente. ¡¡¡No necesitas molestarte con ello!
    2015-10-18 21: 37: 08Z

A la luz del argumento "las funciones nombradas aparecen en las huellas de pila", los motores de JavaScript modernos son en realidad bastante capaces de representar funciones anónimas.

A partir de este escrito, V8, SpiderMonkey, Chakra y Nitro siempre se refieren a funciones nombradas por sus nombres. Casi siempre se refieren a una función anónima por su identificador, si tiene una.

SpiderMonkey puede averiguar el nombre de una función anónima devuelta por otra función. El resto no puede.

Si realmente quieres que tu iterador y las devoluciones de llamada exitosas aparezcan en la traza, también puedes nombrarlas ...

 
[].forEach(function iterator() {});

Pero en su mayor parte no vale la pena enfatizarse.

Arnés ( Fiddle )

 
'use strict';

var a = function () {
    throw new Error();
},
    b = function b() {
        throw new Error();
    },
    c = function d() {
        throw new Error();
    },
    e = {
        f: a,
        g: b,
        h: c,
        i: function () {
            throw new Error();
        },
        j: function j() {
            throw new Error();
        },
        k: function l() {
            throw new Error();
        }
    },
    m = (function () {
        return function () {
            throw new Error();
        };
    }()),
    n = (function () {
        return function n() {
            throw new Error();
        };
    }()),
    o = (function () {
        return function p() {
            throw new Error();
        };
    }());

console.log([a, b, c].concat(Object.keys(e).reduce(function (values, key) {
    return values.concat(e[key]);
}, [])).concat([m, n, o]).reduce(function (logs, func) {

    try {
        func();
    } catch (error) {
        return logs.concat('func.name: ' + func.name + '\n' +
                           'Trace:\n' +
                           error.stack);
        // Need to manually log the error object in Nitro.
    }

}, []).join('\n\n'));

V8

 
func.name: 
Trace:
Error
    at a (http://localhost:8000/test.js:4:11)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: b
Trace:
Error
    at b (http://localhost:8000/test.js:7:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: d
Trace:
Error
    at d (http://localhost:8000/test.js:10:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at a (http://localhost:8000/test.js:4:11)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: b
Trace:
Error
    at b (http://localhost:8000/test.js:7:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: d
Trace:
Error
    at d (http://localhost:8000/test.js:10:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at e.i (http://localhost:8000/test.js:17:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: j
Trace:
Error
    at j (http://localhost:8000/test.js:20:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: l
Trace:
Error
    at l (http://localhost:8000/test.js:23:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at http://localhost:8000/test.js:28:19
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: n
Trace:
Error
    at n (http://localhost:8000/test.js:33:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: p
Trace:
Error
    at p (http://localhost:8000/test.js:38:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27 test.js:42

SpiderMonkey

 
func.name: 
Trace:
a@http://localhost:8000/test.js:4:5
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: b
Trace:
b@http://localhost:8000/test.js:7:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: d
Trace:
d@http://localhost:8000/test.js:10:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: 
Trace:
a@http://localhost:8000/test.js:4:5
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: b
Trace:
b@http://localhost:8000/test.js:7:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: d
Trace:
d@http://localhost:8000/test.js:10:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: 
Trace:
e.i@http://localhost:8000/test.js:17:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: j
Trace:
j@http://localhost:8000/test.js:20:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: l
Trace:
l@http://localhost:8000/test.js:23:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: 
Trace:
m</<@http://localhost:8000/test.js:28:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: n
Trace:
n@http://localhost:8000/test.js:33:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: p
Trace:
p@http://localhost:8000/test.js:38:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

Chakra

 
func.name: undefined
Trace:
Error
   at a (http://localhost:8000/test.js:4:5)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at b (http://localhost:8000/test.js:7:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at d (http://localhost:8000/test.js:10:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at a (http://localhost:8000/test.js:4:5)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at b (http://localhost:8000/test.js:7:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at d (http://localhost:8000/test.js:10:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at e.i (http://localhost:8000/test.js:17:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at j (http://localhost:8000/test.js:20:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at l (http://localhost:8000/test.js:23:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at Anonymous function (http://localhost:8000/test.js:28:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at n (http://localhost:8000/test.js:33:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at p (http://localhost:8000/test.js:38:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

Nitro

 
func.name: 
Trace:
a@http://localhost:8000/test.js:4:22
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: b
Trace:
b@http://localhost:8000/test.js:7:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: d
Trace:
d@http://localhost:8000/test.js:10:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
a@http://localhost:8000/test.js:4:22
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: b
Trace:
b@http://localhost:8000/test.js:7:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: d
Trace:
d@http://localhost:8000/test.js:10:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
i@http://localhost:8000/test.js:17:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: j
Trace:
j@http://localhost:8000/test.js:20:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: l
Trace:
l@http://localhost:8000/test.js:23:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
http://localhost:8000/test.js:28:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: n
Trace:
n@http://localhost:8000/test.js:33:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: p
Trace:
p@http://localhost:8000/test.js:38:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33
    
11
2015-01-13 03: 24: 58Z

Hay cuatro comparaciones notables entre las dos diferentes declaraciones de funciones que se enumeran a continuación.

  1. Disponibilidad (alcance) de la función

Lo siguiente funciona porque function add() está dentro del alcance del bloque más cercano:

 
try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

function add(a, b){
  return a + b;
}

Lo siguiente no funciona (porque el var add= reemplaza al function add()).

 
try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

var add=function add(a, b){
  return a + b;
}

Lo siguiente no funciona porque add se declara después de su uso.

 
try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

var add=function(a, b){
  return a + b;
}
  1. (función) .name

El nombre de una función function thefuncname(){} es thefuncname cuando se declara de esta manera.

 
function foobar(a, b){}

console.log(foobar.name);

 
var a = function foobar(){};

console.log(a.name);

De lo contrario, si una función se declara como function(){}, la función .name es la primera variable utilizada para almacenar la función.

 
var a = function(){};
var b = (function(){ return function(){} });

console.log(a.name);
console.log(b.name);

Si no hay variables configuradas para la función, entonces el nombre de las funciones es la cadena vacía ("").

 
console.log((function(){}).name === "");

Por último, mientras la variable a la que está asignada la función establece inicialmente el nombre, las variables sucesivas establecidas en la función no cambian el nombre.

 
var a = function(){};
var b = a;
var c = b;

console.log(a.name);
console.log(b.name);
console.log(c.name);
  1. Rendimiento

En V8 de Google y Spidermonkey de Firefox puede haber una diferencia de compilación JIST de pocos microsegundos, pero en última instancia el resultado es el mismo. Para probar esto, examinemos la eficiencia de JSPerf en microbenchmarks comparando la velocidad de dos fragmentos de código en blanco. Las pruebas JSPerf se encuentran aquí . Y, las jsben.ch tests se encuentran aquí . Como puede ver, hay una diferencia notable cuando no debería haber ninguna. Si realmente eres un fanático del rendimiento como yo, entonces quizás valga más la pena intentar reducir el número de variables y funciones en el ámbito y, especialmente, eliminar el polimorfismo (como usar la misma variable para almacenar dos tipos diferentes).

  1. Mutabilidad variable

Cuando usas la palabra clave var para declarar una variable, puedes reasignar un valor diferente a la variable como tal.

 
(function(){
    "use strict";
    var foobar = function(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();

Sin embargo, cuando usamos la sentencia const, la referencia de variable se vuelve inmutable. Esto significa que no podemos asignar un nuevo valor a la variable. Tenga en cuenta, sin embargo, que esto no hace que el contenido de la variable sea inmutable: si hace const arr = [], todavía puede hacer arr[10] = "example". Solo hacer algo como arr = "new value" o arr = [] arrojaría un error como se ve a continuación.

 
(function(){
    "use strict";
    const foobar = function(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();

Curiosamente, si declaramos la variable como function funcName(){}, entonces la inmutabilidad de la variable es lo mismo que declararla con var.

 
(function(){
    "use strict";
    function foobar(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();

¿Qué es el "bloque más cercano"

El "bloque más cercano" es la función "más cercana" (que incluye funciones asíncronas, funciones de generador y funciones de generador asíncronas). Sin embargo, de manera interesante, un function functionName() {} se comporta como un var functionName = function() {} cuando se encuentra en un bloque que no está cerrado a elementos fuera de dicho cierre. Observar.

  • normal var add=function(){}

 
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}');
  }
} catch(e) {
  console.log("Is a block");
}
var add=function(a, b){return a + b}
  • normal function add(){}

 
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
function add(a, b){
  return a + b;
}
  • función

 
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(function () {
    function add(a, b){
      return a + b;
    }
})();
  • Declaración (como if, else, for, while, try/catch/finally, switch, do/while, with)

 
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
{
    function add(a, b){
      return a + b;
    }
}
  • Función de flecha con var add=function()

 
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(() => {
    var add=function(a, b){
      return a + b;
    }
})();
  • Función de flecha con function add()

 
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(() => {
    function add(a, b){
      return a + b;
    }
})();
    
11
2018-11-29 11: 50: 48Z

En JavaScript hay dos formas de crear funciones:

  1. Declaración de función:

     
    function fn(){
      console.log("Hello");
    }
    fn();
    

    Esto es muy básico, se explica por sí mismo, se usa en muchos idiomas y es estándar en toda la familia C de idiomas. Declaramos que una función la definió y la ejecutamos llamándola.

    Lo que debes saber es que las funciones son realmente objetos en JavaScript; internamente, hemos creado un objeto para la función anterior y le hemos dado un nombre llamado fn o la referencia al objeto se almacena en fn. Las funciones son objetos en JavaScript; una instancia de función es en realidad una instancia de objeto.

  2. Expresión de función:

     
    var fn=function(){
      console.log("Hello");
    }
    fn();
    

    JavaScript tiene funciones de primera clase, es decir, crea una función y la asigna a una variable de la misma manera que creas una cadena o número y la asignas a una variable. Aquí, la variable fn se asigna a una función. La razón de este concepto es que las funciones son objetos en JavaScript; fn está apuntando a la instancia de objeto de la función anterior. Hemos inicializado una función y la hemos asignado a una variable. No está ejecutando la función y asignando el resultado.

Referencia: función de JavaScript sintaxis de la declaración: var fn = function () {} vs function fn () {}

    
10
2017-04-09 07: 13: 56Z
  1. ¿qué hay de la tercera opción, var fn = function fn() {...}?
    2016-08-20 00: 40: 27Z
  2. Hola Chharvey, no estoy seguro de tu pregunta, supongo que estás hablando de la expresión de función que ya he mencionado. Sin embargo, si todavía hay alguna confusión, simplemente sea más elaborativo.
    2016-08-23 10: 00: 44Z
  3. sí, estaba preguntando acerca de la expresión de la función named . es similar a su opción # 2, excepto que la función tiene un identificador. por lo general, este identificador es el mismo que la variable a la que se asigna, pero no siempre es así.
    2016-08-23 10: 39: 46Z
  4. Sí La expresión de la función con nombre es similar a mi opción # 2. Bueno, tener un identificador no es obligatorio ya que no se usa. Cuando esté ejecutando la expresión de la función, usará la variable que contiene el objeto de la función. El identificador no sirve para nada.
    2016-08-23 11: 42: 19Z

Ambas son formas diferentes de definir una función. La diferencia es cómo el navegador los interpreta y los carga en un contexto de ejecución.

El primer caso es de expresiones de función que se cargan solo cuando el intérprete llega a esa línea de código. Por lo tanto, si lo hace de la siguiente manera, recibirá un error que indica que functionOne no es una función .

 
functionOne();
var functionOne = function() {
    // Some code
};

El motivo es que en la primera línea no se asigna ningún valor a functionOne y, por lo tanto, no está definido. Estamos tratando de llamarlo como una función, y por lo tanto, estamos recibiendo un error.

En la segunda línea, estamos asignando la referencia de una función anónima a functionOne.

El segundo caso es de declaraciones de funciones que se cargan antes de ejecutar cualquier código. Por lo tanto, si le gusta lo siguiente, no recibirá ningún error, ya que la declaración se carga antes de la ejecución del código.

 
functionOne();
function functionOne() {
   // Some code
}
    
9
2015-12-28 20: 42: 20Z

Sobre el rendimiento:

Las nuevas versiones de V8 introdujeron varias optimizaciones bajo el capó y también lo hicieron SpiderMonkey.

Ahora casi no hay diferencia entre expresión y declaración.
Expresión de función parece ser más rápido ahora.

Chrome 62.0.3202 Prueba de Chrome

FireFox 55 Prueba de Firefox

Chrome Canary 63.0.3225 Prueba de Chrome Canary


  

Las expresiones de función Anonymous parecen tener un mejor rendimiento   Contra la expresión de la función Named.


Firefox Firefox named_anonymous Chrome Canary Chrome canary named_anonymous Chrome Chrome named_anonymous

    
9
2017-09-28 05: 13: 17Z
  1. Sí, esta diferencia es tan insignificante que esperamos que los desarrolladores se preocupen por qué enfoque es más fácil de mantener para sus necesidades específicas en lugar de lo que uno podría ser más rápido (obtendrás diferentes resultados de jsperf en cada intento, dependiendo de lo que haga el navegador; la mayoría de las tareas de javascript no tienen que preocuparse por las micro optimizaciones en este grado).
    2017-11-26 01: 41: 53Z
  2. @ squidbe No hay diferencia. Consulte aquí: jsperf.com/empty-tests-performance
    2018-05-10 21: 10: 00Z

Son muy similares con algunas pequeñas diferencias, la primera es una variable que se asigna a una función anónima (Declaración de función) y la segunda es la forma normal de crear una función en JavaScript (Declaración de función anónima), ambas tienen uso, contras y pros:

1. Expresión de la función

 
var functionOne = function() {
    // Some code
};
  

Una expresión de función define una función como parte de un objeto más grande.   sintaxis de expresión (normalmente una asignación de variable). Funciones   definidas a través de Funciones Expresiones pueden ser nombradas o anónimas. Función   Las expresiones no deben comenzar con "función" (de ahí los paréntesis   alrededor del auto invocando el siguiente ejemplo).

Asignar una variable a una función, significa que no hay Elevación, ya que sabemos que las funciones en JavaScript pueden Elevar, significa que pueden llamarse antes de que se declaren, mientras que las variables deben declararse antes de acceder a ellas, por lo que significa en este caso no podemos acceder a la función antes de que se declare, también podría ser una forma de escribir sus funciones, para las funciones que devuelven otra función, este tipo de declaración podría tener sentido, también en ECMA6 & Anteriormente, puede asignar esto a una función de flecha que se puede usar para llamar a funciones anónimas, también esta forma de declaración es una mejor manera de crear funciones de Constructor en JavaScript.

2. Declaración de funciones

 
function functionTwo() {
    // Some code
}
  

Una declaración de función define una variable de función nombrada sin   requiriendo asignación de variables. Las declaraciones de funciones se producen como   Las construcciones independientes y no se pueden anidar dentro de bloques no funcionales.   Es útil pensar en ellos como hermanos de declaraciones variables.   Del mismo modo que las Declaraciones de Variables deben comenzar con "var", Función   Las declaraciones deben comenzar con "función".

Esta es la forma normal de llamar a una función en JavaScript, se puede llamar a esta función antes de que incluso la declares como en JavaScript. Todas las funciones son Hoisted, pero si tienes "uso estricto", esto no será Hoist como se esperaba, es una buena manera de llamar a todas las funciones normales que no son grandes en líneas ytampoco son una función constructora.

Además, si necesita más información sobre cómo funciona el levantamiento en JavaScript, visite el siguiente enlace:

https://developer.mozilla.org/en-US/docs /Glosario /Elevación

    
8
2017-07-30 04: 30: 14Z
  1. ...also this way of declaring is a better way to create Constructor functions in JavaScript, por favor, explique, ¡tengo curiosidad!
    2017-06-13 12: 44: 01Z
  2. Una razón es porque todas las funciones de Constructor incorporadas en JavaScript creadas como esta Número de función () {[código nativo]} y no debe confundirse con built- en otros, también hacer referencia más adelante en este caso es más seguro y terminas con un código más ordenado pero sin usar la elevación ...
    2017-06-13 12: 56: 45Z

Esto es solo dos formas posibles de declarar funciones, y en la segunda forma, puedes usar la función antes de declarar.

    
6
2015-12-28 20: 32: 45Z
  1. Por favor, elabore y proporcione fragmentos de código de trabajo
    2018-05-10 21: 06: 22Z

new Function() se puede usar para pasar el cuerpo de la función en una cadena. Y por lo tanto, esto se puede utilizar para crear funciones dinámicas. También pasa el script sin ejecutar el script.

 
var func = new Function("x", "y", "return x*y;");
function secondFunction(){
   var result;
   result = func(10,20);
   console.log ( result );
}

secondFunction()
    
5
2016-05-10 07: 05: 46Z
  1. Si bien esto es bueno y verdadero, ¿cómo se relaciona esto solo con la pregunta que se está haciendo?
    2018-05-10 21: 06: 04Z
fuente colocada aquí
Otras preguntas