À quoi sert le point-virgule principal des bibliothèques JavaScript?

Dans plusieurs bibliothèques JavaScript, j'ai vu cette notation au tout début:

/**
 * Library XYZ
 */
;(function () {
  // ... and so on

Bien que je sois parfaitement à l'aise avec la syntaxe "fonction immédiatement exécutée"

(function(){...})()

Je me demandais à quoi sert le point-virgule. Tout ce que je pourrais trouver, c'est que c'est une assurance. C'est-à-dire que si la bibliothèque est incorporée dans un autre code bogué, elle sert de type de ralentisseur "la dernière instruction se termine ici au plus tard".

At-il une autre fonctionnalité?

Il vous permet de concaténer en toute sécurité plusieurs fichiers JavaScript en un seul, pour le servir plus rapidement en une seule requête HTTP.

La meilleure réponse a en fait été donnée dans la question, je vais donc l'écrire ici pour plus de clarté:

Le début ;devant les expressions de fonction immédiatement appelées est là pour éviter les erreurs lors de l'ajout du fichier pendant la concaténation à un fichier contenant une expression qui ne se termine pas correctement par un ;.

La meilleure pratique consiste à terminer vos expressions par des points-virgules, mais également à utiliser le point-virgule de début comme protection.

En général, si une instruction commence par (, [, /, + ou -, il est possible qu'elle soit interprétée comme une continuation de l'instruction précédente. Les instructions commençant par /, + et - sont assez rares dans la pratique , mais les instructions commençant par (et [ne sont pas rares du tout, du moins dans certains styles de programmation JavaScript. Certains programmeurs aiment mettre un point-virgule défensif au début d'une telle instruction afin qu'elle continue à fonctionner correctement même si l'instruction avant qu'il ne soit modifié et un point-virgule de fin précédemment supprimé:

var x = 0 // Semicolon omitted here
;[x,x+1,x+2].forEach(console.log) // Defensive ; keeps this statement separate

La source:

JavaScript: The Definitive Guide, 6e édition

C'est ce qu'on appelle un point-virgule principal.

Son objectif principal est de se protéger du code précédent qui n'a pas été correctement fermé, ce qui peut causer des problèmes. Un point-virgule empêchera que cela se produise. Si le code précédent n'a pas été correctement fermé, notre point-virgule corrigera cela. S'il a été correctement fermé, notre point-virgule sera inoffensif et il n'y aura pas d'effets secondaires.

Une réponse en une ligne consiste à concaténer en toute sécurité plusieurs fichiers JavaScript. L'utilisation d'un point-virgule ne pose pas de problème.

Supposons que vous ayez plusieurs fonctions:

IIFE 1

(function(){
  // The rest of the code
})(); // Note it is an IIFE

IIFE 2

(function(){
   // The rest of the code
})(); // Note it is also an IIFE

Lors de la concaténation, cela peut ressembler à:

(function(){})()(function(){})()

Mais si vous ajoutez un point-virgule avant la fonction, cela ressemblera à:

;(function(){})();(function(){})()

Donc en ajoutant un ; , il prend soin si une expression n'est pas correctement terminée.

Exemple 2

Supposons que vous ayez un fichier JavaScript avec une variable:

var someVar = "myVar"

Un autre fichier JavaScript avec une fonction:

(function(){})()

Maintenant, lors de la concaténation, cela ressemblera à

var someVar = "myVar"(function(){})() // It may give rise to an error

Avec un point-virgule, cela ressemblera à:

var someVar = "myVar";(function(){})()

C'est bien lorsque vous réduisez le code JavaScript. Il évite les erreurs de syntaxe inattendues.