Por que devo usar um ponto e vírgula após cada função em javascript?

282

Eu já vi desenvolvedores diferentes incluirem ponto e vírgula após as funções em javascript e alguns não. Qual é a melhor prática?

function weLikeSemiColons(arg) {
   // bunch of code
};

ou

function unnecessary(arg) {
  // bunch of code
}
macca1
fonte

Respostas:

424

Ponto e vírgula após as declarações de função não são necessárias .

A gramática de a FunctionDeclarationé descrita na especificação como esta:

function Identifier ( FormalParameterListopt ) { FunctionBody }

Não é necessário ponto e vírgula gramaticalmente, mas você pode se perguntar por quê?

O ponto e vírgula serve para separar as afirmações umas das outras, e a FunctionDeclarationnão é uma afirmação .

FunctionDeclarationssão avaliados antes que o código entre em execução, içar é uma palavra comum usada para explicar esse comportamento.

Os termos "declaração de função" e "declaração de função" geralmente são usados ​​indevidamente de forma intercambiável, porque não há nenhuma declaração de função descrita na Especificação do ECMAScript, no entanto, existem algumas implementações que incluem uma declaração de função em sua gramática, principalmente a Mozilla, mas novamente não é padrão.

No entanto, ponto-e-vírgula é sempre recomendado onde você usa FunctionExpressions, por exemplo:

var myFn = function () {
  //...
};

(function () {
  //...
})();

Se você omitir o ponto e vírgula após a primeira função no exemplo acima, obterá resultados completamente indesejados:

var myFn = function () {
  alert("Surprise!");
} // <-- No semicolon!

(function () {
  //...
})();

A primeira função será executada imediatamente, porque os parênteses que cercam a segunda serão interpretados como os Argumentsde uma chamada de função.

Palestras recomendadas:

CMS
fonte
2
Editado para esclarecer que o artigo fala sobre expressões de função
CMS
1
Não estou totalmente familiarizado com a ECMA, mas esse é o padrão que eu também uso. Bom post. A maioria dos tuts que eu vejo on-line e os exemplos de código que eu DL usam esse padrão, então eu apenas me adaptei a ele.
regex
1
Algumas das confusões aqui podem ser influenciadas pela falta de uma boa palavra em inglês para "permitido porque será ignorado". Voltamos a dizer "opcional", mas isso é enganoso, pois sugere que não incluir um ponto e vírgula após uma declaração se enquadra na mesma categoria que não incluir um ponto e vírgula após uma declaração. O último é opcional em um sentido totalmente diferente: é porque o analisador adicionará o ponto e vírgula ausente que você omitiu , enquanto nesse caso, é porque o analisador ignorará o ponto e vírgula que você incluiu . Em outras palavras: se um é opcional, o mesmo acontece com oito .
Ponto-
O link "Expressões de funções nomeadas desmistificadas" está vinculado a um URL morto agora, o arquivo da web possui uma cópia aqui: web.archive.org/web/20100426173335/http://yura.thinkweb2.com/…
Tony
O último exemplo é ótimo. A omissão de um ponto-e-vírgula nesse caso leva a erros extremamente estranhos e difíceis de depurar. Votação sincera.
Yan Yankowski
38

Eu os uso após declarações de função como variável:

var f = function() { ... };

mas não após as definições de estilo clássico:

function f() {
    ...
}
Gabe Moothart
fonte
O NetBeans, assim como outros IDEs, gostam de ver ponto-e-vírgula após uma função como variável como this.animaton_fun = function () {...};
Lance Cleveland
6
Mas - para o interlocutor - por quê ?
Lucas
ajuda durante a etapa de construção. Quando um script uglifier vê um ponto-e-vírgula, ele não precisa adicionar uma quebra de linha ao arquivo de saída; caso contrário, será gerada uma quebra de linha e o arquivo será um pouco maior.
Autoboxer
20

JS Lint é uma convenção de fato e não diz ponto-e-vírgula após o corpo da função. Consulte a seção "ponto e vírgula" .

David Hedlund
fonte
10
Testemunhei em primeira mão uma função que falhou devido à falta de ponto e vírgula. Eu discordo completamente que deixá-lo de fora é uma convenção. Embora 99,99% do tempo não seja interrompido, há certas situações em que percebi que o IE não conseguiu interceptar o JavaScript sem o ponto e vírgula.
precisa saber é o seguinte
8
Minha resposta lida apenas com definições de funções, como nos dois exemplos da pergunta. Nesses casos, um ponto-e-vírgula final não é necessário em nenhum navegador, em nenhuma situação. Eu acho que você pode estar pensando em expressões de função. Eles são um assunto completamente diferente, e não um que foi abordado na pergunta original.
David Hedlund
var myFunction = função (arg) {console.log (arg); } (function () {console.log ('função completamente não relacionada'); return 'veja o que acontece';} ());
Maciej Krawczyk
@MillsJROSS Concordo com a resposta de David e ficaria feliz se você elaborar o fracasso que encontrou. Era de fato uma expressão de função ou bug do IE?
wlnirvana 14/06
7

Apenas fique consistente! Eles não são necessários, mas eu os uso pessoalmente porque a maioria das técnicas de minificação depende do ponto-e-vírgula (por exemplo, Packer ).

Josh Stodola
fonte
5

Realmente só depende da sua preferência. Eu gosto de terminar as linhas de código com ponto-e-vírgula porque estou acostumado a Java, C ++, C #, etc, então uso os mesmos padrões para codificação em javascript.

Normalmente, não encerro declarações de função em ponto e vírgula, mas essa é apenas a minha preferência.

Os navegadores executarão de qualquer maneira, mas talvez algum dia eles apresentem alguns padrões mais rígidos que governam isso.

Exemplo de código que eu escreveria:

function handleClickEvent(e)
{
     // comment
     var something = true;  // line of code
     if (something)  // code block
     {
        doSomething();  // function call
     }
}
regex
fonte
1
Definitivamente, as linhas devem ser finalizadas com ponto e vírgula. caso contrário, um minifier pode interromper a funcionalidade inteiramente
David Hedlund
9
@ David: nesse caso, o minifier está quebrado, certo?
DisgruntledGoat
Acordado. É uma maneira natural de codificar para pessoas (como eu) provenientes de origens em C / C ++. Também torna o código mais legível.
Anshuman Manral
3

Na verdade, é mais do que uma questão de convenção ou consistência.

Estou bastante certo de que não colocar ponto-e-vírgula após cada instrução diminui a velocidade do analisador interno, porque ele precisa descobrir onde está o final da instrução. Eu gostaria de ter alguns números úteis para você confirmar isso positivamente, mas talvez você possa pesquisar no Google. :)

Além disso, quando você está compactando ou minimizando o código, a falta de ponto-e-vírgula pode levar a uma versão reduzida do seu script que não faz o que você queria, porque todo o espaço em branco desaparece.

Pedreiro
fonte
3
A questão era voltada para o ponto e vírgula, depois das funções, e não de todas as afirmações. Concordo que você deve colocar ponto-e-vírgula após cada declaração, e vi outro consenso de stackoverflow dizendo o mesmo.
precisa saber é o seguinte
1
Concordo e não colocar ponto e vírgula após as funções resultará no problema de minificação que mencionei. Boa sorte, senhor.
Mason
Upvote porque reforçando a questão minification esclareceu o meu entendimento
JackW327
1

Quando minimizei meus scripts, percebi que precisava usar ponto e vírgula para funções que começam com a marca igual. se você definir uma função como var, precisará usar ponto e vírgula.

precisa de ponto e vírgula

var x = function(){};
var x = new function(){};
this.x = function(){};

sem necessidade de ponto e vírgula

function x(){}
senera
fonte
0

SIMPLES:

É uma boa prática deixar o ponto-e-vírgula ;após o final dos colchetes funcionais. Eles são considerados uma prática recomendada há anos.

Uma vantagem de sempre usá-los é se você deseja reduzir o seu JavaScript.

Como reduzir o Javascript, ajuda a reduzir um pouco o tamanho do arquivo.

Mas, quanto à melhor prática e resposta acima, não é recomendável usá-lo após um tag de função.

Se você não usar ponto-e-vírgula, e se quiser reduzir (como muitos desenvolvedores gostam de fazer se o site deles usa muito JavaScript), poderá obter todos os tipos de erros / avisos.

Shaze
fonte
0

o ponto e vírgula depois que uma função não é necessária ou não, não causa erros no seu programa. no entanto, se você planeja minificar seu código, é recomendável usar ponto-e-vírgula após as funções. digamos, por exemplo, que você tenha um código como o abaixo

//file one
var one=1;
var two=2;
function tryOne(){}
function trytwo(){}

e

//file two
var one=1;
var two=2;
function tryOne(){};
function trytwo(){};

quando você minifica os dois, você obtém o seguinte como saída

Observe que os comentários são apenas para ilustração

//file one
var one=1;var two=2;function tryOne(){}
function trytwo(){}

e

//file two
var one=1;var two=2;function tryOne(){};function trytwo(){};
DilanTsasi
fonte