자바스크립트 세미콜론(;)에 대해서

🌊·2023년 4월 26일
1

JS&TS

목록 보기
1/6
post-thumbnail

자바스크립트에서 세미콜론(;)을 사용하는 것에 대해서 많은 의견들이 있습니다.
왜냐하면 자바스크립트에서 세미콜론은 필수가 아니기 때문입니다.

어떠한 근거로 찬성 혹은 반대의 의견이 있는지 내용들을 정리해보려고 합니다!

세미콜론(;)이란 🤔

기본적으로 세미콜론은 구문의 종료를 나타냅니다.
자바스크립트에서는 하나의 구문이 끝날 때 세미콜론을 붙여도 되고 붙이지 않아도 됩니다.

하지만 세미콜론을 사용하지 않고 개발한다고 해서 구문을 구분할 때 세미콜론이 없는 것은 아닙니다.
인터프리터 과정에서 자동으로 구문 구분을 해야하는 곳을 판단해서 세미콜론을 붙여줍니다.

해당 역할을 가진 시스템을 ASI(Automatic Semicolon Insertion)이라고 합니다.

그래서 다른 언어들과 달리 세미콜론에 대한 선택이 가능했습니다.

ASI (Automatic Semicolon Insertion)

  • 세미콜론이 들어갈 자리를 파악해서 자동으로 세미콜론을 붙여준다.
  • 개발자의 의도와는 다르게 세미콜론이 안찍히는 경우가 있다.

ASI 세미콜론 삽입 규칙

  1. 줄바꿈이 되는 행의 마지막에
  2. 행의 마지막이 } 이고 줄바꿈이 되어 다음 행이 시작될때
  3. 파일의 끝에 도달할 때
  4. return이 있는 행의 마지막에
  5. break가 있는 행의 마지막에
  6. throw가 있는 행의 마지막에
  7. continue가 있는 행의 마지막에

많은 의견들을 찾아봤을 때 보편적인 의견은 세미콜론을 붙이는 것을 권장하는 편이였습니다.
그래도 찬성 / 반대에 대한 의견을 정리해보도록 하겠습니다.

세미콜론이 필요한 이유 🙆‍♂️

  • 예외 상황을 대비하기 위해서
    • 세미콜론을 사용하지 않으면 ASI가 자동으로 세미콜론을 붙여주는데 일부 구문에서 에러가 발생하는 경우가 있습니다.
    • 에러 발생 방지, 통일성 있는 코드를 위해 모든 명령 뒤에 세미콜론을 붙여야 한다라고 말합니다.
  • 세미콜론을 통해 구문이 구분되니 가독성에 좋다.
  • ASI 동작에 대한 이해가 없어도 세미콜론을 넣게 되면 문제를 미리 방지할 수 있다.
    • TC39(ECMA 인터내셔널의 ECMA 스크립트 담당 기술 위원회)에서 세미콜론을 사용하는 것을 권장한다.

오류가 나는 경우

구문을 동일한 라인에 작성하는 경우

console.log("hi") console.log("hello")

IIFE를 사용하는 경우

const x = 1
const y = x; // 별도로 세미콜론을 달아줘야 함

(function () {
	console.log('IIFE')
})()
  • 이 경우 TypeError: x is not a function 에러가 발생
  • const y = x 뒤에 세미콜론을 붙이지 않고 IIFE 뒤에 세미콜론이 붙음

구문 인식

const x = 1;
const y = x(function () {
  console.log('IIFE');
})();

변수나 상수로 선언하지 않고 배열 등을 만들어 반복문을 사용하는 경우

const x = 1
const y = x

[0, 1, 2].forEach(num => {
	console.log(num)
})

구문 인식

const x = 1;
const y = x[0, 1, 2].forEach(num => {
  console.log(num);
})

세미콜론이 필요하지 않은 이유 🙅‍♂️

  • ASI에 대한 동작을 이해하고 코딩하면 문제가 되지 않는다.
    • 인터프리터 과정에서 구문 구분에 대한 이해가 있는 상태로 코딩하면 예외상황은 생기지 않는다고 말하고 있습니다.
    • 그리고 실수를 할 여지(예외 상황)이 많지 않다는 의견입니다.
  • ESLint를 이용해서 ASI 동작을 포착하는 규칙을 사용하면 세미콜론을 사용하지 않았을 때 오류가 발생하지 않는다.
    • no-unexpected-multiline 옵션을 이용해서 오류를 방지할 수 있습니다.
  • 모든 구문에 추가되는 세미콜론 문자를 줄일 수 있다.

결론 🤦‍♂️

정말 큰 이슈가 없다면 본인이 원하는 방식을 사용하는 것이 좋을 것 같습니다!
ASI에 대한 이해가 있다면 양 쪽의 의견이 모두 문제가 되지 않으니까요!

개인적으로는 세미콜론을 사용하는 것이 좋다고 생각합니다.

TC39의 권고사항이 있기도 하고, ASI의 작동 방식에 대해서 신경쓰지 않아도 오류를 사전에 방지할 수 있다는 것이 안정성 측면에서 훨씬 좋다는 생각을 했습니다.

출처

0개의 댓글