Por que usar ponto e vírgula no Javascript?

Usar ou não?

Se você programa em linguagens assim como eu em Java, C#, Golang, etc. Provavelmente você prefere usar ponto e vírgula, mas se você usa linguagens como Ruby, Python, Swift, Kotlin etc. Você não se importa muito com isso. Mas é claro que por enquanto ainda não tem um certo ou errado, você pode optar por usar ou não. Vamos entender um pouco mais sobre.

É opcional ?

Quando ponto e vírgula não são inseridos, o JavaScript corrige inserindo para você, isso se chama ASI (Automatic Semicolon Insertion), ou traduzindo inserção automática de ponto e vírgula, ela segue algumas regras, é como um corretor de syntax. Já sabemos como os corretores funcionam. 😂 haha

Abaixo temos um exemplo deste corretor, e um erro simples e esperado da ASI Qual sera o retorno desta chamada?


function descrever(nome, idade, profissao) {
  return 
  `Ola sou ${nome}, tenho ${idade} anos de idade, trabalho como ${profissao}`
}

descrever('Douglas', 20, 'Frontend')

Deveria ser "Ola sou Dougls, tenho 20 anos de idade, trabalho como Frontend" mas o retorno será undefined. Isso ocorre devido a correção realizada. Ele adiciona o ponto e vírgula ao final da linha 2, á frente do return, ficando assim após a correção:

function descrever(nome, idade, profissao) {
  return; 
  `Ola sou ${nome}, tenho ${idade} anos de idade, trabalho como ${profissao}`;
}

descrever('Douglas', 20, 'Frontend');

Veja mais exemplos:

console.log('teste')
console.log('testando')

Em compressão o código fica assim:

console.log('teste')console.log('testando')

Isso vai gerar o erro:

Uncaught SyntaxError: Unexpected identifier

Então com as declarações com o ; – o erro seria prevenido, pois a separação de instruções seria clara para o JS

Problemas de expressão

let a = 0
let b = 5
let c = 5
let d = 1
let e = 2

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

console.log(a)

Isso vai gerar um erro:

Uncaught TypeError: c is not a function

Pois o JS vai interpretar a expressão da seguinte maneira:

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

Veja então que a falta do ; pode representar alguns erros indesejados, então é melhor colocá-lo

Claro que são situações mais específicas, pois existe um auto insert de ;

Porém este auto insert falha em algumas instruções, como a declarada acima

E outro ponto importante é que duas declarações na mesma linha, vão necessitar de um ; entre elas

Como é o caso expressado na compressão de códigos.

Regras

Em alguns casos é obrigatório conter ponto e vírgula, e por este motivo quando não é encontrado, é adicionado automáticamente, confira as regras:

Onde usar

Casos onde é obrigatório o uso de um delimitador:

Declaração de variáveis var a = 666;

Expressões var a = "number: " + 666;

do-while do suaFuncao while(suaCondicao);

continue continue;

break break;

return return;

throw throw "Seu erro mimi";

O ponto e vírgula ;, é um delimitador e serve para todo caso, porem não é o único delimitador, a quebra de linha \n e \r\n tambem é, no JavaScript, exceto quando a proxima linha iniciar com algum destes caracteres [, (, {, +, -, *, /, ., ,, ou algum operador que indique uma unica expressão.

Onde NÃO usar

Não é necessário usar nos seguintes casos:

Após um if ou else com chaves if (...) {...} else {...}

Após for com chaves for (...) {...}

Após while com chaves while (...) {...}

Após funções function (arg) { }

Recomendação

A própria TC39 recomenda que usem ponto e vírgula nos seus códigos, em vez de confiar no ASI. Alem de grandes empresas como Google usa-lo no seu padrão de código (Google javascript guides).

Erros pela ausência de ponto e vírgula são muitos discretos e quase sempre é rastreado incorrectamente.

Conclusão

Neste artigo vimos as diferenças de utilizar ou não ponto e vírgula no fim das linhas no JavaScript

É opcional na linguagem, mas por exemplos apresentados neste artigo vemos que alguns problemas podem surgir, então para garantir 100% dos casos utilize o ponto e vírgula não hesitar não vai doer rsrsrs.

Lembre-se que a linguagem tem um auto inserter, por isso o ; se torna opcional ao construir um programa