ASIAutomatic Semicolon Insertion(자동 세미콜론 삽입) 이란?
자바스크립트 코드에서 ;(세미콜론) 이 필요한 곳인데도 불구하고, 단 하나의 ;이 누락되면 자바스크립트 프로그램은 돌아가지 않는다.
ASI는 자바스크립트 프로그램의 세미콜론(;)이 누락된 곳에 엔진이 자동으로 ;을 삽입하는 것을 말한다. ASI는 새 줄(행바꿈Line Break)에만 적용된다. (어떠한 경우에도 줄 중간에 삽입되는 일은 없다)
자바스크립트 파서parser는 줄 단위로 파싱을 하다가 (;가 빠져) 에러가 나면, ;을 넣어보고 타당한 것 같으면 ;을 삽입한다.
다음 예시를 살펴보자.
1
2
3
4
5
6
function foo(a) {
if (a) return
a *= 2;
}
foo(2) // undefined
foo함수는 전달 인자에 2를 곱하여 리턴하고자 하는 함수이다. 두 번째 줄을 보면 if문 바로 다음에 return이 붙어 있으므로 그 다음 행인 a *= 2로 넘어갈 일이 없다. 따라서 자바 스크립트 엔진은 return문 끝에 ;을 추론하여 삽입한다. 따라서 foo(2)의 결과는 undefined가 반환된다.
ASI를 이해하고, 의도한대로의 함수를 작성하려면 다음과 같이 코드를 작성해야 한다.
1
2
3
4
5
6
7
function foo(a) {
if (a) return (
a *= 2
);
}
foo(2) // 4
ASI는 주로 break, continue, return, yield(ES6) 키워드가 있는 곳에서 활약한다.
그럼 ASI가 있는데 세미콜론을 필수적으로 적어야하는가?
자바스크립트 커뮤니티에서 가장 뜨거운 논란거리는 “ASI에 완전히 의존해야 하는가”이다. 알다시피, ASI로 인해 세미콜론을 입력하는 것은 대부분 선택사항이다.
명세에는 ASI가 ‘에러 정정Error Correction’ 루틴이라고 씌어 있다. 여기서 에러란 구체적으로 ‘파서 에러Parser Error’다. 즉, ASI가 파서를 너그럽게 하여 에러를 줄이는 것이다.
ASI는 ;이 누락된 곳에서 파싱 과정 중 에러를 발생시키지 않기 위해 자바스크립트 엔진이 ASI를 통해 자동으로 ; 을 넣어주는 것이다.즉, ASI가 작동하는 이유는 잘못된 코드이기 때문이다. 이는 곧 ;이 필요한 곳에 ;을 입력하지 않는 것은 ‘잘못된 코드’라는 것이다.