O que faz o ponto-e-vírgula principal nas bibliotecas JavaScript?

Em várias bibliotecas JavaScript, vi essa notação no início:

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

Embora eu esteja perfeitamente confortável com a sintaxe da "função imediatamente executada"

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

Fiquei me perguntando para que serve o ponto e vírgula principal. Tudo o que eu pude pensar é que é um seguro. Ou seja, se a biblioteca estiver incorporada em outro código de buggy, ela servirá como um tipo de "lombada" a "última declaração termina aqui no mais recente".

Tem alguma outra funcionalidade?

Ele permite concatenar com segurança vários arquivos JavaScript em um, para atendê-lo mais rapidamente como uma solicitação HTTP.

A melhor resposta foi dada na pergunta, então vou escrever isso aqui para maior clareza:

O líder ;na frente das expressões de função chamadas imediatamente existe para evitar erros ao anexar o arquivo durante a concatenação a um arquivo que contém uma expressão que não foi finalizada corretamente com a ;.

A melhor prática é finalizar suas expressões com ponto e vírgula, mas também use o ponto e vírgula principal como uma salvaguarda.

Em geral, se uma declaração começa com (, [, /, + ou -, existe a chance de que possa ser interpretada como uma continuação da declaração antes. As declarações que começam com /, + e - são bastante raras na prática , mas instruções começando com (e [não são incomuns, pelo menos em alguns estilos de programação JavaScript. Alguns programadores gostam de colocar um ponto-e-vírgula defensivo no início de qualquer instrução, para que ela continue funcionando corretamente, mesmo que a instrução antes de ser modificado e um ponto-e-vírgula de encerramento anterior removido:

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

Fonte:

JavaScript: The Definitive Guide, 6ª edição

Isso é conhecido como ponto e vírgula à esquerda.

Seu principal objetivo é proteger-se do código anterior que foi fechado incorretamente, o que pode causar problemas. Um ponto e vírgula impedirá que isso aconteça. Se o código anterior foi fechado incorretamente, nosso ponto-e-vírgula corrigirá isso. Se foi fechado corretamente, nosso ponto e vírgula será inofensivo e não haverá efeitos colaterais.

Uma resposta de uma linha é concatenar com segurança vários arquivos JavaScript. Usar um ponto e vírgula não levanta um problema.

Suponha que você tenha várias funções:

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

Na concatenação, pode parecer com:

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

Mas se você adicionar um ponto-e-vírgula antes da função, será semelhante a:

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

Portanto, adicionando a ;, cuida se alguma expressão não é finalizada corretamente.

Exemplo 2

Suponha que você tenha um arquivo JavaScript com uma variável:

var someVar = "myVar"

Outro arquivo JavaScript com alguma função:

(function(){})()

Agora, na concatenação, parecerá

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

Com um ponto e vírgula, será semelhante a:

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

É bom quando você reduz o código JavaScript. Evita erros inesperados de sintaxe.