initial commit

1 files changed, 332 insertions, 0 deletions

diff --git a/files/ko/web/javascript/guide/loops_and_iteration/index.html b/files/ko/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..4b0ac738b6
--- /dev/null
+++ b/files/ko/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,332 @@
+---
+title: 루프와 반복
+slug: Web/JavaScript/Guide/Loops_and_iteration
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">루프는 어떤 것을 반복적으로 시행할때 빠르고 간편한 방법을 제공합니다. <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>의 이 항목은 JavaScript 에서 사용이 가능한 서로 다른 여러가지 반복문을 소개합니다.</p>
+
+<p>반복문을 게임의 컴퓨터화된 버전이라고 생각해 보세요. 누군가에게 한 방향으로 X만큼 가게 시키고 다른 방향으로 Y만큼 더 가게 한다고 생각해 보십시오. 예를들어, "동쪽으로 5만큼 가세요"는 다음과 같이 반복문으로 표현 될 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var step;
+for (step = 0; step &lt; 5; step++) {
+  // Runs 5 times, with values of step 0 through 4.
+  console.log('Walking east one step');
+}
+</pre>
+
+<p>반복문은 매우 다양한 종류가 있습니다. 하지만 반복문이 기본적으로 하는일은 모두 같습니다. 반복문은 한 동작을 여러 번 반복합니다. (사실 0회 반복하는 것도 가능합니다.) 다양한 반복문 메커니즘은 다양한 방법으로 반복문의 시작점과 끝나는 점을 정할 수 있습니다.</p>
+
+<p>자바스크립트가 지원하는 반복문은 다음과 같습니다:</p>
+
+<ul>
+ <li>{{anch("for 문")}}</li>
+ <li>{{anch("do...while 문")}}</li>
+ <li>{{anch("while 문")}}</li>
+ <li>{{anch("레이블 문")}}</li>
+ <li>{{anch("break 문")}}</li>
+ <li>{{anch("continue 문")}}</li>
+ <li>{{anch("for...in 문")}}</li>
+ <li>{{anch("for...of 문")}}</li>
+</ul>
+
+<h2 id="for_문"><code>for</code> 문</h2>
+
+<p>for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복합니다. 자바스크립트의 반복문은 C의 반복문과 비슷합니다. for 반복문은 다음과 같습니다.</p>
+
+<pre class="syntaxbox notranslate">for ([초기문]; [조건문]; [증감문])
+  문장
+</pre>
+
+<p>for문이 실행될 때, 다음과 같이 실행됩니다.:</p>
+
+<ol>
+ <li>초기화 구문인 초기문이 존재한다면 초기문이 실행됩니다. 이 표현은 보통 1이나 반복문 카운터로 초기 설정이 됩니다. 그러나 복잡한 구문으로 표현 될 때도 있습니다. 또한 변수로 선언 되기도 합니다.</li>
+ <li>조건문은 조건을 검사합니다. 만약 조건문이 참이라면, 그 반복문은 실행됩니다. 만약 조건문이 거짓이라면, 그 for문은 종결됩니다. 만약 그 조건문이 생략된다면, 그 조건문은 참으로 추정됩니다.</li>
+ <li>문장이 실행됩니다. 많은 문장을 실행할 경우엔, { } 를 써서 문장들을 묶어 줍니다.</li>
+ <li>갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아갑니다.</li>
+</ol>
+
+<h3 id="예시"><strong>예시</strong></h3>
+
+<p>다음 함수는 스크롤링 목록(다중 선택을 허용하는 요소 {{HTMLElement("select")}}). 에서 선택된 옵션들을 세는 for문 입니다. 이 for문은 변수 i 를 선언하고 0으로 초기화 시킵니다. 이것은 i 가  &lt;select&gt; 요소 안의 옵션 수가 i 보다 작은지 확인 합니다. 다음의 if문을 수행하고 각 루프를 빠져나간 뒤 i 를 1 증가시킵니다.</p>
+
+<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="do...while_문"><code>do...while</code> 문</h2>
+
+<p>do...while 문은 특정한 조건이 거짓으로 판별될 때까지 반복합니다. do...while 문은 다음과 같습니다.</p>
+
+<pre class="syntaxbox notranslate">do
+  문장
+while (조건문);
+</pre>
+
+<p><code>조건문을 확인하기 전에 문장은 한번 실행됩니다. 많은 문장을 실행하기 위해선 { }를 써서 문장들을 묶어줍니다. 만약 조건이 참이라면, 그 문장은 다시 실행됩니다. 매 실행 마지막마다 조건문이 확인됩니다. 만약 조건문이 거짓일 경우, 실행을 멈추고 do...while 문 바로 아래에 있는 문장으로 넘어가게 합니다.</code></p>
+
+<h3 id="예시_2"><strong>예시</strong></h3>
+
+<p>다음 예제에서, do 반복문은 최소 한번은 반복됩니다. 그리고 i 가 5보다 작지 않을 때까지 계속 반복됩니다.</p>
+
+<pre class="brush: js notranslate">do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="while_문"><code>while</code> 문</h2>
+
+<p>while 문은 어떤 조건문이 참이기만 하면 문장을 계속해서 수행합니다. while 문은 다음과 같습니다.</p>
+
+<pre class="syntaxbox notranslate">while (조건문)
+  문장
+</pre>
+
+<p>만약 조건문이 거짓이 된다면, 그 반복문 안의 문장은 실행을 멈추고 반복문 바로 다음의 문장으로 넘어갑니다.</p>
+
+<p>조건문은 반복문 안의 문장이 실행되기 전에 확인 됩니다. 만약 조건문이 참으로 리턴된다면, 문장은 실행되고 그 조건문은 다시 판별됩니다. 만약 조건문이 거짓으로 리턴된다면, 실행을 멈추고 while문 바로 다음의 문장으로 넘어가게 됩니다.</p>
+
+<p>많은 문장들을 실행하기 위해선, { }를 써서 문장들을 묶어줍니다.</p>
+
+<h3 id="예시_1"><strong>예시 1</strong></h3>
+
+<p>다음 while 반복문은 n이 3보다 작은 한, 계속 반복됩니다.</p>
+
+<pre class="brush: js notranslate">n = 0;
+x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>매 반복과 함께, n이 증가하고 x에 더해집니다. 그러므로, x와 n은 다음과 같은 값을 갖습니다.</p>
+
+<ul>
+ <li>첫번째 경과 후: <code>n</code> = 1 and <code>x</code> = 1</li>
+ <li>두번째 경과 후: <code>n</code> = 2 and <code>x</code> = 3</li>
+ <li>세번째 경과 후: <code>n</code> = 3 and <code>x</code> = 6</li>
+</ul>
+
+<p>세번째 경과 후에, n &lt; 3 은 더이상 참이 아니므로, 반복문은 종결됩니다.</p>
+
+<h3 id="예시_2_2"><strong>예시 2</strong></h3>
+
+<p>조건문은 항상 거짓이 될지라도 무한 루프는 피해야 합니다. 그렇지 않으면 그 반복문은 영원히 끝나지 않을 것입니다. 아래의 while 문은 조건문이 절대 거짓이 될 수 없으므로 영원히 반복될 것입니다.</p>
+
+<pre class="brush: js notranslate">// 다음과 같은 코드는 피하세요.
+while (true) {
+  console.log("Hello, world");
+}</pre>
+
+<h2 id="레이블_문">레이블 문</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">레이블</a>은 여러분이 프로그램에서 다른 곳으로 참조할 수 있도록 식별자로 문을 제공합니다. 예를 들어, 여러분은 루프를 식별하기 위해 레이블을 사용하고, 프로그램이 루프를 방해하거나 실행을 계속할지 여부를 나타내기 위해 break나 continue 문을 사용할 수 있습니다.</p>
+
+<p>레이블 문의 구문은 다음과 같습니다:</p>
+
+<pre class="syntaxbox notranslate">label :
+   statement
+</pre>
+
+<p><em><font face="Consolas">레이블</font></em>  값은 예약어가 아닌 임의의 JavaScript 식별자일 수 있습니다. 여러분이 레이블을 가지고 식별하는 <em><font face="Consolas">문</font></em>은 어떠한 문이 될 수 있습니다.</p>
+
+<h3 id="예시_3"><strong>예시</strong></h3>
+
+<p>이 예에서, 레이블 markLoop는 while 루프를 식별합니다.</p>
+
+<pre class="brush: js notranslate">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break_문"><code>break</code> 문</h2>
+
+<p>break문은 반복문, switch문, 레이블 문과 결합한 문장을 빠져나올  때 사용합니다.</p>
+
+<ul>
+ <li>레이블 없이 break문을 쓸 때: 가장 가까운 <code>while</code>, <code>do-while</code>, <code>for</code>, 또는 <code>switch</code>문을 종료하고 다음 명령어로 넘어갑니다.</li>
+ <li>레이블 문을 쓸 때: 특정 레이블 문에서 끝납니다.</li>
+</ul>
+
+<p>break문의 문법은 다음과 같습니다.</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>[레이블]</em>;</code></li>
+</ol>
+
+<p>break문의 첫번째 형식은 가장 안쪽의 반복문이나 switch문을 빠져나옵니다. 두번째 형식는 특정한 레이블 문을 빠져나옵니다.</p>
+
+<h3 id="예시_1_2"><strong>예시</strong> <strong>1</strong></h3>
+
+<p>다음 예</p>
+
+<pre class="brush: js notranslate">for (i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="예시_2_Breaking_to_a_label"><strong>예시 2: </strong>Breaking to a label</h3>
+
+<pre class="brush: js notranslate">var x = 0;
+var z = 0
+labelCancelLoops: while (true) {
+  console.log("Outer loops: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Inner loops: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue_문">continue 문</h2>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> 문은 while, do-while, for, 레이블 문을 다시 시작하기 위해 사용될 수 있습니다.</p>
+
+<ul>
+ <li>레이블없이 continue를 사용하는 경우, 그것은 가장 안쪽의 while, do-while, for 문을 둘러싼 현재 반복을 종료하고, 다음 반복으로 루프의 실행을 계속합니다. <font face="Consolas">break</font>문과 달리, continue 문은 전체 루프의 실행을 종료하지 않습니다. while 루프에서 그것은 다시 조건으로 이동합니다. for 루프에서 그것은 증가 표현으로 이동합니다.</li>
+ <li>레이블과 함께 continue를 사용하는 경우, continue는 그 레이블로 식별되는 루프 문에 적용됩니다.</li>
+</ul>
+
+<p>continue 문의 구문은 다음과 같습니다:</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue </code><em><code>label;</code></em></li>
+</ol>
+
+<h3 id="예시_1_3"><strong>예시 1</strong></h3>
+
+<p>다음의 예는 i 값이 3일 때 실행하는 continue 문과 함께 while 루프를 보여줍니다. 따라서, n은 값 1, 3, 7, 12를 취합니다.</p>
+
+<pre class="brush: js notranslate">i = 0;
+n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="예시_2_3"><strong>예시 2</strong></h3>
+
+<p>checkiandj 레이블 문은 checkj 레이블 문을 포함합니다. continue가 발생하는 경우, 프로그램은 checkj의 현재 반복을 종료하고, 다음 반복을 시작합니다. 그 조건이 false를 반환 할 때까지 continue가 발생할 때마다, checkj는 반복합니다. false가 반환될 때, checkiandj 문의 나머지 부분은 완료되고, 그 조건이 false를 반환 할 때까지 checkiandj는 반복합니다. false가 반환될 때, 이 프로그램은 다음 checkiandj 문에서 계속됩니다.</p>
+
+<p>continue가 checkiandj의 레이블을 가지고 있다면, 프로그램은 checkiandj 문 상단에서 계속될 것입니다.</p>
+
+<pre class="brush: js notranslate">checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + " is odd.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }</pre>
+
+<h2 id="for...in_문"><code>for...in</code> 문</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>  문은 객체의 열거 속성을 통해 지정된 변수를 반복합니다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행합니다. for...in 문은 다음과 같습니다:</p>
+
+<pre class="syntaxbox notranslate">for (variable in object) {
+  statements
+}
+</pre>
+
+<h3 id="예시_4"><strong>예시</strong></h3>
+
+<p>다음 함수는 객체와 객체의 이름을 함수의 인수로 취합니다. 그런 다음 모든 객체의 속성을 반복하고 속성 이름과 값을 나열하는 문자열을 반환합니다.</p>
+
+<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>속성 make와 model을 가진 객체 car의 경우, 결과는 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="배열"><strong>배열</strong></h3>
+
+<p>{{jsxref("배열")}} 요소를 반복하는 방법으로 이를 사용하도록 유도될 수 있지만, <strong>for...in</strong> 문은 숫자 인덱스에 추가하여 사용자 정의 속성의 이름을 반환합니다. 따라서 만약 여러분이 사용자 정의 속성 또는 메서드를 추가하는 등 Array 객체를 수정한다면, 배열 요소 이외에도 사용자 정의 속성을 통해 <strong>for...in</strong> 문을 반복하기 때문에, 배열을 통해 반복할 때 숫자 인덱스와 전통적인 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> 루프를 사용하는 것이 좋습니다.</p>
+
+<h2 id="for...of_문"><code>for...of</code> 문</h2>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">반복 가능한 객체</a>({{jsxref("배열")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">인수</a> 객체 등을 포함)를 통해 반복하는 루프를 만듭니다.</p>
+
+<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>object</em>) {
+  <em>statement
+</em>}</pre>
+
+<p>다음 예는 for...of 루프와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> 루프의 차이를 보여줍니다. 속성 이름을 통해 for...in이 반복하는 동안, for...of은 속성 값을 통해 반복합니다:</p>
+
+<pre class="brush:js notranslate">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>