diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/javascript/reference/statements/label | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/javascript/reference/statements/label')
-rw-r--r-- | files/ko/web/javascript/reference/statements/label/index.html | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/statements/label/index.html b/files/ko/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..49d6054031 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/label/index.html @@ -0,0 +1,241 @@ +--- +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 < 3; i++) { //첫번째 for문은 "loop1" 레이블을 붙였다. + loop2: + for (j = 0; j < 3; j++) { //두번째 for문은 "loop2" 레이블을 붙였다. + if (i === 1 && 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 < items.length; i++) { + for (j = 0; j < 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 < 3; i++) { //The first for statement is labeled "loop1" + loop2: + for (j = 0; j < 3; j++) { //The second for statement is labeled "loop2" + if (i === 1 && 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 < 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> |