자바스크립트에서 세미콜론(;)을 꼭 사용해야 하는 이유가 있다?

안녕하세요. 오늘은 자바스크립트에서의 세미콜론 사용 여부에 대한 재밌는 글을 발견하여 포스팅합니다.

Shruti Kapoor의 why-are-expliit-semicolons-important-in-javascript라는 글을 읽어보면, 자바스크립트에서 세미콜론을 명시하는 것에 대한 중요성에 대해 다루고 있습니다.

 

www.freecodecamp.org/news/codebyte-why-are-explicit-semicolons-important-in-javascript-49550bea0b82/

Why explicit semicolons are important in JavaScript

 

이번 포스팅은 이 글에 대한 발번역 + 저의 개인적인 의견이 들어간 내용이 담겨있습니다.

 

 

---

 

 

😕 이게 무슨 소리에요! 자바스크립트에서는 세미콜론을 꼭 표기하지 않아도 된다구요!(배신감)

 

결론부터 말씀드리자면, 맞습니다.

 

자바스크립트에서는 문장의 끝에 세미콜론을 붙여도, 붙이지 않아도 상관 없습니다. 하지만 하나의 프로젝트에서는 사용하든 말든 한쪽으로 통일할 것을 권고하고 있죠. 세미콜론을 사용하지 않는게 낫다,고 생각하는 개발자분들도 많습니다.  하지만 이 글의 핵심적인 내용은 무조건 세미콜론을 사용해야 한다가 아니라, 세미콜론을 사용하지 않았을 때  원래 예상한 코드 흐름대로 이루어지지 않는 경우가 있다에 가깝습니다. 

 

이게 무슨 소리인가 싶다면, 이 글을 계속 읽어 주세요!

 

---

 

😐 자동 세미콜론(;) 삽입(ASI)이 버그로 이어질 수 있는 문제

세미콜론은 코드에서 문장의 끝을 의미합니다. 자바스크립트에서 세미콜론을 표기하지 않아도 되는 이유는 자바스크립트 파서(parser)가 줄 단위로 파싱을 하다가 세미콜론이 빠져 에러가 나면, 스스로 판단하여 세미콜론을 삽입해주기 때문입니다. 그렇기 때문에 세미콜론을 선택적으로 사용하는 사람들은 자신도 모르게 ASI(Automatic Semicolon Insertion)를 전적으로 믿을 수 밖에 없게 됩니다.

 

자바스크립트 명세에는 ASI는 에러를 정정하는 루틴이라고 씌어 있습니다. 파서가 에러를 발견하면, 잘못된 코드로 인식하여 ASI가 작동되어 정정하는 것이죠. 그렇기 때문에 특정 상황에서 ASI가 잘못 이해하게끔 코드가 작성되면, 버그로 이어질 수 있습니다! Shruti Kapoor는 이 가능성에 대하여 얘기하고 있습니다.

 

다음 코드를 볼까요?

 

const mul = (a) => {
	if (a) return
    	a += 1;
}

 

많은 사람들이 이런 식으로 코드를 작성하진 않겠지만, 함수의 목적은 a라는 값을 받아 1을 더하여 내보내주는 것을 목표로 합니다.

 

우리가 원하는 결과는 다음과 같습니다.

const mul = (a) => {
	if (a) return(a+1);
}

console.log(mul(2)); // output: 3

 

 

하지만 이런 경우 ASI는 이 코드를 다음과 같이 해석해 버립니다.

 

const mul = (a) => {
	if (a) return;
    	a+1;
}

console.log(mul(2)); // undefined

 

코드 스타일이 일반적(?)이진 않았지만, ASI가 오해할 여지가 충분하였고 실제로 ASI 잘못 해석하여 코드가 원하는 흐름대로 가지 않았습니다. 결과적으로 에러가 발생하였죠. 

 

Shruti Kapoor는 이러한 ASI의 취약한 부분에 대해 지적하며, 다음 코드를 예로 들었습니다.

 

const a = 1
const b = 2
(a+b).toString()

 

세미콜론을 사용하지 않은 코드로, 대부분의 개발자들은 이 코드를 보면 다음과 같이 구현될 것이라고 예상할 것입니다.

 

const a = 1;
const b = 2;
(a+b).toString(); // (1+2).toString()

 

하지만 이 코드를 ASI는 다음과 같이 변환합니다.

 

const a = 1;
const b = 2(a+b).toString(); // 'b' is undefined error

 

어째서 이 Shruti Kapoor가 세미콜론을 모든 경우에서 명시하는 게 좋다, 라고 말했는지 감이 오시나요?

ASI가 세미콜론 에러를 감지하는 패턴에 맞지 않게 코딩을 하게되면, 버그가 발생할 여지를 남길 수 있다는 가능성에 대해 다룬 글이었습니다.

---

🤔 결론

 

 

사실 저는 c언어로 코딩을 시작했기 때문인지 자바스크립트를 사용할 때도 세미콜론을 무조건 붙입니다. 심지어는 붙일 필요가 없는 파이썬에서도 종종 붙이기도 하죠. 하지만 세미콜론을 무조건 붙여야 한다! 라는 말에 크게 공감되지는 않습니다 🤔 한 프로젝트에서 붙일 지 안 붙일 지만 통일하면 된다고 생각합니다. Shruti Kapoor의 글은 버그가 일어날 일말의 가능성에 대하여 다루고 있지만 예로 든 코드에서 나온 것 처럼 개발자가 '('같은 문자를 맨 앞줄로 가져가는 경우가 흔치 않기 때문이죠.

 

 

하지만 한 프로젝트에서 세미콜론을 사용하고, 안 하고는 통일하는 편이 좋은 것 같습니다. ESLinter나 Prettier를 이용하면 실수로 세미콜론을 안붙였더라도 알아서 붙이게 처리를 해 줄 수도 있으니까요. 아무튼 세미콜론을 꼭 사용해야되고 안해도되고에 대해 깊게 생각해 본 적이 없었기에 이런 가능성을 다룬 글을 보니 재미있었네요 🙂

 

 

 

 

📖 출처

- 자바스크립트, 세미콜론을 써야 하나 말아야 하나

bakyeono.net/post/2018-01-19-javascript-use-semicolon-or-not.html

- why-are-explicit-semicolons-important-in-javascript

www.freecodecamp.org/news/codebyte-why-are-explicit-semicolons-important-in-javascript-49550bea0b82/