자바스크립트: 세미콜론과 세미콜론 자동 삽입(ASI)

세미콜론은 대부분의 프로그래밍 언어에서 statement terminator이기 때문에, 모든 statement의 끝에는 statement가 종료됨을 명시하기 위해 세미콜론을 붙여주어야 한다. 다만 if, for, 그리고 함수 statement 등의 코드 블록은 self closing (자체 종결성)을 갖기 때문에 붙이지 않는다.

let mary = 'mary'
console.log(mary) // mary

let peter = 'peter';
console.log(peter); // peter

하지만 위 코드를 실행해보면 알겠지만, 자바스크립트는 세미콜론을 생략해도 문제가 없다. 자바스크립트 엔진에는 ASI(automatic semicolon insertion)이라는 statement의 끝을 예측해 자동으로 세미콜론을 붙여주는 기능이 있기 때문이다.

c,c++/java을 주로 사용했다면 오히려 세미콜론을 생략하는게 어색하게 느껴질수도 있지만, 파이썬을 주로 사용했다면 매번 세미콜론을 붙이는게 귀찮을수도 있다. 하지만 ASI가 가아끔 의도하지 않은 대로 동작하는 경우가 있기 때문에 전적으로 신뢰하면 안된다.

function fun() {
    return 
        { 
            name : 'mary' 
        }
}
console.log(fun()) // undefined

위 코드는 {name: 'mary'} 을 return 해야할 것 같지만, ASI에 의해 아래와 같이 세미콜론이 삽입된다.

function fun() {
    return;
        { 
            name : 'mary' 
        };
}

반면 이렇게 작성하면 객체를 반환하게 된다.

function fun() {
    return {
        name: 'mary'
    }
}
console.log(fun()) // { name: 'mary'}

ASI는 대게 개행을 기준으로 세미콜론을 붙이지만, 정확한 규칙을 숙지하기에는 다소 복잡하다. 때문에 의도하지 않은 결과를 미연에 방지하기 위해서는 명시적으로 세미콜론을 붙이는게 맘이 편하지 않을까 싶다.

물론 ESLint나 prettier을 이용하면 자동으로 세미콜론을 붙여주기 때문에 귀찮음도 덜 수 있다.

Never Use Semicolons " Feross.org

(이상한 제목이지만 머리가 절로 끄덕여지는 글...)

자바스크립트의 ASI는 규칙에 따라 세미콜론을 붙이기 때문에 세미콜론을 붙이더라도 ASI의 규칙에 맞지 않다면 추가적으로 붙이게 된다. 결국 formatting을 하더라도 나의 코드가 ASI를 거치고도 나의 의도를 유지할 수 있도록 코드를 작성해야 하고, 그러기 위해서는 어느정도 ASI를 이해할 필요가 있어 보인다.

자바스크립트 뉴비여서 아직 세미콜론 때문에 애먹은적은 없는데, ASI가 문제라면 디버깅하기 굉장히 어려울 것 같다...

Reference

모던 자바스크립트 Deep Dive 도서
https://bakyeono.net/post/2018-01-19-javascript-use-semicolon-or-not.html