자바스크립트에서 세미콜론이 선택적이지 않은 경우

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

자바스크립트 초보자 및 개발자, 특히 언어의 세미콜론 규칙에 대한 이해가 필요한 사람들

핵심 요약

• 세미콜론은 자바스크립트에서 선택적이지만, 특정 상황에서 생략하면 예상치 못한 오류가 발생할 수 있다.
• const num = array[idx]와 같은 문장 뒤에 세미콜론을 생략하면, 다음 줄의 표현식이 함수 호출로 해석될 수 있다.
• 함수 반환 값을 원하는 경우 const num = arrayidx와 같이 명시적으로 호출해야 한다.

섹션별 세부 요약

1. 세미콜론 생략 시 발생하는 문제

• const num = array[idx] 뒤에 세미콜론을 생략하면, 다음 줄의 (num && num % 2 === 0)이 num의 함수 호출로 해석된다.
• 예제 코드에서 num이 배열의 숫자가 아닌 함수일 경우, num % 2는 function 객체에 대한 연산으로 오류가 발생한다.
• console.log(num)은 function fn3() {} 대신 3을 출력해야 하는데, 세미콜론 생략으로 인해 오류 발생.

2. 세미콜론 추가로 해결

• const num = array[idx]; 문장 끝에 세미콜론을 추가하면, 다음 줄의 (num && num % 2 === 0)이 새로운 문장으로 해석되어 오류를 방지한다.
• const num = arrayidx와 같이 명시적으로 함수를 호출하면, num에 반환 값이 저장된다.
• Math.random()과 같은 표현식이 있어도, 세미콜론이 없으면 num이 함수가 아닌 경우 3 대신 function이 출력된다.

3. 세미콜론의 중요성

• 자바스크립트 엔진은 자동 세미콜론 삽입(Auto Semicolon Insertion)을 수행하지만, 모든 경우에 적용되지는 않는다.
• 특히 함수 호출, 배열/객체 리터럴, 조건문 등에서 생략 시 예상치 못한 결과가 발생할 수 있다.
• 코드의 가독성과 안정성을 위해 명시적으로 세미콜론을 사용하는 것이 권장된다.

결론

• 자바스크립트에서 세미콜론은 생략 가능하지만, 함수 호출이나 복잡한 표현식이 포함된 문장에서는 반드시 사용해야 한다.
• const num = arrayidx와 같이 명시적인 함수 호출을 사용하면, 예상치 못한 오류를 방지할 수 있다.
• 코드의 가독성과 유지보수를 위해 모든 문장 끝에 세미콜론을 명시적으로 추가하는 것이 실무에서 권장된다.