[Javascript] 세미콜론 자동 삽입과 중괄호 위치 버그

세미콜론 자동 삽입과 중괄호 위치 버그

자바스크립트의 세미콜론 자동 삽입에 의해 나타날 수 있는 현상인 중괄호 위치 버그에 대해 알아보자.

---

세미콜론 자동 삽입

프로그래머가 세미콜론(;)을 삽입하지 않은 채 행을 종료하면, 자바스크립트에서는 코드가 실행될 때 행의 마지막에 세미콜론을 자동 삽입한다.

 

// 예시 1
var number = 100

// 예시 2
console.log(number)

위 코드 두 줄은 각각 행의 마지막에 세미콜론을 붙이지 않은 코드이지만 실제로는 동작한다.

 

세미콜론을 넣지 않고 number 변수에 100을 할당하는 코드이다.

 

실제로 number 변수의 값을 조사해보면 100이 할당된 것을 확인해 볼 수 있다.

 

 

console.log 함수를 이용해 number 변수의 값을 다시 한 번 조사해보자. 이번에는 console.log 함수 마지막에 세미콜론을 넣지 않았으나 정상 동작하는 것을 확인할 수 있다.

---

세미콜론 자동 삽입으로 인한 중괄호 위치 버그

"세미콜론을 자동으로 넣어주면 프로그래머는 신경쓰지 않아도 되니 좋은거 아닌가요?" 라고 생각할 수 있겠으나 항상 옳은 말은 아니며 좋다 vs 안좋다 의견이 분분하다.

 

오히려 자동 삽입으로 인해 예기치 않은 버그가 발생할 수 있다.

 

function test1 () {
    return {
    	message : 'Hello world'
    }
}

function test2 ()
{
    return
    {
    	message : 'Hello world'
    }
}

어떤 객체를 리턴하려는 두 함수 test1과 test2가 있다.

괄호의 위치가 각각 test1은 K&R 스타일로 작성되었고, test2는 BSD 스타일로 작성되었다.

 

언뜻 보기에는 두 함수가 같은 결과를 리턴할 것 처럼 보이지만...

 

실행을 해보면 test1 함수는 객체를 리턴하고 test2 함수는 undefined를 리턴한다.

 

// 작성한 소스코드
function test2 ()
{
    return
    {
    	message : 'Hello world'
    }
}

-----------------------------------

// 세미콜론이 자동 삽입되어 실행된 소스코드
function test2 ()
{
    return; // 세미콜론이 return에 붙어버림
    // 아래 소스코드는 무시됨
    {
    	message : 'Hello world'
    }
}

원인은 "세미콜론 자동 삽입" 때문이다. 소스코드가 실행될 때 return의 끝에 세미콜론이 삽입되어 return;이 되어버린다.

즉, test2 함수는 undefined를 리턴하게 되어 프로그래머가 의도하지 않은 방향으로 로직이 실행될 수 있다.

 

이는 초보 개발자나 권장 코드 스타일이 BSD인 언어(C# 등)를 사용하다가 넘어온 개발자가 자주 하는 실수이기도 하다.

 

(※ return;는 return undefined;와 같다)

---

참조 문서

Why do results vary based on curly brace placement?