O JavaScript é uma linguagem muito interessante. Ao mesmo tempo em que ela pode ser incrível, também pode ser confusa. Há muitos aspectos que contribuem para este sentimento, como o funcionamento do contexto de execução, a herança por prototipagem e as funções de primeira classe.

Mas hoje quero discutir com vocês um aspecto muito mais simples, mas que pode causar tanta – ou mais – confusão quanto os tópicos citados anteriormente. Hoje quero falar um pouco sobre quebras de linha e o uso de ponto e vírgula no JavaScript.

Se você já tem alguma experiência com a linguagem, já deve saber que o uso do ponto e vírgula no final das declarações é opcional, ao contrário de linguagens como o Java, por exemplo, onde o seu uso é obrigatório. Seu uso é facultativo porque a engine do JavaScript interpreta o nosso código e assume onde o ponto e vírgula deve ser colocado.

Por exemplo, imagine este método:

function imprimeMensagem() {
   return "mensagem"
}

Note que, no corpo da função eu não inseri o ponto e vírgula. Quando este código é interpretado, a engine do JavaScript entende a palavra “return”, compreende que a string “mensagem” deve ser devolvida e logo após ele vê o caractere invisível que faz a quebra de linha. Neste momento, ele entende que a sua declaração terminou e que você deseja pular de linha. Logo, ele vai lá e coloca a pontuação pra você.

function imprimeMensagem() {
   return "mensagem";
}

Até aí sem problemas, certo? Agora vamos imaginar outra situação. Vamos supor que a mensagem que deve ser retornada nesta função é muito grande. Por ser muito grande, nós quebramos a linha entre o return e a string para tornar a leitura do código melhor. Algo assim:

function imprimeMensagem() {
   return 
        "Essa mensagem é tão grande, mas tão grande, que eu até quebrei a linha!";
}

Muito bem. Agora eu te pergunto: O que acontece na hora que esse código é executado? Se você achava que o código iria funcionar sem problemas, tenho péssimas notícias. Veja só:

Undefined? Parece estranho, não é mesmo? Para entender o porquê disso acontecer, temos que voltar ao nosso primeiro exemplo. Lembra que eu disse que a engine do JavaScript assume as posições do ponto e vírgula quando não as definimos?

Pois bem. Quando o interpretador enxerga o caractere invisível de quebra de linha depois do return, ele assume que a declaração naquela linha já foi feita e insere a pontuação.

Na hora que o código é executado, ele nunca chega na nossa string, pois o return encerra a sua execução. Repare que o próprio navegador nos diz isso com a mensagem “unreachable code after return statement”.

Temos de ter muito cuidado ao delegar o trabalho de interpretar o código para a máquina. Para nós humanos, a interpretação é óbvia, mas não para a máquina. Ao tentar facilitar a nossa vida, a engine do JavaScript pode nos causar problemas que, logo de cara, parecem não fazer sentido nenhum.

Este é um bom motivo sempre ter cuidado com as quebras de linhas e o uso do ponto e vírgula no seu código JavaScript.