자바스크립트 코드를 살펴보다 보면 라이브러리 파일의 가장 첫 줄이 ;(세미콜론)로 시작하는 경우를 종종 목격하게 됩니다. 언뜻 불필요해 보이는 이 작은 기호에는 중요한 이유가 숨어 있습니다.
즉시 실행 함수(IIFE) 패턴
먼저 배경 지식으로, 자바스크립트에서 함수는 일반적으로 다음과 같은 형태로 작성됩니다.
(function(){...})()이 패턴을 즉시 실행 함수 표현식(IIFE, Immediately Invoked Function Expression)이라고 부릅니다. 함수를 정의하는 동시에 바로 호출하여, 내부 변수들이 전역 스코프를 오염시키지 않도록 캡슐화하는 역할을 합니다. 대부분의 자바스크립트 라이브러리가 이 방식으로 전체 코드를 감싸고 있습니다.
그런데 왜 앞에 세미콜론을 붙일까?
라이브러리 코드를 열어보면 다음과 같이 함수 선언 앞에 세미콜론이 붙어 있는 것을 볼 수 있습니다.
;(function() {
// 라이브러리 코드
})();이 선행 세미콜론(leading semicolon)에는 두 가지 핵심적인 이유가 있습니다.
1. 여러 JS 파일을 하나로 안전하게 합치기 위해
웹 성능 최적화를 위해 개발자들은 여러 개의 자바스크립트 파일을 하나로 병합(concatenate)한 뒤, 단일 HTTP 요청으로 서빙하는 경우가 많습니다. 이때 각 파일이 세미콜론 없이 끝난다면, 파일과 파일이 이어붙여지는 경계에서 문법 오류나 예기치 않은 동작이 발생할 수 있습니다.
파일 맨 앞에 세미콜론을 붙여두면, 이전 파일의 마지막 줄과 어떻게 연결되더라도 자동으로 문장이 올바르게 종료되므로 안전하게 병합할 수 있습니다.
2. 잘못 닫힌 이전 코드로부터 보호하기 위해
자바스크립트에서는 세미콜론 생략이 허용되기 때문에, 같은 페이지에서 함께 로드되는 다른 스크립트가 세미콜론 없이 끝날 가능성이 항상 존재합니다. 예를 들어 직전 코드가 다음처럼 잘못 닫혀 있다면,
var x = 1 + 2
이어서 등장하는 (function(){...})() 구문이 새로운 문장이 아니라, 위 코드에 대한 함수 호출로 해석되어 버릴 수 있습니다. 즉 1 + 2(function(){...})()처럼 엮이면서 심각한 오류를 일으키게 됩니다.
맨 앞에 세미콜론을 하나 넣어두면 이전 문장이 확실하게 종료되므로, 어떤 코드와 결합되더라도 라이브러리가 독립적으로 안전하게 동작합니다.
정리
라이브러리 코드 맨 앞의 세미콜론은 단순한 코딩 습관이 아니라, 파일 병합 시의 안정성과 선행 코드의 문법 오류로부터의 방어를 위한 방어적 프로그래밍(defensive programming) 기법입니다. 다만 ES 모듈(ESM) 환경이나 번들러를 사용하는 현대적인 개발 흐름에서는 파일 간 결합 문제가 자동으로 처리되므로, 이러한 선행 세미콜론이 점차 사라지는 추세이기도 합니다.