ASI, ; 자바스크립트에 세미콜론이 왜 자동으로 들어가요??

유튜브 구독이 된 얄팍한 코딩사전 세미콜론 영상이 올라와 바로 작성해본다

https://www.youtube.com/watch?v=hJjYvVOEO7s 

코딩을 처음 시작할때 파이썬에서도 그랬고 세미콜론을 안찍어주면 오류가 나기도했는데

또 어느 부분은 세미콜론을 안찍어도 작동이 되는 부분도 있었다.

그래서 결국은 가로가 끝날 때면 그냥 다 붙여버렸다

 

코드를 짜다보면 어떨때는 세미콜론을 자동으로 붙여준다

개발자의 의도와는 다르게 세미콜론을 찍거나 안찍어준다.

 

이를 ASI라고 한다.

(Automatic Semicolon Inserion, 자동 세미콜론 삽입)

https://blog.alexdevero.com/automatic-semicolon-insertion-in-javascript/

특징은 줄바꿈을 찾아내 자동으로 세미콜론을 붙여준다. 신경써줘야 하는 부분을 아래 예시로 확인해보자

 

1.  줄 바꿈에 자동으로 찍힐 때

왼쪽사진과 같이 세미콜론을 찍지 않았을때는 오른쪽 사진 처럼 '헬로'; 에 자동으로 찍히는 ASI를 기대할 수 있지만

 

 

return; 과 '헬로'; 둘다 찍혀버려서 undefined를 반환해버리는 일이 생긴다. 그렇기에 회사나 단체에서 작성할때는 코드 컨벤션을 지켜 합의를 해야하며 혹시나 값이 안찍힌다면 ASI가 자동으로 들어간 곳과 내가 원하는 곳을 비교해봐야한다.

 

---

2.  짧은 statement , 콘솔을 구분할 때

이처럼 짧은 statement를 사용하려면 세미콜론을 붙여 구분 해줘야한다 안그러면 Unexpected identifier 에러가 난다.

ASI는 줄바꿈, 개행된 것이 아니기 때문에 구분못한다.

 

 

3.  변수 설정과 함수가 겹칠때 

보통 이렇게 둔 채 세미콜론을 찍지 않으면 자동으로 x를 함수처럼 실행하고 그 결과를 반환하는 오른쪽 사진이 된다.

그렇기 위해서 우리는 x,y 변수에 세미콜론을 찍어주는데 보기 좋게 아래서는 함수 앞에 찍어준다고 한다

어느한곳에만 ;0를 붙이면 일관성이 떨어지니 function 앞에 써준다

근데 차라리 x,y를 다 찍어주는 것도 좋은 방법이 아닐까 한다

결국 각 합의한 내용에 따라 세미콜론도 정해서 찍자! 그리고 오류가 난다면 가로와 세미콜론 콤마등을 확인하자!