JavaScript에서 세미콜론(;)은 문장의 끝을 나타내는 중요한 기호입니다. 그런데 이 세미콜론이 if문과 같은 제어문에 잘못 배치되면, 조건식의 참·거짓 여부와 상관없이 코드가 실행되어 예상치 못한 결과를 초래할 수 있습니다.
왜 이런 현상이 발생할까?
if 조건 바로 뒤에 세미콜론을 붙이면, JavaScript는 이를 빈 문장(empty statement)으로 해석합니다. 즉, 조건이 거짓이더라도 세미콜론 덕분에 if문 자체는 아무 작업도 하지 않고 종료되며, 그 뒤에 오는 중괄호 { } 블록은 조건과 무관하게 항상 실행됩니다.
예제
<!DOCTYPE html>
<html>
<body>
<script>
var val1 = 10;
// 세미콜론이 잘못 배치된 경우
if (val1 == 15); {
document.write("세미콜론이 잘못 배치되어 출력됨: " + val1);
}
var val2 = 10;
// 올바르게 작성된 경우
if (val2 == 15) {
// 이 부분은 실행되지 않음
document.write(val2);
}
</script>
</body>
</html>실행 결과 분석
위 코드에서 val1 == 15는 명백히 거짓(false)입니다. 그러나 if (val1 == 15) 뒤에 세미콜론이 붙어 있기 때문에 "세미콜론이 잘못 배치되어 출력됨: 10"이라는 문장이 화면에 그대로 출력됩니다.
반면, 세미콜론 없이 올바르게 작성된 두 번째 if문은 조건이 거짓이므로 내부 코드가 실행되지 않고 아무것도 출력하지 않습니다.
정리 및 주의사항
잘못 배치된 세미콜론 하나만으로도 프로그램의 논리가 완전히 달라질 수 있습니다. 따라서 다음 사항을 항상 기억하세요.
if,for,while등 제어문의 조건식 뒤에는 세미콜론을 붙이지 않습니다.- 조건부 로직을 작성할 때는 들여쓰기와 중괄호 규칙을 일관되게 유지합니다.
- ESLint 같은 정적 분석 도구를 활용하면 이러한 실수를 개발 단계에서 미리 잡아낼 수 있습니다.