17

Revisando código de JavaScript, ví estos dos tipos de funciones:

function EjemploUno(){
   //código
}

var EjemploDos = function(){
   //código
}

Entonces, ¿cuál es la diferencia entre una y otra?, ¿cuándo debiera usar una u otra?

6 respuestas 6

16

La diferencia es que en el primer caso se trata de una función con nombre EjemploUno mientras que en el segundo caso se trata de una función anónima asignada a una variable de nombre EjemploDos

Esto lo podemos verificar fácilmente con la propiedad .name como se puede apreciar en este fragmento de código

$(function(){
    function EjemploUno(){
        //código
    }

    var EjemploDos = function(){
        //código
    }

    $("#button1").click(function(){
        alert("Nombre: " + EjemploUno.name);
    });
  
    $("#button2").click(function(){
        alert("Nombre: " + EjemploDos.name);
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">EjemploUno</button>
<button id="button2">EjemploDos</button>

En el primer caso obtenemos el resultado esperado EjemploUno mientras que en el segundo se obtiene una cadena vacía ya que la función es anónima

Ya que el nombre de la función no es lo mismo que el nombre de la variable que tiene asignada la función podemos tener también lo sgte:

var EjemploTres = function EjemploCuatro(){
    //código
}

En cuyo caso se trata de una variable de nombre EjemploTres que tiene una función con nombre EjemploCuatro

$(function(){
    var EjemploTres = function EjemploCuatro(){
        //código
    }

    $("#button3").click(function(){
        alert("Nombre: " + EjemploTres.name);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button3">EjemploTres</button>

En el último caso vemos como el nombre corresponde a EjemploCuatro y no EjempoTres ya que este es el nombre de la función y no de la variable.

2
  • 4
    mientras que en el segundo se obtiene una cadena vacía ya que la función es anónima --> No es del todo cierto, navegadores que implementen funciones ES2015 pueden inferir el nombre de funciones anónimas desde su posición sintáctica. Por ejemplo var f = function(){}; console.log(f.name) // f developer.mozilla.org/es/docs/Web/JavaScript/Referencia/… Commented el 21 may. 2017 a las 12:15
  • Tienes toda la razón. Actualmente el código de ejemplo si devuelve "EjemploDos" en navegadores actuales Commented el 11 may. 2021 a las 4:53
12

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 ella.

Nota: Esta estructura NO requiere el uso de un ; al final de su declaración.

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. Ambas formas REQUIEREN el uso de un ; para separarlas de la próxima instrucción. 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);

ACTUALIZACIÓN

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.

ACTUALIZACIÓN 2

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.

3
  • 2
    bajo mi punto de vista muy buena, por los detalles y las explicaciones que orientan mejor cuando usar una u otra. Saludos Commented el 22 feb. 2016 a las 21:23
  • @AngelAngel Al fin pude completar una respuesta que ya estaba bastante larga de por sí. La razón que me llevó a escribirla es que todas las demás parten del principio "las 2 formas son iguales con pequeñas diferencias" cuando en realidad la respuesta es "son completamente diferentes pero se pueden usar para lo mismo". Que lo disfrutes.
    – devconcept
    Commented el 23 feb. 2016 a las 14:27
  • 2
    +1 Ahora, como dicen algunos: "Esta debiera ser la respuesta aceptada". Bueno, no siempre se tiene lo que uno quiere. Commented el 29 ago. 2016 a las 23:31
3

Aqui

JavaScript Function Definitions

se explica lo que planteas

  • la primer forma define un funcion
  • la segunda en realidad es un funcion anónima que asignas a una variable

Cuando defines

var x = function() { ...

no le estas definiendo un nombre a la funcion, sino que asignas esta a una variable, y es por medio de esta que la ejecutas.

Es lo mismo cuando haces algo como esto

function Metodo1(callBack){
   callBack();
}

Metodo1(function() {

    alert('mensaje');

});

en este caso estas pasando por parametro una funcion anónima.

3

Funciones nombradas: son aquellas funciones que reciben un nombre en su declaración.

function foo(){};

Funciones por expresión: su nombre es opcional en su declaración, en caso de no tenerlo, son también llamadas funciones anónimas.

var foo = function(){};
var bar = function other(){};

console.log(foo.name); // foo
console.log(bar.name); // other

Diferencias:

  • Velocidad: no hay.
  • Contexto: (this) es distinto, depende de donde es ejecutada.

Ejemplo:

function foo() {
    console.log(this);
};

var anFn = function(){
    console.log(this);
};

var bar = {
    foo: anFn
};

Los resultados de ejecución serían:

foo(); // Window
bar.foo(); // Object
anFn(); // Window

Las funciones anónimas comúnmente son utilizadas:

  1. Dentro de objetos literales (métodos).
  2. Nuevas funciones añadidas a prototype.
  3. Como funciones autoejecutables (con la finalidad de mantener el alcance separado).

Ejemplo útil (función anónima)

Ejercicio: Tomando en cuenta que tienes un sitio en el cual deseas enumerar cada imagen publicada y que se muestre en consola su número correspondiente cada que el usuario pasa el mouse sobre ella.

Podríamos fácilmente hacer algo como lo siguiente:

var list = document.querySelectorAll('img');

for(var i=0; i<list.length; i++) {
  var item = list[i];
  item.addEventListener('mouseover', function(){
    console.log(i);
  });
}
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

En el caso de arriba, tendríamos un resultado no esperado, debido a que nos devolvería siempre el mismo índice para todas las imágenes (sin importar la posición) y éste número sería igual a la longitud de imágenes en nuestro sitio. Mientras que el siguiente código nos muestra:

var list = document.querySelectorAll('img');

for(var i=0; i<list.length; i++) {
  // Función anónima
  (function(i){
    var item = list[i];
    item.addEventListener('mouseover', function(){
      console.log(i);
    });
  })(i);
}
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

Aquí tendríamos el resultado esperado.

¿A qué se debe el comportamiento?:

En el primer caso, la variable i va a incrementar modificando su valor anterior, de modo que cuando se hace un mouseover sobre la imagen, es llamado i con el último valor establecido en el bucle (a su última iteración).

En el segundo caso (función anónima-autoejecutable), podemos ver que se está pasando i como parámetro, de modo que este se recibe como un nuevo alcance que permanecerá así hasta que sea modificado por dentro, por tanto su referencia a i mantiene el valor de cuando fue recibido.

2

En la primera, la función se asigna a la variable foo(Es un término genérico ampliamente usado para aludir a cualquier entidad informática cuyo nombre se ignora) en tiempo de ejecución.

function EjemploUno(){} 

La declaración levanta la función.

En la segunda, la función se asigna a ese identificador foo, en tiempo de análisis.

var EjemploDos = function(){}

La declaración levanta la var EjemploDos pero su valor (la función) es indefinida.

Referencia

2

Dicho en manera breve: EjemploUno es una función declarada y EjemploDos es una función expresada.

¿Qué significa? El motor de javascript antes de poner en ejecución el código hace lectura de las funciones declaradas y no lee las funciones expresadas sino hasta el momento en que se ejecuta el código.

¿Qué implica? Veamoslo en dos ejemplos:

var a = EjemploUno();
console.log(a); // imprime 1

var b = EjemploDos();
console.log(b); // Lanza un TypeError: EjemploDos is not a function

function EjemploUno(){
    return "1";
}

var EjemploDos = function(){
    return "2";
};

Lanza error porque EjemploDos además de ser función también es una variable que en este caso no ha sido declarada.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.