[Javascript; 자바스크립트] 자바스크립트에서 세미콜론 사용 가이드

사진: Unsplash 의 Mounish Raja

https://www.codecademy.com/resources/blog/your-guide-to-semicolons-in-javascript/

Your Guide to Semicolons in JavaScript

이 글은 개인적으로 공부하면서 저만의 설명을 작성한 글입니다.

Javascript에서 세미콜론(;)은 문장(statement)을 구분하는 데 사용됩니다.

하지만 Javascript 엔진은 세미콜론을 자동으로 삽입(ASI: Automatic Semicolon Insertion)할 수 있어서, 코드에서 세미콜론을 생략할 수도 있습니다.

그럼에도 불구하고 세미콜론을 명시적으로 사용하는 것이 좋습니다. 아래는 Javascript에서 세미콜론을 사용하는 방법과 관련된 주요 사항들입니다.

1. 세미콜론 자동 삽입(ASI) 이해하기

Javascript 엔진은 대부분의 경우 코드에서 세미콜론을 자동으로 삽입할 수 있습니다. 그러나 이는 예기치 않은 버그를 일으킬 수 있습니다.

const a = 1
const b = 2
const c = a + b

위 코드는 세미콜론을 자동으로 삽입하여 정상적으로 작동합니다. 그러나 다음과 같은 경우에는 문제가 발생할 수 있습니다.

const a = 1
const b = 2
const c = a + b
[1, 2, 3].forEach(console.log)

여기서 `[1, 2, 3]` 배열의 `forEach` 메서드 호출이 `c` 문장 다음에 바로 이어져 있어 예기치 않은 결과를 초래할 수 있습니다.

2. 세미콜론 생략의 위험

세미콜론을 생략하면 코드의 해석이 예상과 다를 수 있습니다.

const a = 1
const b = 2
const result = a + b
[1, 2, 3].forEach(console.log)

이 경우 `[1, 2, 3].forEach(console.log)`가 `result`와 연결될 가능성이 있습니다. 이는 종종 오류를 발생시키거나 버그를 유발할 수 있습니다.

3. 세미콜론을 사용하는 것이 좋은 이유

세미콜론을 명시적으로 사용하는 것은 코드의 가독성을 높이고 의도하지 않은 동작을 방지하는 데 도움이 됩니다.

특히 여러 문장이 한 줄에 있을 때 세미콜론을 사용하여 코드의 명확성을 유지할 수 있습니다.

4. 세미콜론의 올바른 사용 예시

let x = 10;
let y = 20;
let z = x + y;
console.log(z);

위 코드는 각 문장이 세미콜론으로 구분되어 명확하게 의도를 전달합니다.

5. 주의해야할 예시

일부 경우에는 세미콜론을 생략해도 안전한 상황이 있습니다. 그러나 다음과 같은 예시의 경우 세미콜론이 필요합니다.

const foo = function() {
	return
    	{ bar: 'baz' }
}

이 코드는 `return`문 다음 줄의 객체 리터럴을 반환하지 않게 하며, 빈 값을 반환하게 됩니다. 

const foo = function() {
  return; // 자동으로 삽입된 세미콜론
  { bar: 'baz' }
}

여기서 `return`문 뒤에 세미콜론이 삽입되면, `return`문이 `undefined`를 반환하게 됩니다. 따라서 `{ bar: 'baz' }`는 반환되지 않습니다. 즉, 의도와는 다르게 빈 값이 반환됩니다.

const foo = function() {
  return {
    bar: 'baz'
  }
}

다음과 같이 작성해야 의도된 값이 반환됩니다.

6. 닫는 중괄호 ` } ` (curly bracket) 뒤에 세미콜론을 넣으면 안되는 예시

- 조건문과 반복문

if (...) { ... } else { ... }
for (...) { ... }
while (...) { ... }

- 함수 선언문

function myFunction(arg) { /* do this */ } // 닫는 중괄호 뒤에 세미콜론을 넣지 않습니다

- 예외

do {
  // 코드 블록
} while (...);

`do...while` 루푸의 경우에는 `while` 뒤에 세미콜론을 사용하는 것이 올바릅니다. `do` 블록의 닫는 중괄호 뒤에는 세미콜론을 넣지 않습니다.

끝.