자바스크립트 - 세미콜론(;) 사용 vs 미 사용 차이

C언어나 자바와 달리 자바스크립트 코드 끝 줄마다 세미콜론(;)이 없어도 에러가 나지 않는다.

 

예시

console.log('hello world')

 

 

그 이유는 자바스크립트 파일 실행 시, ASI(Automatic Semicolon Insertion) 즉 세미콜론 자동 삽입이라는 기능 때문에

컴파일러가 줄의 끝이 어디인지 대략 계산해서 자동으로 세미콜론을 삽입한다.

 

하지만 컴파일러가 개발자의 코드를 완전히 이해하지 못하기 때문에 에러나 버그가 일어난다

 

예시

let a = 0
let b = 1 + a
(10).toString()

 

 

결과

 

 

왜냐하면 컴파일러는 

let a = 0
let b = 1 + a(10).toString()

이렇게 이해하고 a가 함수라고 착각해서 에러가 나는 것이다.

 

 

만약 세미콜론을 삽입한다면

 

에러가 없다

 

 

 

다른 예시 (ASI에 의한 에러)

function returnWithObject() {
	return {
		name: 'John'
	}
}

function returnWithUndefined() {
	return
	{
		name: 'John'
	}
}

console.log(returnWithObject())
console.log(returnWithUndefined())

 

 

결과

 

returnWithUndefined 함수가 undefined를 반환한 이유는

컴파일 시 return 이후 문자가 없어 줄이 끝난 줄 알고 세미콜론을 넣었기 때문이다

 

마치 아래 사진과 같이 말이다

 

요점은 

return, break, continue, throw, do-while 등등 키워드 이후에 문자를 안 넣으면 자동으로 키워드 이후에 세미콜론을 넣는다

 

 

정리

에러나 혹은 버그를 방지하기 위해, 모든 끝 줄에다가 세미콜론을 삽입하는 게 가장 좋은 코딩 방식이다.