Dubtes amb Javascript

En el context de JavaScript modern i projectes npm, utilitzar (function(){ ... })(); (IIFE) o esperar al DOMContentLoaded depèn de quan vols executar el teu codi i de com carregues els scripts.

Diferències clau

IIFE: El codi s’executa immediatament quan el navegador llegeix el fitxer. Si el script es carrega al final del <body>, normalment el DOM ja està carregat, així que funciona bé.

DOMContentLoaded: Garanteix que el DOM està completament carregat abans d’executar el codi, independentment d’on carreguis el script.

Recomanació

Si el teu script es carrega al final del body (pràctica habitual amb npm/bundlers), l’IIFE és suficient i lleugerament més eficient perquè evita un event listener addicional. Si el script es carrega al head o no controles on es carrega, millor utilitzar DOMContentLoaded per evitar errors si el DOM encara no està disponible.

Exemple amb IIFE:

(function () {
    const backToTopElement = document.querySelector('.js-back-to-top');
    if (backToTopElement) {
        new Back2Top(backToTopElement);
    }
})();

Exemple amb DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
    const backToTopElement = document.querySelector('.js-back-to-top');
    if (backToTopElement) {
        new Back2Top(backToTopElement);
    }
});

Resum

  1. Eficaç: IIFE si el script va al final del body.
  2. Més segur: DOMContentLoaded si no controles l’ordre de càrrega.