Skip to main content
4 de 6
Expandida la respuesta para mostrar aun más diferencias
devconcept
  • 12.8k
  • 3
  • 42
  • 57

Las dos formas se usan para declarar funciones en Javascript y las diferencias no son solo en la forma que se asignan las variables sino que hay consecuencias semánticas al usar uno u otro método para declararlas. Vamos por partes:

function EjemploUno(){
    //código
}

Esto es lo que se conoce como una definición de una función y se usa para declarar una función y asignársela al identificador o variable EjemploUno. He visto también usarse el término declaración de función para referirse a esta estructura.

Las consecuencias de declarar funciones de esta forma es que el intérprete de Javascript cuando se encuentra con algo como eso hace hoisting con la variable e incluye el cuerpo de la función. Un ejemplo de esto lo puedes comprobar en el siguiente fragmento de código.

alert(Ejemplo1);
alert(Ejemplo2);

console.log(Ejemplo1);
console.log(Ejemplo2);

function Ejemplo1() {
   // Cuerpo de la función Ejemplo1
}

var Ejemplo2 = function() {
   // Cuerpo de la función Ejemplo2
}

La primera instrucción alert hace referencia a una variable que esta declarada 6 líneas de código debajo sin embargo te muestra el contenido de la función (alert internamente usa toString() para mostrar el objeto que se quiere representar) sin embargo el segundo alert muestra undefined lo que ocurre porque el identificador esta declarado pero no se le ha asignado ningún valor. La asignación sólo ocurre 9 líneas de código debajo cuando se ejecuta la instrucción Ejemplo2 = function()

Ese segundo caso es lo que se conoce como Expresión de función que puede ser anónima o no. Ejemplo:

var Ejemplo2 = function() {
     // Expresión de función que asigna una función sin nombre o anónima
     // a una variable Ejemplo2
}

var Ejemplo2 = function MyFunc() {
    // Expresión de función que asigna una función llamada MyFunc a
    // la variable Ejemplo2
}

La diferencia entre las dos formas anteriores es que cuando a la variable Ejemplo2 se le asigna otro valor, la función anonima será marcada por el recolector de basura para ser eliminada, siempre y cuando no se haya asigado en otro lugar ya que no hay ninguna variable haciendole referencia por lo que es imposible volverla a recuperar.

En el caso de la expresión de función con nombre es posible hacer algo como esto:

var Ejemplo3;
var Ejemplo2 = function MyFunc() {
    Ejemplo3 = MyFunc;
    // La referencia MyFunc sólo existe dentro del cuerpo de la propia función
}

// var Ejemplo4 = MyFunc ----- lanza un error de referencia MyFunc is not defined

El identificador MyFunc se puede guardar y puedes seguir referenciando a la función aun cuando a Ejemplo2 se le asigne a otro valor. Esto resulta muy práctico para hacer referencia a la función dentro de si misma; por ejemplo para deregistrar eventos dentro de si mismos como se muestra en el fragmento de código siguiente:

var button = $('#testButton');
button.on('click', function clickHandler() {
  alert('Haz hecho click en el botón');
  
  button.off('click', clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="testButton">Al hacer click el boton se desactivará!</button>

Al hacer click en el botón el evento se elimina ya que hay una referencia a la función que se usó para registrarlo.

Los otros usos que se le puede dar a este patrón es que en caso de una excepción se puede identificar fácilmente el origen del problema ya que el nombre de la función se mostrará en la pila del error y se puede usar para crear recursividad. Ejemplo:

var Ejemplo = function recursivo(arg) {
  if (arg < 10) {
    console.log('iteración ' + arg);
    recursivo(arg + 1);
  }
}

Ejemplo(2);

UPDATE

Existe otro caso donde las diferencias se hacen más notables y es cuando se ejecuta el código en modo estricto y se habilita EcmaScript 5 el cual establece algunos requerimientos como que las declaraciones de funciones sólo pueden usarse en el bloque de nivel superior o sea no deberías hacer algo como esto:

// código ilegal
(function() {
    'use strict';

     
     if (true) {
         // bloque de la instrucción if
         function b() {
             // esto funciona en algunos entornos pero de acuerdo al estándard 
             // no es código legal
             // lo recomendado es que uses una expresión de función en casos como este
         }
         b();
     }     

} ());

// aceptado por el estándard
(function() {
    'use strict';

     function b() {
       // ahora la función se encuentra declarada en el bloque de la función 
       // o bloque de nivel superior
     }  
   
     if (true) { 
         b();
     }     

} ());

El código anterior no genera errores en algunos entornos pero la razón de esto es por extensiones que le hacen los navegadores al estandard ECMA-262, que especifica que las declaraciones de funciones no se pueden usar en todas partes, restricción que no aplica a las Expresiones de función. Este vínculo(en inglés) tiene información sobre los motivos por los que el estándard hace semejante afirmación.

UPDATE2

El último caso donde se ven las diferencias es que en Ecmascript 6 ya existe el ámbito de bloque lo que cambia completamente la semántica de una declaracion de función si esta se encuentra dentro de un bloque de código como el ejemplo anterior. Según el estandard esto debería ocurrir:

if (true) {
   function Ejemplo1() {}

   function Ejemplo2() {}

   Ejemplo1();
}
Ejemplo2() // Reference error Ejemplo2 is not defined

Esto es algo que aún se encuentra en proceso de implementación pero lo recomendado es que no escribas código que pueda ser considerado ilegal para que lo que escribas pueda sobrevivir mejor a los cambios futuros que pueda experimentar el lenguaje por eso es importante que conozcas las diferencias entre las dos estructuras.

Tu pregunta se puede resumirse en que son completamente diferentes desde el punto de vista del lenguaje (incluso en el spec se encuentran divididas http://es5.github.io/#x12.4 y http://es5.github.io/#x13) teniendo como similitud que ambas pueden usarse para declarar funciones.

devconcept
  • 12.8k
  • 3
  • 42
  • 57