Diferencia entre funciones JavaScript

publicado por: Anonymous

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?

solución

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

_x000D_

_x000D_

$(function(){_x000D_
    function EjemploUno(){_x000D_
        //código_x000D_
    }_x000D_
_x000D_
    var EjemploDos = function(){_x000D_
        //código_x000D_
    }_x000D_
_x000D_
    $("#button1").click(function(){_x000D_
        alert("Nombre: " + EjemploUno.name);_x000D_
    });_x000D_
  _x000D_
    $("#button2").click(function(){_x000D_
        alert("Nombre: " + EjemploDos.name);_x000D_
    });_x000D_
_x000D_
});

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

$(function(){_x000D_
    var EjemploTres = function EjemploCuatro(){_x000D_
        //código_x000D_
    }_x000D_
_x000D_
    $("#button3").click(function(){_x000D_
        alert("Nombre: " + EjemploTres.name);_x000D_
    });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<button id="button3">EjemploTres</button>

_x000D_

_x000D_

_x000D_

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *