2

¿Qué significa este código en Javascript?

He hecho algunos pequeños scripts en Javascript y leído bastante contenido, pero no puedo entender este código.

Está resumido porque tiene miles de líneas. Según lo que leí en Stackoverflow en inglés, agregar un signo de admiración delante de una función permite crear funciones sin nombre para ahorrar espacio que son llamadas inmediatamente.

Pero qué significa en este código los corchetes, que en la llamada a la función () se pase como parámetro docenas de definiciones de funciones encerradas entre corchetes?

Lo que está entre paréntesis sería lo que se pasa como argumento, pero no entiendo que sería lo que ejecuta si en ese argumento hay docenas de definiciones de funciones encerradas entre paréntesis.

Y lo que más raro me resulta, es que según me marca notepad++ , el corchete cierra en la mitad de la definición de una función .

! function(e) {
  // cuerpo de la función
    }
}([function(e, t, n) {
    // cuerpo de la funcion
}, function(e, t) {
   // cuerpo de la funcion
}, function(e, t, n) {
    // cuerpo de la funcion
}, function(e, t, n) {
    // cuerpo de la funcion
}, function(e, t, n) {
    // cuerpo de la funcion
}, function(e, t) {
   // cuerpo de la funcion

}, function(e, t, n) {

}, 

//... 
//n definiciones de funciones más (docenas)
//...

, function(e, t, n) {
    "use strict";

    function r(e) {
        var t = Function.prototype.toString,
            n = Object.prototype.hasOwnProperty,

            // En esta linea de abajo se encuentra el corchete que cierra , poco después del for
            r = RegExp("^" + t.call(n).replace(/[\\^$.*+?()[\]{}|]/g, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
        try {
            var o = t.call(e);
            return r.test(o)
        } catch (i) {
            return !1
        }
    }

    // mas cuerpo de la funcion

}
2
  • Ese corchete que esta en el medio de un string precedido de un \ es nada mas y nada menos que el caracter "]" de un regular expression. No tiene nada que ver con el corchete de arriba. El corchete de arriba es simplemente el inicio de un array de funciones (Si no encuentras el otro posiblemente el código está incompleto) Commented el 2 mar. 2017 a las 13:12
  • ahh ya veo, puede ser porque cortan en varios archivos todo el código supongo? Notepad++ me marca ese pero debe ser porque no está todo el codigo javascript en un archivo sino separado en varios
    – Pablo
    Commented el 2 mar. 2017 a las 13:21

3 respuestas 3

5

El signo de admiracion y otros operadores como "-" "+" etc, son usados para que el interprete reconozca la sentencia como una operacion, haciendo que la funcion se ejecute automaticamente. Luego lo que esta haciendo es pasar un array como parametro de la funcion. El array contiene funciones. Te dejo un pequeño ejemplo de como se puede acceder a esos parametros.

!function(){
  alert(arguments.length);// imprime 1
  arguments[0][0]());     // imprime 2
  arguments[0][1]());     // imprime 3
}([function(){
    alert("2");
},
function(){
    alert("3");
},]);

Lo del corchete que cierra en medio de una funcion bien puede ser un error de sintaxis o un error del parser de notepad++. Puedes intentar usando un IDE como WebStorm

4

El signo de exclamación ! al principio de una función hace que ésta sea interpretada como una expresión, de modo que pueda invocarse solamente añadiendo (). Es una versión compacta de una IIFE tradicional:

(function () {
  // hacer algo
})();

¿Pero qué significa en este código los corchetes, que en la llamada a la función se pase como parámetro docenas de definiciones de funciones encerradas entre corchetes?

No es nada raro, JavaScript es un lenguaje muy flexible y te permite guardar de todo en colecciones (array, map, set). En ese código simplemente se está pasando un array de funciones para que éstas estén disponibles dentro de la IIFE.

Y lo que más raro me resulta, es que según me marca notepad++ , el corchete cierra en la mitad de la definición de una función

Eso ciertamente sería un error de sintaxis, por lo que, te faltó decir si el código se ejecuta correctamente y sin errores.

7
  • 1
    ninjado de nuevo
    – ffflabs
    Commented el 2 mar. 2017 a las 13:13
  • Jajaja Me gusta tu sentido del humor mi querido colega ;)
    – gugadev
    Commented el 2 mar. 2017 a las 13:15
  • Es una de las librerías que usa Instagram para hacer funcionar Instagram. Supongo que sí, porque ese archivo es referenciado constantemente. He seguido algunas de las ejecuciones para poder ver que direcciones llama la API y con que parámetros y no he encontrado que se pare la ejecución en ningun momento . Lo que recibe como parámetro la función principal sería cada uno de los resultados de la ejecución de esas funciones como miembros de un array? O son los cuerpos de las funciones sin ejecutar dentro de un array para ser llamados luego? O qué es?
    – Pablo
    Commented el 2 mar. 2017 a las 13:17
  • Puedo publicar el archivo entero aquí (el link), tiene 33000 y pico de líneas
    – Pablo
    Commented el 2 mar. 2017 a las 13:18
  • Añádelo a tu pregunta si gustas. Respecto a tu pregunta, JavaScript no es como lenguajes procedurales como Java o C#; en JavaScript tu puedes pasar funciones como parámetros (callbacks), también puedes pasar un array de funciones, o una mezcla de funciones con strings y numeros y objetos, básicamente puedes pasar lo que se te ocurra.
    – gugadev
    Commented el 2 mar. 2017 a las 13:22
4

Antes que nada, ese código tiraría error, porque si bien

!function() { };

Es válido, el espacio entre el signo de exclamación y function lo debe haber puesto un plugin que formatea el código, y es inválido.

Ahora bien, suponiendo que ese espacio no está ahí, resulta que

function hola() {}

Es una declaración de función, mientras que

!function hola() {};

Es una expresión de función y, efectivamente, ponerle nombre "hola" es completamente opcional.

Lo que viene después ([cosas]) equivale a invocar la función de forma inmediata (por lo cual se las conoce como iife por inmediately invoked function expression) dándole como parámetros un array de funciones. No importa la forma que tengan los parámetros mientras la función espere ese tipo de parámetros.

Si el primer y único parámetro es una array de funciones, puede que la función iife esté destinada a iterar sobre ese arreglo llamándolas en orden, promisificándolas, usando unas como callback de otras, etc. A simple vista es prácticamente imposible deducir para qué sirve.

PD: Y que el corchete cierre en la mitad de los argumentos, apuesto a que es otro error del embellecedor de sintaxis que metió un espacio donde no debía.

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.