69

Já li alguns comentários na web a respeito de utilizar ou não o ; no final das linhas quando se escreve JavaScript. Alguns dizem que sim, outros dizem não ter necessidade, mas nenhum sabe explicar bem os motivos das divergências.

Exemplo:

var ola = "Olá";     // Com ponto e vírgula.
var mundo = "Mundo"  // Sem ponto e vírgula.

O interessante é que, mesmo eventualmente esquecendo o ; no meu código, ele continua rodando sem problemas e sem disparar erros. Então, o correto é usar ou não o famoso ponto e vírgula?

1
  • 2
    Se quiser aprofundar sobre o assunto, recomendo dois livros: Javascript Patterns, de Stoyan Stefanov, e Maintainable Javascript, de Nicholas Zakas. A presença ou ausência do ponto-e-virgula pode mudar o significado de uma instrução. Fora isso, é boa prática usar pois deixa o código mais legível. Commented 28/10/2014 às 17:18

8 Respostas 8

61

Utilizar sempre o ; e eis porque:

JavaScript é uma linguagem que faz declarações ao navegador. O carácter utilizado para separar essas declarações é ; e o mesmo deve ser sempre utilizado.

O código pode funcionar sem o ponto e vírgula após uma declaração, mas para isso é preciso que exista um fim-de-linha ou uma sintaxe correcta.

Obrigado ao @Gabriel Gartz por alertar para o facto de que qualquer operador lógico, matemático ou delimitação de escopo permite gerar de igual forma a execução do código.

O maior problema advém do facto de que todos nós queremos optimizar os ficheiros descarregados para o navegador, como é o caso dos ficheiros .js e .css que para os quais aplicamos compressão (remover quebras de linha, comentários, espaços e tabulações). Nestes casos, se não existir a separação correcta de declarações ao navegador, as mesmas vão ficar interligadas e vão surgir erros de sintaxe.

Vamos ver com exemplos:

Realizar um alerta sem o separador de declarações ;:

alert("olá")

Corre tudo como esperado, recebemos um alerta.

Realizar dois alertas sem o separador de declarações, mas cada alerta na sua linha separados assim pelo "fim-de-linha":

(r, n ou rn consoante o sistema operativo onde foi criado o ficheiro)

alert("olá")
alert("olá novamente")

Corre tudo como esperado, recebemos dois alertas.

Realizar dois alertas separados com o separador de declarações ;:

alert("olá"); alert("olá novamente")

Corre tudo como esperado, recebemos dois alertas.

Realizar dois alertas sem a separação declarações ; e com o código comprimido:

alert("olá")alert("olá novamente")

Não acontece nada e obtemos um erro de script na página:

SyntaxError: missing ; before statement
 
alert("olá")alert("olá novamente")

Com base na chamada de atenção feita pelo @Gabriel Gartz, pode-se verificar que se a sintaxe estiver correcta, o código é executado sem erros, mesmo se as declarações se encontrarem separadas por outra coisa que não o ;:

alert('foo')&alert('bar')|alert('zaz')

Vai gerar três alertas conforme esperado.


Inserção automática do ponto e vírgula (;)

Existem algumas declarações que recebem automaticamente uma inserção de ;:

Declaração Exemplo da Declaração
empty ;
variable var a = 1;
expression greeting = "Hello " + name;
do-while do qualquerCoisa while (condição);
continue continue;
break break;
return return;
throw throw "Error2";

São declarações que tem obrigatoriamente que ser terminadas com o separador de declaração ;, razão pela qual recebem a inserção automática do mesmo se ele não for encontrado.

Quais as regras para que isto aconteça:

A leitura do código é realizada da esquerda para a direta. Se for encontrado um símbolo ofensivo que não é permitido em qualquer produção da gramática, ocorre a inserção automática de um ponto e vírgula se uma das seguintes condições for verdadeira:

  • O símbolo ofensivo é separado do símbolo anterior em pelo menos um "fim-de-linha";
  • O símbolo ofensivo é }.

Notas:

A inserção automática de separadores de declarações é um tópico extenso sujeito a muitas regras, mas explica porque é que conseguimos que o código funcione sem utilizar o separador de declarações quando temos um "fim-de-linha" ou uma sintaxe válida.

No caso de ficheiros já comprimidos para suprimir ao máximo os caracteres não necessários, torna-se quase impossível a inserção automática do separador de declarações pois uma das condições em cima apresentadas deixa de estar presente.

Documentação: 7.9 Automatic Semicolon Insertion (Inglês)

2
  • Seria bom adicionar uma nota dizendo que o ponto e vírgula também se torna uma declaração quando ele não faz nada, guia de exemplo.
    – user37626
    Commented 30/12/2016 às 10:09
  • Declarações etiquetadas também recebem ponto-e-vírgula (;), por exemplo: etiqueta: 6 ;.
    – user37626
    Commented 30/12/2016 às 10:13
13
+50

Ponto e virgula em javascript é opcional como separador de instruções, no entanto deve-se tomar muito cuidado.

Um caso como:

a = b + c
(d + e).print()

Será avaliado como: a = b + c(d + e).print(); (como visto aqui)

No caso de um for, no entanto, o uso de ponto e vírgula é obrigatório dentro de sua sintaxe:

for (var i=0; i < 10; i++) 

Se não houver um corpo de instruções a ser executado um ponto e vírgula deve ser adicionado, caso contrário um bloco como:

 for (var i = 0; i < 5; alert(i), i++)
 document.write("oi")

Será interpretado como:

 for (var i = 0; i < 5; alert(i), i++)
 {
  document.write("oi")
 }

Logo, para evitar isso o ponto e vírgula deve ser adicionado e o código fica assim:

for (var i = 0; i < 5; alert(i), i++);
document.write("oi")

No caso de mais de uma instrução na mesma linha é obrigatório o uso de ponto e vírgula.

var i; i = 42
11

Recomento a leitura desse artigo do Caio Gondim, pois a não utilização pode causar várias situações e é bom saber entender cada uma delas.

http://loopinfinito.com.br/2013/10/22/mamilos-pontos-e-virgulas-em-js/

Em resumo [...] o ; serve como um delimitador de statements. Mas devido ao ASI, o \n também irá funcionar como delimitador de statement, exceto nos seguintes casos:

1 - O statement possui um parêntese, array literal ou objeto literal não fechado ou acaba de qualquer outra forma a qual não seja um modo válido de finalizar um statement.
2 - A linha inteira é um -- ou ++ (neste caso, irá incrementar/decrementar o próximo token)
3 - É um for(), while(), do, if() ou else e não existe {
4 - A próxima linha começa com [, (, +, -, *, /, ,, ., ou qualquer outro operador binário que só pode ser encontrado entre dois tokens em uma única expressão. [...]

Ou seja, nas 4 situações acima citadas o ASI não será disparado, nas outras situações o ASI irá interpretar normalmente o \n como delimitador.

0
8

Todos os bons programadores que eu conheço usam. Porque é ambíguo não usar em algumas situações. E se precisa usar em algumas fica estranho não usar nas outras. E você começa criar um dialeto da linguagem entre os que usam e os que não usam.

Não há ganho em não usar. Em geral é adotado por quem acha que bater o dedo em uma tecla dá um ganho, mas deixa a dúvida se realmente encerrou o statement ali, porque existem casos que ele pode continuar em outra linha. Dificulta a leitura de todos em todos os casos para economizar esforço de uma tecla digitada.

Há quem diga que sem ele economiza um byte para transmitir. Acho um ganho pequeno demais para compensar o problema. Em geral as pessoas gastam muito mais em outras coisas, e se for usar esse argumento todo código deveria ser escrito de forma muito ilegível para economizar bytes. A economia deveria vir mais de uma compactação (arquivo estático sempre deveria ser compactado) e minificação (bons minificadores deveriam tirar a vírgula onde dá e deixar onde precisa ou pode precisar, mas muitos não o fazem de tão complicado é parsear código JS por permitir esse tipo de coisa, alguns minificam menos justamente pela falta de ponto de vírgula, então é um motivo muito errado). E hoje JS é muito usado no backend que não faz sentido ter esse tipo de preocupação. Novamente, vai criar dois dialetos?

Já vi gente dizendo que é mais fácil inserir algo no meio, principalmente usando method chaining, mas isso só mostra que o motivo é preguiça, um motivo errado.

JavaScript foi criada para ter uma sintaxe parecida com C, alguns até acham isso ruim, mas ele foi pensada assim, então o ; é importante, mesmo que o compilador deixe, em alguns casos não usar. Se está acostumado continue usando.

Vira e mexe alguém aparece com um problema porque não tinha o ; e o comportamento fica estranho (alguns casos dá erro, outros só faz o que não espera).

Existem linguagens que conseguiram fazer o uso ser opcional de forma não ambígua, aí tudo bem, mas não é o caso de JS.

Na verdade elas colocam o ; para você, JS também faz isso, mas ela não tem regras tão claras, e difere até de implementação para implementação. Então não faça isso com você, mesmo que funcione na maioria das vezes. Então não vou colocar as regras como alguns fazem porque nem quem cria um compilador da linguagem entende as regras, sempre postam sobre regras simples e... erradas.

Meme Nazaré Confuza

Pelo mesmo motivo não gosto de:

if (x == 1)
    console.log("ok");

Ou faz:

if (x == 1) console.log("ok");

porque aí é uma linha, não confundo com um bloco, ou faz:

if (x == 1) {
    console.log("ok");
}

Isso pode causar problemas quando coloca mais de uma linha na condição sem clareza do que é o bloco.

Os problemas que terá não são tão relevantes, mas eles existem. Eu acho que o maior motivo para adotar sempre o ; é a consistência e legibilidade, mas vou citar exemplos de problemas.

Um exemplo de pergunta que pareceu aqui.

Exemplo no SOen.

Exemplo:

const hey = 'ola'
const you = 'ola'
const heyYou = hey + ' ' + you
['o', 'l', 'a'].forEach((letter) => console.log(letter))

Agora escrevendo certo:

const hey = 'ola';
const you = 'ola';
const heyYou = hey + ' ' + you;
['o', 'l', 'a'].forEach((letter) => console.log(letter));

Outro:

const x = 1
const y = 1
const z = x + y
(x + y).toString()

Não vou postar o certo em todos, arrume você colocando os ;.

var x = 1 + 1
-1 + 1 === 0 ? console.log("sim") : console.log("não")

Coloquei no GitHub para referência futura.

Não gosto de alguns exemplos das outras respostas (não de todas), por exemplo não gosto da resposta aceita porque ele é um exemplo que é claramente obrigatório, o problema não é omitir o ; na mesma linha, mas sim quando muda de linha. Ainda que na época eu tinha positivado junto com outras duas. A resposta é boa, bem caprichada, e correta, mas podia ter um exemplo melhor.

Complemento.

7

A resposta do Zuul é a correta. Vou apenas deixar um caso específico aqui pois ninguém até agora comentou sobre:

Isto:

function foo () {
    return
    {
        name: "bar"
    }
}

É equivalente a isto:

function foo () {
    return;
    {
        name: "bar"
    };
}

Vamos lá, execute ambas as formas no console do seu navegador ;)

E se você não prestar atenção a esse fato, pode cometer erros com mais frequência.

Usar ponto-e-vírgula não é obrigatório, mas é boa prática pois deixa mais claro onde uma expressão acaba e outra começa.

5

O ponto e virgula no Javascript é utilizado para forçar a interpretação da sintax em uma linha, delimitando esta execução ao trecho que precede o ponto e virgula.

Você não é obrigado a usar o ponto e virgula para delimitar uma execução, existem outras maneiras, como operadores lógicos ou definições de escopo, porém é uma boa prática o uso de ponto e virgula.

A quebra de linha também delimita a sintaxe que será executada.

Exemplo:

alert('foo'); alert('bar');

Vai executar primeiro a função que cria um alerta com foo e depois com alerta que exibe bar

O mesmo resultado pode ser obtido com o operador & ou |

alert('foo') & alert('bar') | alert('zaz')

Ou mesmo apenas quebrando a linha.

Porém se você escrever tudo junto, sem nenhum operador, o JSC não vai saber como delimitar a execução da sua sintaxe e vai expor um erro com identificador não encontrado.

Um outro meio curioso de delimitar é criar um escopo utilizando as chaves, por exemplo:

{alert('foo')}alert('bar')

Operadores matemáticos:

alert('foo')+alert('bar')-alert('zaz')

Claro que todas essas maneiras alternativas não passam de mera curiosidade do JSC, o recomendável é que você utilize sempre o ponto e virgula para delimitar a interpretação das suas sintaxes.

0
4

Primeiramente eu gostaria de apontar que o ponto e vírgula, em algumas ocasiões, separa statements (quando me refiro à 'statements' me refiro às declarações, declarações de expressão e outras instruções que podem aparecer em corpos comuns), mas em outras ocasiões, se torna um statement que não faz nada. Por exemplo, a etiqueta do ECMAScript3 requere um statement na frente (e o nome apropriado de declaração de etiqueta é LabelledStatement (Ou LabeledStatement):

/* Funciona. */
StatementEtiquetado: ;

/* Aqui, esse ponto e vírgula apenas delimita
 * os LabelledStatements abaixo. A declaração de expressão 2 se torna
 * o LabelledStatement, enquanto o ponto e vírgula é desnecessário.  */
StatementEtiquetado: 2;

/* Não funciona porque não tem statement, :/ . */
StatementEtiquetado:

O semicolon (ponto e vírgula) pode aparecer em qualquer espaço inusado de um corpo de statements, até mesmo no topo (ver no Esprima):

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
( \u{41} => void 0)``;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

for (;;)
/* Esse semicolon é o corpo desse loop, embora. */
    ;

Estranho é fazer isso em uma linguagem como ActionScript 3, e ainda funcionar!

Em ambos ECMAScript e Lua eu costumo usar semicolon porque ele é imperativo. Sem usar semicolon, às vezes é também possível causar problemas com chamadas:

{
    let expressão = _ => void 0;

    expressão()
    (_ => void 0) ``
}

Ou também é possível usar vírgulas ao invés de ponto e vírgula, que geram uma sequência de expressões:

chamada(),
(_ => void 0)()

Mas, pelo visto, sem o uso de semicolon, só pode mesmo afetar chamadas que usam expressões em torno de parênteses. Lembrando que a template `` pode fazer chamadas, também.

-3

Independente da parte técnica, a questão didática e colaborativa já é um motivo suficiente e que esgota sem necessidades de discussões maiores a importância da padronização do uso. Profissionais experientes não terão grandes problemas na leitura de códigos que faltem ou não o ponto e vírgula, contudo mesmos eles ganham frações de tempo que somadas às dezenas de outras práticas farão uma diferença grande ao fim de um dia de trabalho

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .