자바스크립(javascript) 세미콜론 자동삽입, 대괄호 앞에선 왜 말썽일까?

 

요즘 기본기를 다지기 위해 기초부터 공부를 하고 있는 중에 흥미로운 주제를 가지고 왔어요 ㅎㅎ

 

 

 

자바스크립트는 세미콜론(;)을 안 써도 자동으로 처리해줘서 참 편리하죠?? 하지만 괄호나 대괄호 앞에서는 갑자기 오류가 툭 튀어나올 때가 있습니다. 

"왜 이래?" 싶었던 적이 있다면 이 글에서 그 이유와 해결법을 알 수 있어요!

 

 

자바스크립트, 세미콜론은 안 써도 된다?

JS(자바스크립트)는 굳이 세미콜론을 안 붙여도 돌아가는 경우가 많아요.

예를 들면

alert('Hello')
alert('World')

 

이 경우는 내부적으로 이렇게 처리 된답니다.

alert('Hello');
alert('World');

 

이 기능을 ASI(Automatic Semicolon Insertion) 라고 해요

이름은 길지만 쉽게 말하면 "내가 세미콜론을 안 써도 JS가 알아서 찍어줘!" 라는 뜻이죠 ㅎㅎ

 

그런데 대괄호 앞에서는 왜 에러가 날까?

그런데 아래 코드를 한번 볼게요

let x = 1
console.log(x)
[1, 2, 3].forEach(x => console.log(x))

 

console.log(x) 후에 

forEach를 이용해서 console.log를 또 사용하는구나라고 생각을 하고 실행을 해보면?

 

1만 나옵니다?

 

왜 그러는 걸까요??

 

대괄호는 "앞 문장과 연결된 표현"으로 오해받는다.

js는 대괄호( [] ), 괄호 ( () ), 슬래시( / ) 등 몇몇 문자를 " 이거 앞 문장의 일부인가? " 하고 생각해요.

그렇다 보니 위 코드는 엔진 입장에서 아래처럼 보이게 될 거예요.

let x = 1;
console.log(X)[1, 2, 3].forEach(x => console.log(x))

 

음.. 그럼 무엇이 문제일까요??

 

이해하기 쉽게 풀어서 설명해 볼게요!!

우선 console.log(x)의 경우는 리턴이 존재하지 않기 때문에 결괏값은 undefined겟죠??

콘솔에 출력이 될 뿐 반환하는 값은 없답니다!

 

자 그럼 다시 엔진이 바라보는 코드를 보자면

"console.log(x)"의 결괏값에 대해, [1,2,3] 배열을 인덱싱 한 다음 forEach()를 호출한다.라고 해석이 되는데..

 

"아무것도 없는 것(undefined)한테, '배열에서 루프 돌려줘' 라고 부탁한 상황"

 

당연히 undefined는 그런 걸 할 줄 몰라요! 하면서 오류가 나게 되는 거죠 ㅎㅎ

 

let x = 1;
console.log(x);
[1, 2, 3].forEach(x => console.log(x));

 

그래서 세미콜론을 명시적으로 넣어 독립된 문장으로 인식되도록 해야 합니다!

 

사실... 세미콜론을 안 써도 되긴 한다지만 이런 예외 상황 생각하면;

그냥 붙이는 게 마음 편해요 ㅎㅎ;

 

 

자바스크립트의 세미콜론 자동삽입은 참 고마운 기능이지만 대괄호나 return 앞에서는 의외의 복병이 될 수 있어요

줄 하나 잘못 바꾸면 예상치 못한 버그가 생길 수 있답니다.

 

안전하게 코딩하려면?

세미콜론, 그거 하나면 평화가 옵니다.

 

 

 

참고 링크

 

• MDN - Automatic Semicolon Insertion
• JavaScript Return Statement Gotcha