JavaScript / 명령문·세미콜론 작성법과 줄바꿈 주의점

JavaScript

작성일 2026-10-26 최근 수정일 2026-10-27

JavaScript 명령문(statement)은 변수 선언, 값 대입, 함수 호출처럼 실행할 작업을 나타냅니다. 많은 명령문은 세미콜론(;)으로 끝낼 수 있으며, 생략해도 자동 세미콜론 삽입(ASI)이 적용되는 경우가 있습니다. 하지만 줄바꿈이 항상 명령문의 끝은 아니므로, 코드의 의미가 바뀌는 위치를 알아야 합니다.

명령문 사이에 세미콜론 쓰기

변수 선언과 함수 호출은 각각 명령문입니다. 한 줄에 여러 명령문을 놓는다면 사이에 세미콜론을 써서 구분합니다. 줄을 나눠 쓸 때도 세미콜론을 적으면 끝나는 지점이 분명해집니다.

const first = 2;
const second = 3;
console.log(first + second); // 5

const left = 'A'; const right = 'B';
console.log(left + right);   // 'AB'

반면 if의 중괄호 블록 뒤에는 선언문처럼 무조건 세미콜론을 붙이는 것이 아닙니다. 세미콜론은 명령문의 문법에 따라 필요 여부가 다릅니다. 위 예제처럼 변수 선언·표현식 명령문을 일관되게 끝내는 습관은 코드를 읽기 쉽게 합니다. MDN의 JavaScript 문법 기초에서 명령문 구분 규칙을 확인할 수 있습니다.

줄바꿈이 끝을 뜻하지 않는 경우

다음 예제처럼 + 뒤에 줄바꿈을 넣어도 덧셈 표현식이 계속됩니다. 첫 줄에서 식이 아직 완성되지 않았기 때문입니다. 원래 초안의 “줄바꿈을 하면 구문이 종료된다”는 설명을 일반 규칙으로 받아들이면 이런 코드를 잘못 예측하게 됩니다.

const total = 2 +
  3;
console.log(total); // 5

완성된 명령문 뒤에서 세미콜론을 생략하면 언어의 자동 세미콜론 삽입 규칙이 적용될 수 있습니다. 그렇다고 모든 줄 끝에 세미콜론을 넣는 단순 치환으로 이해하면 안 됩니다. 다음 줄이 앞의 표현식에 이어지는 문법이면 두 줄을 하나로 해석할 수 있습니다. 특히 ( 또는 [로 시작하는 줄 앞은 주의하고, 의도한 끝에는 세미콜론을 명시하세요. 자세한 조건과 예외는 MDN의 자동 세미콜론 삽입 규칙을 참고하세요.

return 바로 뒤에서는 줄을 바꾸지 않기

return과 반환할 표현식 사이에는 줄바꿈을 둘 수 없습니다. 다음 함수는 객체를 반환할 것처럼 보이지만, 실제로는 return;으로 해석되어 undefined를 반환합니다. 세미콜론을 직접 쓰더라도 이 줄바꿈을 고쳐야 합니다.

function wrong() {
  return
  { total: 5 };
}
console.log(wrong()); // undefined

반환할 값을 return과 같은 줄에서 시작하거나, 여는 괄호를 같은 줄에 둡니다. 여러 줄에 걸친 객체도 괄호 안에 넣어 읽기 쉽게 작성할 수 있습니다.

function correct() {
  return (
    { total: 5 }
  );
}
console.log(correct().total); // 5

MDN의 return 문서에도 줄바꿈으로 인한 반환값 변화가 설명되어 있습니다.

전체 예제로 두 결과 비교하기

다음 코드를 UTF-8로 statement-example.html에 저장하고 브라우저로 엽니다. ‘결과 비교’를 누르면 같은 줄의 return과 줄바꿈한 return이 각각 무엇을 돌려주는지 화면에 표시됩니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>세미콜론과 줄바꿈 비교</title>
</head>
<body>
<h1>return 뒤 줄바꿈 비교</h1>
<button id="compare" type="button">결과 비교</button>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite">비교 버튼을 눌러 결과를 확인하세요.</pre>
<script>
function resultOnSameLine() {
  return { total: 5 };
}

function resultAfterNewline() {
  return
  { total: 5 };
}

const output = document.querySelector('#output');
document.querySelector('#compare').addEventListener('click', () => {
  const safe = resultOnSameLine();
  const broken = resultAfterNewline();
  output.textContent = `같은 줄: ${safe.total}\nreturn 뒤 줄바꿈: ${String(broken)}`;
});
document.querySelector('#reset').addEventListener('click', () => {
  output.textContent = '비교 버튼을 눌러 결과를 확인하세요.';
});
</script>
</body>
</html>

버튼을 누른 결과는 같은 줄: 5와 return 뒤 줄바꿈: undefined입니다. ‘처음으로’를 누르면 안내 문구로 돌아옵니다. 실제 코드에서 의도하지 않은 undefined가 나타나면 반환문 바로 뒤에 줄바꿈이 있는지, 세미콜론이 어디에 들어갔는지 확인해 보세요.

JavaScript