4

Contexto

Revisando scripts para preparar archivos minimizados, he encontrado un par de funciones que por su estructura me han llamado la atención.

La exclamación

La primera, por que usa un signo de exclamación ! al inicio de la función:

!function(a, b, c) {
    /* ... */
}(jQuery, window, document);

El punto y coma

La segunda por que usa un punto y coma ; al inicio de la función y encerrada entre paréntesis.

;(function(a, b, c) {
    'use strict'
    /* ... */
}($, window, document));

Pregunta

Conozco poco de javascript y este tipo de estructuras no las había visto antes.

¿Qué significado tienen estos símbolos delante de una función y cuando debe usarse?

2
  • 1
    Lo que se hace por ahorrar un carácter... el 6 jun. 2018 a las 9:32
  • 1
    Tu pregunta es de las más interesantes que he leído en SOes. Ambos simbolos se utilizan para trabajar con archivos de terceros en los cuáles no tienes garantía de que estén completamente depurados, entonces tomas estas pequeñas medidas de seguridad que en cierta forma te evitan errores en los cierres de funciones al momento de concatenar varios archivos javascript
    – Art_Code
    el 6 jun. 2018 a las 9:37

1 respuesta 1

9

El punto y coma

;(function(a, b, c) {
'use strict'
/* ... */
}($, window, document));

Para el ; La explicación sencilla es que para poder concatenar varios archivos javascript que poseen "n" cantidad de funciones y garantizar que no ocurra un error inesperado se antepone el ; para evitar que algún archivo previo a este genere un error al no poseer el cierre correcto en la función.

En pocas palabras sirve de medida de seguridad para evitar que una función anterior no esté cerrada correctamente y pueda generar un error. Realmente lo correcto es asegurarse siempre de terminar las funciones con ; pero muchas veces toca trabajar con librerías de terceros y como no hay garantía porque no se conoce el código a profundidad se implementa esta medida de seguridad.

Para ampliar información sobre este tema puedes revisar el enlace sugerido por @Pikoh: Anteponer punto y coma a función javascript

La Exclamación

!function(a, b, c) {
    /* ... */
}(jQuery, window, document);

Por otra parte el signo de exclamación se utiliza para varias cosas:

1) Inserta un ; automáticamente al final de la función de esta forma evitas los errores al concatenar archivos javascript.

2) Ahorra un byte en la expresión debido a que normalmente se leería como:

(function(a, b, c) {
        /* ... */
    })(jQuery, window, document);

Los paréntesis que envuelven a la función la hacen un poco ilegible y confusa. Para resolver esto también se antepone el signo de exclamación, además estarías usando un caracter ! en vez de dos () de allí el hecho de que ahorres un byte por función en la que utilices este signo.

3) La parte más obvia es que se utiliza para que la expresión retorne el valor booleano true

Para ampliar información sobre este otro punto puedes visitar el enlace sugerido por el usuario @Pikoh: Anteponer exclamación a función javascript

Espero sea de ayuda. Un saludo!

7
  • 2
    Buena respuesta. Tal vez deberías añadir los enlaces que tu puse a tu respuesta y así elimino yo mis comentarios
    – Pikoh
    el 6 jun. 2018 a las 9:44
  • No me parecería justo @Pikoh porque tu te tomaste el tiempo de buscarlos. Si quieres los coloco pero te dejo el credito y tu los dejas en la pregunta tal cual como están, te parece?
    – Art_Code
    el 6 jun. 2018 a las 9:45
  • 1
    Los comentarios en Stack Overflow en español son irrelevantes, lo importante son las respuestas. Tu añádelos a la respuesta, el crédito a mi humilde persona tampoco es importante :)
    – Pikoh
    el 6 jun. 2018 a las 9:47
  • 1
    Que te parece así @Pikoh? Edité la pregunta coloqué los enlaces y te deje el credito que debes tener por la busqueda. Al César lo que es del César Pikoh xD!
    – Art_Code
    el 6 jun. 2018 a las 9:49
  • Listo. Quedó así entonces. Muchas gracias por tu sugerencia
    – Art_Code
    el 6 jun. 2018 a las 9:51

Tu Respuesta

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

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