Java/자바 개념

❓ 자바스크립트의 세미콜론(;) 사용: } 뒤의 경우

lamarcK 2025. 3. 31. 09:07

자바스크립트에서 코드 라인 끝에 세미콜론(;)을 붙이는 것은 문장 (Statement) 의 끝을 명시적으로 나타내는 역할을 한다. 특히 닫는 중괄호 (}) 뒤에 세미콜론이 오는 경우와 오지 않는 경우가 있어 혼란스러울 수 있다.

✨ 세미콜론의 기본 역할

  • 문장의 구분: 세미콜론은 자바스크립트 엔진에게 하나의 문장이 어디서 끝나는지를 알려주는 종결자 (terminator) 역할을 한다.

⚙️ 자동 세미콜론 삽입 (Automatic Semicolon Insertion, ASI)

자바스크립트에는 자동 세미콜론 삽입 (ASI) 이라는 기능이 있다. 개발자가 세미콜론을 생략하더라도, 자바스크립트 엔진이 특정 규칙에 따라 필요한 위치에 세미콜론을 자동으로 삽입하여 코드를 해석하려고 시도한다.

  • 규칙 예시: 줄바꿈이 있고 다음 줄의 코드가 이전 줄과 이어질 수 없는 경우, 엔진은 줄바꿈 앞에 세미콜론이 있다고 가정한다.

이 ASI 기능 때문에 많은 경우 세미콜론을 생략해도 코드가 정상적으로 동작하는 것처럼 보일 수 있다.

📌 } 뒤에 세미콜론(;)을 붙이는 경우와 그렇지 않은 경우

닫는 중괄호 (}) 뒤에 세미콜론을 붙이는지 여부는 해당 중괄호가 어떤 종류의 코드 블록을 닫는지에 따라 달라진다.

  1. 세미콜론이 필요 없는 경우 (주로 선언문):
    • 함수 선언문 (Function Declaration): 
      function myFunction() {
  // 함수 본문
} // <- 여기에 ;를 붙이지 않는 것이 일반적이다.
      함수 선언문 자체는 하나의 완전한 문장이지만, 관례적으로 그리고 대부분의 스타일 가이드에서 선언문 뒤에는 세미콜론을 붙이지 않는다. ASI가 보통 올바르게 처리한다.
    • 제어문 (Control Flow Statements): if, for, while, switch문의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 
      if (condition) {
  // 코드
} // <- ; 없음
for (let i = 0; i < 5; i++) {
  // 코드
} // <- ; 없음
  2. 세미콜론이 필요한/권장되는 경우 (주로 표현식):
    • 함수 표현식 (Function Expression): 함수를 변수에 할당하거나 객체의 속성으로 정의하는 경우, 이는 변수 할당 문장의 일부이다. 따라서 문장의 끝을 나타내는 세미콜론이 필요하다. 
      const myFunc = function() {
  // 함수 본문
}; // <- 변수 할당 문장의 끝이므로 ;가 필요하다.

const myArrowFunc = () => {
  // 함수 본문
}; // <- 변수 할agnar 문장의 끝이므로 ;가 필요하다.

const myObject = {
  method: function() {
    // 메소드 본문
  } // <- 객체 리터럴 내부에서는 쉼표(,)나 마지막 속성 뒤에는 아무것도 안 붙인다.
}; // <- 객체 할당 문장의 끝이므로 ;가 필요하다.
    • 클래스 선언/표현식: 함수와 유사하게 클래스 선언문 뒤에는 보통 붙이지 않지만, 클래스 표현식을 변수에 할당할 때는 붙인다. 
      class MyClass {
  // 클래스 본문
} // <- ;를 보통 붙이지 않음

const MyOtherClass = class {
  // 클래스 본문
}; // <- 변수 할당 문장의 끝이므로 ;가 필요함

🤔 왜 굳이 붙이나? (ASI의 함정)

ASI는 편리하지만, 특정 상황에서는 개발자의 의도와 다르게 동작하여 예상치 못한 오류를 발생시킬 수 있다. 예를 들어, 줄바꿈 후 다음 줄이 괄호 ( 나 대괄호 [ 등으로 시작하는 경우 ASI가 세미콜론을 삽입하지 않아 이전 줄과 이어지는 코드로 잘못 해석될 수 있다.

// 잘못된 예시 (ASI 문제 발생 가능)
let a = b + c
(d + e).print() // -> c(d+e).print() 로 해석될 수 있음

// 해결: 명시적 세미콜론 사용
let a = b + c;
(d + e).print();

이러한 잠재적 오류를 피하고 코드의 명확성을 높이기 위해, 많은 개발자와 프로젝트 (및 스타일 가이드)에서는 ASI에 의존하기보다 모든 문장의 끝에 명시적으로 세미콜론을 붙이는 것을 권장한다. (단, 위에서 설명한 함수/클래스 선언문, 제어문 블록 제외)

📄 요약

  • 세미콜론(;)은 자바스크립트에서 문장의 끝을 나타낸다.
  • 함수 선언문, 제어문 블록 (if, for 등)의 } 뒤에는 일반적으로 세미콜론을 붙이지 않는다.
  • 함수 표현식, 클래스 표현식, 객체 리터럴 등을 변수에 할당하는 문장의 끝에는 } 뒤에 세미콜론을 붙여야 한다.
  • 자동 세미콜론 삽입 (ASI) 기능이 있지만, 오류 가능성을 줄이고 코드 명확성을 위해 (예외적인 경우를 제외하고) 세미콜론을 명시적으로 사용하는 것이 좋다.

예시

❓ const createitem = () => {}; 뒤의 세미콜론

const createitem = () => {}; 코드 라인의 끝에 세미콜론(;)이 붙는 이유는 이것이 함수 표현식 (Function Expression) 을 사용한 변수 선언 및 할당 문장이기 때문이다.

이전 설명에서 언급했듯이, } 뒤에 세미콜론이 필요한 경우는 해당 중괄호가 표현식의 일부이고, 전체적으로 하나의 문장 (Statement) 을 구성할 때이다.

자세히 살펴보자:

  1. const createitem = ... ; : 이 부분은 createitem이라는 이름의 상수 (constant) 를 선언하는 변수 선언문이다. 모든 문장은 끝에 세미콜론(;)으로 종료하는 것이 원칙이며, 특히 명확성을 위해 권장된다.
  2. () => {} : 이 부분은 화살표 함수 (Arrow Function) 이다. 화살표 함수는 함수 표현식의 한 종류이다. 즉, 이 함수 자체가 하나의 값처럼 사용되어 createitem이라는 변수(상수)에 할당되고 있다.
  3. 종합: const createitem = () => {}; 전체는 "화살표 함수 표현식을 createitem 상수에 할당하는 하나의 문장"이다. 따라서 이 문장의 끝을 명확히 하기 위해 세미콜론(;)을 붙이는 것이다. 세미콜론은 함수 본문의 끝(})을 표시하는 것이 아니라, 변수 선언 및 할당 문장 전체의 끝을 표시한다.