[Javascript] 자바스크립트의 문과 표현식, 그리고 세미콜론(;)

최근 자바스크립트에 대한 기초를 더욱 탄탄히 잡고 싶어 깊이 공부하던 중, 내가 간과하던 부분을 발견하여서 이에 대해 기초를 되짚기 위해 작성하는 글이다.

1. 자바스크립트에서 문(statement)의 의미

자바스크립트에서 statement는 프로그램을 구성하는 기본 단위이자, 최소의 실행 단위이다. 문의 집합으로 이루어진 것이 바로 프로그램이고, 문을 작성하고, 순서에 맞게 나열하는 것을 바로 프로그래밍이라고 하는 것이다. 내가 지금 바로 아래에 statement, 문의 예시에 대해서 작성을 해 보겠다.

var sum = 1 + 2 ;

위에 작성한 코드가 바로 '문'이다.

문은 여러 토큰으로 구성된다. 토큰이란, 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소들을 의미한다.
위의 코드를 더 세부적으로 쪼개 보면 아래와 같이 나눌 수 있을 것이다.

var, sum, = , 1 , + , 2

내가 쉼표를 기준으로 나눈 것이 바로 토큰 하나 하나를 나눈 것이다. 키워드, 식별자, 연산자, 리터럴, 세미콜론(;), 마침표(.)와 같은 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이기 때문에 토큰이라고 할 수 있다.

2. 세미콜론의 의미

세미콜론(;)은 문의 종료를 나타낸다. C++과 C를 공부해오면서 숱하게 알고 있던 기본적인 사실이지만, 이번 기회를 통해서 확실히 정리할 수 있게 된 것 같다. 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고, 순차적으로 하나씩 문을 실행한다. 따라서 문을 끝낼 때는 세미콜론을 꼭 붙여야 한다. 단, 주의할 점은 0개 이상의 문을 중괄호로 묶은 코드 블록({...}) 뒤에는 세미콜론을 붙이지 않는다. 코드 블록은 자체 종결성을 가지고 있기 때문이다.

사실, 자바스크립트에서 세미콜론은 꼭 붙이지 않아도 된다. 엔진 속에는 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI)가 자동으로 삽입되기 때문이다. 하지만 다음과 같이 오작동하는 경우도 있기 때문에, 제대로 작성을 해야 한다!

function foo() {
  return
  {}
// ASI의 동작 결과 -> return; {};
//개발자의 예측 => return {};
}

위와 같은 오류를 방지하기 위하여 세미콜론을 붙이는 습관을 들이도록 하자!