aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/javascript/reference/statements/block/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/javascript/reference/statements/block/index.html')
-rw-r--r--files/ko/web/javascript/reference/statements/block/index.html132
1 files changed, 132 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/statements/block/index.html b/files/ko/web/javascript/reference/statements/block/index.html
new file mode 100644
index 0000000000..aab5d0dc3f
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/block/index.html
@@ -0,0 +1,132 @@
+---
+title: block
+slug: Web/JavaScript/Reference/Statements/block
+tags:
+ - JavaScript
+ - Reference
+ - Statement
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>블록문</strong>(또는 다른 언어에서는 복합문)은 0개 이상의 구문을 묶을 때 사용합니다. 블록은 한 쌍의 중괄호로 구성하며 선택적으로 {{jsxref("Statements/label", "이름", "", 0)}}을 붙일 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<h3 id="블록문">블록문</h3>
+
+<pre class="syntaxbox">{
+ <em>StatementList</em>
+}</pre>
+
+<h3 id="유명_블록문">유명 블록문</h3>
+
+<pre class="syntaxbox"><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")}}.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>다른 언어에서 블록문은 <strong>복합문</strong>이라고 부르기도 합니다. 블록문을 쓰면 JavaScript가 하나의 문을 기대하는 곳에서 다수의 문을 실행할 수 있습니다. JavaScript에서 이렇게 문을 묶는건 흔히 쓰이는 기법입니다. 반대 개념으로는 {{jsxref("Statements/empty", "공백문", "", 0)}}이 있으며, 이는 하나의 문을 기대하는 곳에 아무것도 제공하지 않는 것입니다.</p>
+
+<h3 id="블록_범위_규칙">블록 범위 규칙</h3>
+
+<h4 id="var_사용_시"><code>var</code> 사용 시</h4>
+
+<p>{{jsxref("Statements/var", "var")}}로 선언한 변수는 블록 범위를 <strong>가지지 않습니다</strong>. 블록 내에서 선언한 변수의 범위는 함수나 스크립트가 되어, 값 할당의 영향이 블록 바깥까지 미칩니다. 다른 말로는 블록문이 범위를 만들지 않습니다. "독립" 블록문도 유효한 구문이긴 하지만, C와 Java의 블록에 기대하는걸 JavaScript에서도 기대하면 안됩니다. 예를 들어보겠습니다.</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>는 같은 범위에 속하기 때문입니다. C나 Java에서 같은 코드를 작성한다면 1을 출력할 것입니다.</p>
+
+<h4 id="let과_const_사용_시"><code>let</code>과 <code>const</code> 사용 시</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="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.0.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.block")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/if...else", "if...else")}}</li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+</ul>