Music for reading(spotify)

Javascript 자바스크립트에서의 세미콜론은 사용자들이 잘 모르고 생략하거나, 어째서 이게 생략이 가능한지 등에 대해 잘 모르고 쓰는 경우가 있다. 나도 어째서 이게 생략이 가능한 지 잘 몰랐고, 늘 붙여 쓰다가 이번에 기회가 되어 정리한다.

자바스크립트에서의 세미콜론

자바스크립트에서의 세미콜론은 선택적으로 사용이 가능하다. 예를 들어, 이런 코드가 있을 경우

a = 3;
b = 4;

다음과 같이 선택적으로 세미콜론을 생략할 수 있다.

a = 3
b = 4

하지만 한 줄에 사용하려면 다음과 같이 사용하여야 한다.

a = 3; b = 4;

이게 가능한 이유는, 자바스크립트는 그 문장의 끝에 세미콜론이 없이 줄바꿈이 오는 경우, 세미콜론으로 해석하기 때문이다. 하지만 모든 경우에 해당하는 것은 아니고, 일반적으로 세미콜론 없이 코드를 해석할 수 없는 경우에 한해서만 줄바꿈을 세미콜론으로 해석한다. 다음과 같은 코드를 보자.

var a
a
=
3
console.log(a)

첫 번째 줄과 두 번째 줄을 보면 var a a가 된다. 구문 분석기는 var a a를 해석할 수 없으므로 규칙에 따라 var a뒤에 세미콜론을 붙이게 된다.

두 번째 줄은 단일 구문인 a;로써 해석 가능하지만, 좀 더 긴 구문인 a = 3으로 해석이 가능하므로 a = 3;이 된다.

따라서 해석기는 다음과 같이 해석한다.

var a; a = 3; console.log(a);

여기까지만 보면 문제가 없어 보인다. 하지만 다음과 같은 경우에는 세미콜론을 생략할 경우 문제가 생긴다.

var y = x + f
(a + b).toString()

다음 코드를 보면 어떻게 해석이 되는가? 일반적인 개발자들이라면 이 코드를 쓸 때 변수 y에 x와 f를 더해 대입하는 코드를 의도하고 작성했을 것이다. 하지만 실제로는 다음과 같이 해석된다.

var y = x + f(a + b).toString();

(a + b)라는 코드가 f라는 이름의 함수를 호출한 것으로 인식되어, 변수 f가 아닌 함수 f로 호출하는 모습이다. 만일 이런 코드를 사용하고 싶었다면 f뒤에 세미콜론을 붙였어야 할 것이다.

좀더 자세한 규칙

일반적인 규칙

일반적인 규칙은 다음과 같다:

첫 번째 경우는 위에서 설명했으므로 넘어간다. ([로 시작하는 문법은 자바스크립트 프로그래밍에서는 자주 발생하는 일이기 때문에, 몇몇 프로그래머는 예상치 못한 동작을 막기 위해 방어적 세미콜론을 달아 둔다.

다음 예제를 보자.

var x = 0
;[x, x+1, x+2].forEach(console.log)

다음과 같이 ([로 시작하는 구문일 경우, 예상치 못한 동작을 막기 위해 제일 앞에 ;를 붙여 주는 방법이다. 이는 명시적 세미콜론을 사용하지 않는 프로그래머들이 많이 사용한다.

예외 규칙

예외 규칙은 총 두 가지가 있다.

return, break, continue문을 사용하고 바로 다음에 줄바꿈이 오는 경우(줄바꿈 이전까지 어떠한 토큰도 사용하지 않을 경우)에는 자바스크립트는 줄바꿈을 세미콜론으로 해석한다.

다음 예제를 보자.

return
true;

일반적인 개발자라면 return true;를 의도했겠지만, 실제로 자바스크립트 인터프리터는 return; true;로 인식한다. 따라서 return, break, continue구문을 사용하는 경우 다음 토큰까지 이어서 붙여 쓰고, 줄바꿈을 하지 말아야 한다.

++--연산자가 포함된 경우는 이해하기 난해하다. 다음 코드를 보자.

x
++
y

++는 x의 후위 연산자가 될 수도 있고, y의 전위 연산자가 될 수도 있으므로 난해하다. 이 경우 javascript는 무조건 첫 줄바꿈은 무조건 세미콜론으로, ++는 y의 전위 연산자로 해석이 된다. 따라서 위 코드는 x; ++y로 해석이 된다. 여기서 우리는 ++--는 반드시 연산자가 적용되는 표현식과 동일한 줄에 나타나야 한다는 것을 알 수 있다.

마치며

여기까지 간략하게 알아 본 javascript에서의 세미콜론이다. 개인적으로 추천하는 일은, 그냥 전부 세미콜론을 붙여 미연에 모든 일을 방지하는 것이다.

붙여서 나쁜 것은 없지만, 안 붙여서 나쁜 것은 매우 많지 않은가?