path: root/files/ko/web/javascript/reference/statements/label/index.html

---
title: label
slug: Web/JavaScript/Reference/Statements/label
translation_of: Web/JavaScript/Reference/Statements/label
---
<div>{{jsSidebar("Statements")}}</div>

<p><strong>레이블 구문</strong>은 {{jsxref("Statements/break", "break")}}나 {{jsxref("Statements/continue", "continue")}} 구문과 함께 사용할 수 있다. 원하는 식별자로 구문 앞에 레이블을 추가할 수 있다.</p>

<div class="note">
<p>레이블을 붙인 반복문이나 블록가 자주 사용되는 것은 아니다. 반복문으로 점프하는 대신에 함수를 호출할 수도 있다.</p>
</div>

<h2 id="문법">문법</h2>

<pre class="syntaxbox"><em>label</em> :
   <em>statement</em>
</pre>

<dl>
 <dt><code>label</code></dt>
 <dd>자바스크립트에서 사용할 수 있는 식별자면 모두 가능하다.</dd>
 <dt><code>statement</code></dt>
 <dd>구문. break는 모든 레이블 구문에서 사용될 수 있으며, continue는 반복 레이블 구문에서만 사용할 수 있다.</dd>
</dl>

<h2 id="설명">설명</h2>

<p>반복문에 레이블을 붙이고, break나 continue 구문을 사용해 반복문의 어느 위치에서 작업을 멈추고 어느 위치에서 다시 수행할지를 알려줄 수 있다.</p>

<p>자바스크립트에는 goto 구문이 없다는 것에 주의. break나 continue에서만 레이블을 사용할 수 있다.</p>

<p><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>  코드에서 "let"을 레이블 이름으로 사용할 수 없다. {{jsxref("SyntaxError")}}를 발생시킨다. (let은 허용되지 않는 식별자이다.)</p>

<h2 id="예제">예제</h2>

<h3 id="for문에서_레이블_continue_사용하기">for문에서 레이블 continue 사용하기</h3>

<pre class="brush: js">var i, j;

loop1:
for (i = 0; i &lt; 3; i++) {      //첫번째 for문은 "loop1" 레이블을 붙였다.
   loop2:
   for (j = 0; j &lt; 3; j++) {   //두번째 for문은 "loop2" 레이블을 붙였다.
      if (i === 1 &amp;&amp; j === 1) {
         continue loop1;
      }
      console.log('i = ' + i + ', j = ' + j);
   }
}

// 출력 결과:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"
// 다음 두 경우를 어떻게 스킵하는지 주목 : "i = 1, j = 1", "i = 1, j = 2"
</pre>

<h3 id="레이블_continue문_사용하기">레이블 continue문 사용하기</h3>

<p>items, tests 배열을 보면 이 예제는 tests를 통과하는 items의 수를 세고 있다.</p>

<pre class="brush: js">var itemsPassed = 0;
var i, j;

top:
for (i = 0; i &lt; items.length; i++) {
  for (j = 0; j &lt; tests.length; j++) {
    if (!tests[j].pass(items[i])) {
      continue top;
    }
  }

  itemsPassed++;
}</pre>

<h3 id="for문에_레이블_break문_사용하기">for문에 레이블 break문 사용하기</h3>

<pre class="brush: js">var i, j;

loop1:
for (i = 0; i &lt; 3; i++) {      //The first for statement is labeled "loop1"
   loop2:
   for (j = 0; j &lt; 3; j++) {   //The second for statement is labeled "loop2"
      if (i === 1 &amp;&amp; j === 1) {
         break loop1;
      }
      console.log('i = ' + i + ', j = ' + j);
   }
}

// Output is:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
// Notice the difference with the previous continue example</pre>

<h3 id="레이블_break문_사용하기">레이블 break문 사용하기</h3>

<p>items, tests 배열을 보면, 다음 예제는 items가 tests를 모두 통과하는지 판단한다.</p>

<pre class="brush: js">var allPass = true;
var i, j;

top:
for (i = 0; items.length; i++)
  for (j = 0; j &lt; tests.length; i++)
    if (!tests[j].pass(items[i])) {
      allPass = false;
      break top;
    }</pre>

<h3 id="레이블_붙인_블록에_break_사용하기">레이블 붙인 블록에 break 사용하기</h3>

<p>간단한 블록에도 레이블을 사용할 수 있지만, 반복문 아닌 레이블에는 break문만 사용할 수 있다.</p>

<pre class="brush: js">foo: {
  console.log('face');
  break foo;
  console.log('this will not be executed');
}
console.log('swap');

// 로그는 이렇게 출력된다:

// "face"
// "swap </pre>

<h3 id="레이블_붙인_함수_선언문">레이블 붙인 함수 선언문</h3>

<p>ECMAScript 2015에서, 레이블 붙인 함수 선언문은 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">web compatibility annex of the specification</a>의 non-strict 모드에서 표준화되어 있다.</p>

<pre class="brush: js">L: function F() {}</pre>

<p><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>  에서는 {{jsxref("SyntaxError")}}를 발생시킨다.</p>

<pre class="brush: js">'use strict';
L: function F() {}
// SyntaxError: functions cannot be labelled</pre>

<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generator functions</a>는 strict code도 non-strict code에서도 레이블 붙일 수 없다.</p>

<pre class="brush: js">L: function* F() {}
// SyntaxError: generator functions cannot be labelled
</pre>

<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('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.2</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="더_알아보기">더 알아보기</h2>

<ul>
 <li>{{jsxref("Statements/break", "break")}}</li>
 <li>{{jsxref("Statements/continue", "continue")}}</li>
</ul>