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

구문

블록문

{
  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을 출력할 것입니다.

letconst 사용 시

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

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 = 2SyntaxError: 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를 바깥에서 호출함' 기록

명세

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'Block statement' in that specification.
Draft  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Block statement' in that specification.
Standard  
ECMAScript 5.1 (ECMA-262)
The definition of 'Block statement' in that specification.
Standard  
ECMAScript 3rd Edition (ECMA-262)
The definition of 'Block statement' in that specification.
Standard  
ECMAScript 1st Edition (ECMA-262)
The definition of 'Block statement' in that specification.
Standard Initial definition. Implemented in JavaScript 1.0.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
blockChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support

참고

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, daehyoung
최종 변경자: mdnwebdocs-bot,