block

블록문(또는 다른 언어에서는 복합문)은 0개 이상의 구문을 묶을 때 사용합니다. 블록은 한 쌍의 중괄호로 구성하며 선택적으로 이름을 붙일 수 있습니다.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

구문

블록문

{
  StatementList
}

유명 블록문

LabelIdentifier: {
  StatementList
}

StatementList

블록문 내의 문.

LabelIdentifier

시각적인 구분, 또는 break문의 대상으로 쓸 label.

설명

다른 언어에서 블록문은 복합문이라고 부르기도 합니다. 블록문을 쓰면 JavaScript가 하나의 문을 기대하는 곳에서 다수의 문을 실행할 수 있습니다. JavaScript에서 이렇게 문을 묶는건 흔히 쓰이는 기법입니다. 반대 개념으로는 공백문이 있으며, 이는 하나의 문을 기대하는 곳에 아무것도 제공하지 않는 것입니다.

블록 범위 규칙

var 사용 시

var로 선언한 변수는 블록 범위를 가지지 않습니다. 블록 내에서 선언한 변수의 범위는 함수나 스크립트가 되어, 값 할당의 영향이 블록 바깥까지 미칩니다. 다른 말로는 블록문이 범위를 만들지 않습니다. "독립" 블록문도 유효한 구문이긴 하지만, C와 Java의 블록에 기대하는걸 JavaScript에서도 기대하면 안됩니다. 예를 들어보겠습니다.

var x = 1;
{
  var x = 2;
}
console.log(x); // 2 기록

콘솔 출력 결과는 2입니다. 블록 밖의 var x와 블록 안의 var x는 같은 범위에 속하기 때문입니다. C나 Java에서 같은 코드를 작성한다면 1을 출력할 것입니다.

let과 const 사용 시

반면 let과 const로 선언한 식별자는 블록 범위를 가집니다.

let x = 1;
{
  let x = 2;
}
console.log(x); // 1 기록

x = 2는 선언한 블록으로 범위가 제한됩니다.

const도 마찬가지입니다.

const c = 1;
{
  const c = 2;
}
console.log(c); // 1 기록, SyntaxError 없음

블록 내의 const c = 2가 SyntaxError: Identifier 'c' has already been declared를 던지지 않는 점에 주목하세요. 블록 범위 안이라 별개의 식별자이기 때문입니다.

function 사용 시

function 선언도 블록 내로 한정됩니다.

foo('바깥');  // TypeError: foo is not a function
{
  function foo(location) {
    console.log('foo를 ' + location + '에서 호출함');
  }
  foo('안쪽'); // 'foo를 안쪽에서 호출함' 기록
}

더 상세하게는, 블록문은 함수 선언이 범위의 상단으로 호이스팅되는걸 방지합니다. 블록문 내의 함수 선언은 마치 함수 표현식처럼 취급되고, 따라서 위로 호이스팅되는건 아래와 같이 암묵적인 변수 선언 뿐입니다.

foo;  // undefined
{
  function foo(location) {
    console.log('foo를 ' + location + '에서 호출함');
  }
  foo('안쪽'); // 'foo를 안쪽에서 호출함' 기록
}

결국 foo 호출을 블록문 아래에서 하면 오류가 없다는 뜻이기도 합니다.

{
  function foo(location) {
    console.log('foo를 ' + location + '에서 호출함');
  }
  foo('안쪽'); // 'foo를 안쪽에서 호출함' 기록
}
foo('바깥');  // 'foo를 바깥에서 호출함' 기록

명세

브라우저 호환성

참고

• while
• if...else
• let