1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
title: block
slug: Web/JavaScript/Reference/Statements/block
tags:
- JavaScript
- Language feature
- Reference
- Statement
browser-compat: javascript.statements.block
translation_of: Web/JavaScript/Reference/Statements/block
---
<div>{{jsSidebar("Statements")}}</div>
<p><strong>블록문</strong>(또는 다른 언어에서는 복합문)은 0개 이상의 구문을 묶을 때 사용합니다.
블록은 한 쌍의 중괄호로 구성하며 선택적으로 {{jsxref("Statements/label", "레이블",
"", 1)}}을 붙일 수 있습니다.</p>
<div>{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}}</div>
<h2 id="Syntax">문법</h2>
<h3 id="Block_Statement">블록문</h3>
<pre class="brush: js">{
<em>StatementList</em>
}
</pre>
<h3 id="Labelled_Block_Statement">레이블된 블록문</h3>
<pre class="brush: js"><em>LabelIdentifier</em>: {
<em>StatementList</em>
}
</pre>
<dl>
<dt><code>StatementList</code></dt>
<dd>블록문 내의 구문.</dd>
<dt><code>LabelIdentifier</code></dt>
<dd>시각적인 구분, 또는 {{jsxref("Statements/break", "break")}}문의 대상으로 쓸 {{jsxref("Statements/label", "label", "", 1)}}.</dd>
</dl>
<h2 id="Description">설명</h2>
<p>다른 언어에서 블록문은 <strong>복합문</strong>이라고 부르기도 합니다. 블록문을 쓰면 JavaScript가 하나의 문을 기대하는 곳에서 다수의 문을 실행할 수
있습니다. JavaScript에서 이렇게 문을 묶는건 흔히 쓰이는 기법입니다. 반대 개념으로는 <a href="/ko/docs/Web/JavaScript/Reference/Statements/Empty">
공백문</a>이 있으며, 이는 하나의 구문을 기대하는 곳에 아무것도 제공하지 않는 것입니다.</p>
<p>블록문은 흔히 {{jsxref("Statements/if...else", "if...else")}}과 {{jsxref("Statements/for", "for")}}문 관련해서 사용됩니다.</p>
<h2 id="Examples">예제</h2>
<h3 id="Block_scoping_rules_with_var_or_function_declaration_in_non-strict_mode">
엄격하지 않은 모드에서 변수 또는 함수 선언의 블록 범위 규칙</h3>
<h4 id="var_사용_시"><code>var</code> 사용 시</h4>
<p>{{jsxref("Statements/var", "var")}}로 선언한 변수는 블록 범위를 <strong>가지지 않습니다</strong>.
블록 내에서 선언한 변수의 범위는 함수나 스크립트가 되어, 값 할당의 영향이 블록 바깥까지 미칩니다.
다른 말로는 블록문이 범위를 만들지 않습니다.
"독립" 블록문도 유효한 구문이긴 하지만, C와 Java의 블록에 기대하는걸 JavaScript에서도 기대하면 안됩니다.
예를 들어보겠습니다.</p>
<p>엄격하지 않은 모드에서 <code>var</code>로 선언한 변수 혹은 <a
href="/ko/docs/Web/JavaScript/Reference/Statements/function">함수 선언</a>에 의해 생성된 변수는 블록 범위를 <strong>가지지 않습니다</strong>.
블록 내에서 선언한 변수는 이 변수를 포함한 함수나 스크립트까지 범위가 지정되며, 변수의 설정 효과는 블록을 넘어서도 지속됩니다. 즉, 블록문에 범위가 도입되지 않습니다. 예:</p>
<pre class="brush: js example-bad">var x = 1;
{
var x = 2;
}
console.log(x); // 콘솔에 2를 출력합니다</pre>
<p>콘솔 출력 결과는 2입니다. 블록 안의 <code>var x</code>과 블록 앞의 <code>var x</code> 문과 동일한 범위에 있기 때문입니다.</p>
<p>엄격하지 않은 코드에서는, 블록 내부의 함수 선언이 이상하게 동작합니다. 사용하지 마십시오.</p>
<h4 id="Block_scoping_rules_with_let_const_or_function_declaration_in_strict_mode">
엄격 모드에서 let, const 혹은 함수 선언의 범위 규칙
</h4>
<p>반면 {{jsxref("Statements/let", "let")}}과 {{jsxref("Statements/const", "const")}}로 선언한 식별자는 블록 범위를 <strong>가집니다</strong>.</p>
<pre class="brush: js">let x = 1;
{
let x = 2;
}
console.log(x); // 1이 콘솔에 찍힙니다.
</pre>
<p><code>x = 2</code>는 선언한 블록으로 범위가 제한됩니다.</p>
<p><code>const</code>도 마찬가지입니다.</p>
<pre class="brush: js">const c = 1;
{
const c = 2;
}
console.log(c); // 1이 콘솔에 찍히며, SyntaxError 예외가 발생하지 않습니다.</pre>
<p>블록 내의 <code>const c = 2</code>가 <code>SyntaxError: Identifier 'c' has already been declared</code>를 던지지 않는 점에 주목하세요. 블록
범위 안이라 별개의 식별자이기 때문입니다.</p>
<p>ES2015의 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>부터, 블록 내의 함수는 해당 블록으로 범위가 제한됩니다. ES2015 이전의
엄격 모드에서는 블록 레벨 함수를 사용할 수 없었습니다.</p>
<h2 id="Specifications">명세</h2>
{{Specifications}}
<h2 id="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat}}</p>
<h2 id="See_also">같이 보기</h2>
<ul>
<li>{{jsxref("Statements/while", "while")}}</li>
<li>{{jsxref("Statements/if...else", "if...else")}}</li>
<li>{{jsxref("Statements/let", "let")}}</li>
</ul>
|
