[JavaScript] 세미콜론 자동 삽입(Automatic Semicolon Insertion, ASI) 주의하기 - 코드 컨벤션

세미콜론 자동 삽입(ASI, Automatic Semicolon Insertion)은 줄바꿈이 자동으로 세미콜론으로 대체되는 것을 의미한다.

때로 의도하지 않은 동작을 초래할 수 있기 때문에 코드를 작성할 때 주의해야 한다.

특히, 함수 이름과 중괄호를 다른 줄에 작성할 경우, JavaScript에서는 이를 한 줄로 인식하여 세미콜론이 삽입되어 함수가 올바르게 작동하지 않을 수 있다.

다음 예시 코드를 보자

function someFunction()
{
  // 코드 블록
}

위 코드에서는 함수 이름과 중괄호가 다른 줄에 작성되어 있다. 이 경우, 세미콜론을 자동으로 삽입하여 다음과 같이 해석한다.

function someFunction();
{
  // 코드 블록
}

이 경우, someFunction은 함수 선언으로 해석되지 않으며 에러가 발생한다.

따라서, 함수 이름과 중괄호는 같은 줄에 작성해야 한다. 이를 통해 세미콜론 자동 삽입 문제를 방지하고 코드 가독성을 높일 수 있다.

// 올바른 작성
function someFunction() {
  // 코드 블록
}

 

 

 

좀 더 자세한 예시를 보도록 하자

function foo() {
  return
    'Hello, World!';
}

console.log(foo()); // undefined 출력

 

위 코드에서 foo 함수는 문자열 "Hello, World!"을 반환해야 하지만, return과 문자열이 다른 줄에 있기 때문에 ASI가 동작하여 반환 값이 undefined가 된다. 이를 방지하기 위해서는 return과 문자열을 동일한 줄에 작성해야 한다.

 

function foo() {
  return 'Hello, World!';
}

console.log(foo()); // "Hello, World!" 출력

 

위 코드에서는 `return`과 문자열이 동일한 줄에 있기 때문에 ASI가 동작하지 않고, 정상적으로 문자열 "Hello, World!"을 반환한다.

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion

Lexical grammar - JavaScript | MDN