[JS] 세미콜론 자동 삽입(ASI)

Jay Kim·2020년 5월 3일
0

JavaScript

목록 보기
8/10

추후 ECMAScript 명세 참고하여, 내용 추가 예정

ASIAutomatic Semicolon Insertion(자동 세미콜론 삽입)

자바스크립트 코드에서
;이 필요한 곳인데도 불구하고, 단 하나의 ;이 누락되면 자바스크립트 프로그램은 돌아가지 않는다.

ASI는 자바스크립트 프로그램의 세미콜론(;)이 누락된 곳에 엔진이 자동으로 ;을 삽입하는 것을 말한다.

ASI는 새 줄(행바꿈Line Break)에만 적용된다.
(어떠한 경우에도 줄 중간에 삽입되는 일은 없다)

자바스크립트 파서parser는 줄 단위로 파싱을 하다가 (;가 빠져) 에러가 나면,
;을 넣어보고 타당한 것 같으면 ;을 삽입한다.

ASI 예시

function foo(a) {
  if (a) return
  a *= 2;
}

foo(2)  // undefined

위 코드의 foo함수는 전달 인자에 2를 곱하여 리턴하고자 하는 함수이다.
(일반적으로 위 코드처럼 작성하지는 않겠지만..)

위 코드에서 두 번째 줄을 보면 if문 바로 다음에 return이 붙어 있으므로
그 다음 행인 a *= 2로 넘어갈 일이 없다.
따라서 ASI는 return문 끝에 ;을 추론하여 삽입한다.
따라서 foo(2)의 결과는 undefined가 반환된다.

ASI를 이해하고, 의도한대로의 함수를 작성하려면 다음과 같이 코드를 작성해야 한다.

function foo(a) {
  if (a) return (
    a *= 2
  );
}

foo(2)  // 4

ASI는 주로 break, continue, return, yield(ES6) 키워드가 있는 곳에서 활약한다.

ASI가 있는데 세미콜론을 필수적으로 적어야하는가?

자바스크립트 커뮤니티에서 가장 뜨거운 논란거리는 "ASI에 완전히 의존해야 하는가"이다.
알다시피, ASI로 인해 세미콜론을 입력하는 것은 대부분 선택사항이다.
(for ( ; ; )처럼 필수 세미콜론도 존재하기에 '대부분'이라는 표현을 사용하였다)

명세에는 ASI가 '에러 정정Error Correction' 루틴이라고 씌어 있다.
여기서 에러란 구체적으로 '파서 에러Parser Error'다.
즉, ASI가 파서를 너그럽게 하여 에러를 줄이는 것이다.

종합하자면,
ASI가 작동하는 것은 ;을 사용하지 않아 잘못 작성된 코드를
파싱 과정 중 에러를 발생시키지 않기 위해
엔진이 ASI를 작동시켜 정정하는 것이다.
즉, ASI가 작동하는 이유는 잘못된 코드이기 때문이다.

이는 곧 ;이 필요한 곳에 ;을 입력하지 않는 것은 '잘못된 코드'라는 것이다.


📚 참고 자료

  • 카일 심슨, 2017, 《You Don't Know JS: 타입과 문법, 스코프와 클로저》, 한빛미디어, p.174
profile
minuzai

0개의 댓글