[ko] Work done for 'Looping codes', 'Test your skills: loops' article. (#1089)

* Work done for 'Looping codes' article.

* Work done for 'Test your skills: loops' article.

* Update translational tone problem.

Why bother? 부분 수정 제안

Co-authored-by: nKiNk <39448774+nKiNk@users.noreply.github.com>

* Update translational tone problem.

Keep me in the loop 부분

Co-authored-by: nKiNk <39448774+nKiNk@users.noreply.github.com>

Co-authored-by: nKiNk <39448774+nKiNk@users.noreply.github.com>

2 files changed, 252 insertions, 157 deletions

diff --git a/files/ko/learn/javascript/building_blocks/looping_code/index.html b/files/ko/learn/javascript/building_blocks/looping_code/index.html
index e95a78af37..86c1d5e1bf 100644
--- a/files/ko/learn/javascript/building_blocks/looping_code/index.html
+++ b/files/ko/learn/javascript/building_blocks/looping_code/index.html
@@ -1,5 +1,5 @@
 ---
-title: Looping code
+title: 반복문
 slug: Learn/JavaScript/Building_blocks/Looping_code
 tags:
   - for문
@@ -9,61 +9,61 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code
 ---
 <div>{{LearnSidebar}}</div>
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/조건문", "Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals", "Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
 
-<p class="summary">프로그래밍 언어는 다양한 작업을 통해 반복적 인 작업을 신속하게 처리 할 수 ​​있습니다. 이제 우리는 JavaScript를 사용하여 반복 구문을 사용하여 편리하게 처리 할 수 ​​있습니다. </p>
+<p class="summary">다수의 기본적인 계산에서부터 완료해야 할 비슷한 작업들을 가지고 있는 상황들에 대해서까지, 프로그래밍 언어는 반복적인 작업을 빠르게 완료하는 데 대단히 유용합니다. 여기서 우리는 그러한 필요를 다루는 자바스크립트에서 이용 가능한 반복문 구조를 살펴볼 것입니다.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
    <th scope="row">선수 과목 :</th>
-   <td>기본적인 컴퓨터 활용 능력, HTML과 CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">자바 스크립트</a> 의 기본 이해 .</td>
+   <td>기본적인 컴퓨터 활용 능력, HTML과 CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript</a>의 기본 이해.</td>
   </tr>
   <tr>
    <th scope="row">목표:</th>
-   <td>JavaScript에서 루프를 사용하는 방법을 이해합니다.</td>
+   <td>JavaScript에서 반복문(loop)을 사용하는 방법을 이해합니다.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="나를_계속_붙잡아_라.">나를 계속 붙잡아 라.</h2>
+<h2 id="Keep_me_in_the_loop">저를 반복 속에 계속 잡아 두세요</h2>
 
-<p>반복(loop), 반복 반복. <a href="https://en.wikipedia.org/wiki/Froot_Loops">popular breakfast cereals</a>, <a href="https://en.wikipedia.org/wiki/Vertical_loop">roller coasters</a> 그리고 <a href="https://en.wikipedia.org/wiki/Loop_(music)">musical production</a>과 같이, 그것들은 프로그래밍의 중요한 개념이다. 프로그래밍 loop는 반복적으로 동일한 작업을 반복하는것이고 이런것들을 프로그래밍 언어로 loop라 한다.</p>
+<p>반복, 반복, 반복(loop). <a href="https://en.wikipedia.org/wiki/Froot_Loops">인기있는 아침 시리얼</a>, <a href="https://en.wikipedia.org/wiki/Vertical_loop">롤러 코스터</a> 그리고 <a href="https://en.wikipedia.org/wiki/Loop_(music)">음악 제작</a>과 연관되어 있는 것처럼, 반복은 또한 프로그래밍에서 중요한 개념입니다. 프로그래밍의 반복은 같은 것을 계속 그리고 계속 반복해서 하는 것에 모든 관계가 있는데, 이는 프로그래밍 언어에서 <strong>반복</strong>(iteration)이라고 일컫어집니다.</p>
 
-<p>가족들이 일주일동안 먹을 식량이 충분한지 확신하기 위해 고민하는 농부의 상황을 보자. 그는 이것을 알기위해 다음과 같은 loop를 취할수 있다:</p>
+<p>가족들이 일주일동안 먹을 식량이 충분한지 확신하기 위해 고민하는 농부의 상황을 봅시다. 그는 이것을 알기 위해 다음과 같은 반복을 사용할지도 모릅니다:</p>
 
 <p><br>
  <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
 
-<p>이 loop에서 다음과 같이 우리는 한가지 이상의 기능을 가질수 있다:</p>
+<p>반복은 보통 다음 기능의 하나 또는 그 이상을 가집니다:</p>
 
 <ul>
- <li><strong>counter</strong>은 특정 값으로 초기화된다  — loop의 시작점이다. ("시작: I have no food", 위 그림을 참고).</li>
- <li><strong>exit condition</strong>는 loop가 멈추는 기준이 되는 종료 조건 — 보통 counter가 특정 값에 도달하면 멈추게된다. 이것은 위에서 "Have I got enough food?"라고 설명되어 있다. 가족에게 먹일 음식 10개가 필요하다고 가정 해 보자.</li>
- <li><strong>iterator</strong>는 끝나는 조건에 도달 할 때까지 일반적으로 counter를 각각의 연속된 루프에서 조금 씩 증가시킨다. 우리는 위에 명시적으로 설명하지 않았지만, 농부가 시간 당 음식을 2개씩 수집 할 수 있다고 생각할 수 있다. 매시간 후, 그가 모은 음식의 양은 2개씩 증가하고, 그는 음식이 충분한 지 여부를 확인한다. 그가 10개(종료 조건)에 도달하면, 그는 수집을 중지하고 집에 갈수 있다.</li>
+ <li><strong>카운터</strong>(counter). 이는 어떤 값으로 초기화됩니다  — 이것이 반복문의 시작점입니다 (상기의 그림에서, "시작: I have no food").</li>
+ <li><strong>조건</strong>(condition). 이는 반복문이 계속 실행될지, 혹은 멈출지를 결정하는 true/false 테스트입니다 — 보통 카운터가 어떤 값에 도달했을 때입니다. 이것은 상기 그림의 "Have I got enough food?" 부분에 나와 있습니다. 그가 가족에게 먹일 10인분의 음식이 필요하다고 해 봅시다.</li>
+ <li><strong>반복자</strong>(iterator). 이는 보통 조건이 더 이상 true가 아닐 때까지 각각의 연이은 반복에서 조금씩 카운터를 증가시킵니다. 우리는 위의 그림에서 명시적으로 이를 보이지 않았지만, 농부가 시간당 2인분의 음식을 수집한다고 생각해 볼 수 있습니다. 매 시간 후마다, 그가 모은 음식의 양은 2인분씩 증가되고, 그는 충분한 음식을 가지고 있는지 확인합니다. 만약 그가 10인분에 도달했다면 (조건이 더 이상 참이 아닌 지점, 따라서 반복은 종료됩니다), 그는 수집을 멈추고 집에 갈 수 있습니다.</li>
 </ul>
 
-<p>{{glossary("pseudocode")}}에서 이것은 다음과 같아 보일 것이다.:</p>
+<p>의사 코드({{glossary("pseudocode")}})에서 이것은 다음과 같이 보일 것입니다:</p>
 
 <pre class="notranslate">loop(food = 0; foodNeeded = 10) {
   if (food = foodNeeded) {
     exit loop;
-    // We have enough food; let's go home
+    // 우리는 충분한 음식을 가지고 있다; 집에 돌아가자
   } else {
-    food += 2; // Spend an hour collecting 2 more food
-    // loop will then run again
+    food += 2; // 2인분을 더 모으기 위해 1시간을 소모한다
+    // 그리고 반복문은 다시 실행될 것입니다
   }
 }</pre>
 
-<p>따라서 필요한 음식의 양은 10으로 설하고, 현재 농부의 양은 0으로 설정한다. 매 반복마다 농부의 음식 양이 필요한 양과 같은지 확인한다. 필요한 양을 얻었다면 loop를 종료 할수 있다. 그렇지 않다면, 농부는 음식을 모을때까지 다시 반복해서 loop를 실행한다.</p>
+<p>따라서 필요한 음식의 양은 10으로 설정되어 있고, 현재 농부가 소지하고 있는 양은 0으로 설정되어 있습니다. 반복문의 각 반복에서, 우리는 농부가 가진 음식의 양이 그가 필요한 양보다 크거나 같은지 확인합니다. 만약 그렇다면, 우리는 반복문을 종료(exit)할 수 있습니다. 만약 그렇지 않다면, 농부는 2인분의 음식을 모으기 위해 한 시간을 보내고 반복문은 다시 실행됩니다.</p>
 
-<h3 id="왜_귀찮게">왜 귀찮게?</h3>
+<h3 id="Why_bother">왜 굳이?</h3>
 
-<p>여기에서 loop의 뒤에 있는 고급개념을 이해했을 것이다. 하지만 "그래 뭐 괜찮군 그래서 이 코드가 어떻게 도움이 될수 있는거지?"라고 생각할수도 있다. 앞서 말햇듯이 <strong>loop는 반복적인 작업을 빠르게 동일한 작업을 반복해서 수행해 완료하는 것이다.</strong></p>
+<p>이 시점에서, 당신은 아마도 반복문 뒤에 있는 고급 개념을 이해했을 것이지만, 당신은 아마도 "좋아, 훌륭하군, 하지만 어떻게 이게 내가 JavaScript 코드를 더 잘 짜게 도와준다는 거지?" 라고 생각할 것입니다. 앞서 말했듯이, <strong>반복문은 같은 것을 계속 그리고 계속 다시 하는 것에 모든 관련이 있는데</strong>, 이는 <strong>빠르게 반복적인 일을 완료</strong>하는 데 뛰어납니다.</p>
 
-<p>종종 코드는 각각의 연속적인 반복된 loop에서 조금씩 달라질수도 있다. 그래서 유사하지만 약간 다른 작업에 이것을 이용해 작업을 완료할수도 있다.만약 너가 여러가지 다른종류의 계산을 해야한다면, 반복해서 처리하는게 아닌 각각 계산하고 싶을것이다.</p>
+<p>종종, 코드는 반복문의 각각의 연이은 반복에서 조금 다를 것인데, 이는 당신이 비슷하지만 조금 다른 일더미를 완료할 수 있다는 것을 의미합니다; 만약 당신이 수행할 많은 다른 계산들을 가지고 있다면, 당신은 같은 것을 계속 그리고 계속 하는 것이 아니라, 각각의 다른 것을 하기를 원할 것입니다.</p>
 
-<p>Loop가 왜 그렇게 좋은지 완벽하게 설명하는 예제를 한번 보자. {{htmlelement("canvas")}}  element에 100개의 무작위 원을 그려야 한다고 가정해보자. (예제를 다시 실행하여 다른 임의의 세트를 보려면 Update 버튼을 클릭) :</p>
+<p>왜 반복문이 그렇게 좋은 것인지를 완벽히 보여주는 예제를 봅시다. 우리가 {{htmlelement("canvas")}} 요소 위에 무작위의 원 100개를 그리고 싶다고 칩시다 (예제를 다시 실행하고, 다시 다른 무작위 집합들을 보기 위해 <em>Update</em>버튼을 누르세요):</p>
 
 <div class="hidden">
 <h6 id="Hidden_code">Hidden code</h6>
@@ -137,7 +137,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code
 
 <p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
 
-<p>지금 당장은 모든 코드를 이해할 필요는 없지만 실제로100개의 원을 그리는 코드를 살펴보자:</p>
+<p>지금 당장은 모든 코드를 이해할 필요는 없지만, 실제로 100개의 원을 그리는 코드 부분을 살펴봅시다:</p>
 
 <pre class="brush: js notranslate">for (let i = 0; i &lt; 100; i++) {
   ctx.beginPath();
@@ -147,44 +147,44 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code
 }</pre>
 
 <ul>
- <li>코드의 앞부분에서 정의한<code>random()</code>은 <code>0</code> 그리고 <code>x-1</code>사이의 정수를 반환한다.</li>
- <li><code>WIDTH</code> 그리고 <code>HEIGHT</code> 는 내부 브라우저 윈도우의 너비와 높이이다.</li>
+ <li>코드의 앞부분에서 정의한 <code>random()</code>은, <code>0</code>과 <code>x-1</code>사이의 정수를 반환합니다.</li>
+ <li><code>WIDTH</code>와 <code>HEIGHT</code> 는 내부 브라우저 윈도우의 너비와 높이입니다.</li>
 </ul>
 
-<p>우리는 이 코드를 100번 반복하기 위해서 loop를 사용하고 있다. 너는 여기에서 기본적인 아이디어를 얻을수 있다. 코드는 페이지에서 임의의 위치에 원을 그린다. 코드의 크기가 100개가 되든 1000개가 되든 또는 10,000개가 되든간에 동일하게 작업을 수행할것이다. 너는 숫자만 변경하면된다.</p>
+<p>기본 개념을 잡아야만 합니다 — 우리는 이 코드의 100번의 반복(iteration)을 실행하기 위해 반복문을 사용하고 있는데, 각 반복은 페이지의 무작위의 위치에 원을 그립니다. 우리가 100개의 원을 그리든, 1000개의 원을 그리든, 혹은 10,000개의 원을 그리든 간에 필요한 코드의 양은 같을 것입니다. 오직 숫자 하나만 바뀌면 됩니다.</p>
 
-<p>만약 우리가 loop를 사용하지 않았다면 원을 그릴때마다 다음 코드를 반복해서 써야한다 :</p>
+<p>만약 우리가 여기서 반복문을 사용하지 않았다면, 우리가 그리고 싶은 모든 원에 대해 다음의 코드를 반복해야만 했을 것입니다:</p>
 
 <pre class="brush: js notranslate">ctx.beginPath();
 ctx.fillStyle = 'rgba(255,0,0,0.5)';
 ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
 ctx.fill();</pre>
 
-<p>이것은 겁나 지루하고 빠르게 유지하기 힘들것이다. 이럴때 loop를 사용하는게가장 좋다.</p>
+<p>이것은 몹시 지루하고 아주 빠르게 유지보수하기 힘들 것입니다. 반복문은 정말로 최고입니다.</p>
 
-<h2 id="루프의_표준">루프의 표준</h2>
+<h2 id="The_standard_for_loop">반복문의 표준</h2>
 
-<p>특정 loop 구문을 살펴보도록 하자. 대부분의 시간을 보낼 첫번째는 for loop이다. 이 구문은 다음과 같다:</p>
+<p>몇몇 특정한 반복문 구조 탐구를 시작해 봅시다. 당신이 대부분의 경우에 사용하게 될, 첫번째는 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문입니다. 이것은 다음의 문법(syntax)을 가지고 있습니다:</p>
 
-<pre class="notranslate">for (initializer; exit-condition; final-expression) {
-  // code to run
+<pre class="notranslate">for (초기화식; 종료 조건; 증감식) {
+  // 실행할 코드
 }</pre>
 
-<p>여기서 우리가 알수있는것:</p>
+<p>여기서 우리가 알 수 있는 것:</p>
 
 <ol>
- <li><code>for</code> 라는 키워드를 쓰고 그옆에 괄호를 만든다.</li>
- <li>괄호 안에는 세미콜론(;)으로 구분 된 세개의 항목이 있다.
+ <li>괄호가 뒤따라오는 키워드 <code>for</code>.</li>
+ <li>괄호 안에는, 세미콜론으로 구분되는, 세개의 항목이 있습니다:
   <ol>
-   <li><strong>initializer</strong> — 일반적으로 숫자로 설정된 변수이며 루프가 실행 된 횟수가 얼마나 되는제 되는지 알기위해 증가한다 그것을 <strong>counter variable</strong>라고 한다.</li>
-   <li><strong>exit-condition</strong> — 앞에서 언급했듯이 loop가 loop를 언제 멈출지 정의한다. 이 조건은 일반적으로 비교 연산자, 종료 조건이 충족되었는지 확인하는 테스트를 특징으로 하는 표현식이다.</li>
-   <li>A <strong>final-expression</strong> — 이것은 매번 loop 전체가 반복이 될때 항상 분석(또는 실행)한다. 일반적으로 <strong>counter variable</strong>를 증가(또는 경우에 따라 감소)하여 종료 조건 값으로 점점 가까워진다.</li>
+   <li><strong>초기화식</strong>(initializer) — 이것은 보통 숫자로 설정된 변수인데, 반복문이 실행될 횟수(count)까지 증가됩니다. 이것은 또한 때때로 <strong>카운터 변수</strong>(counter variable)라고도 불립니다.</li>
+   <li><strong>조건식</strong>(condition) — 전에 언급했듯이, 이것은 언제 반복문이 반복을 멈춰야만 하는지를 정의합니다. 이것은 일반적으로 비교 연산자(comparison operator)를 특징으로 하는 표현식(expression)인데, 이는 종료 조건이 충족되었는지를 확인하는 테스트입니다.</li>
+   <li><strong>증감식</strong>(final-expression) — 이것은 반복문이 전체 반복을 거쳤을 때마다 항상 평가(혹은 실행)됩니다. 이것은 보통 카운터 변수를 증가 (혹은 몇몇 경우에는 감소)시키기 위해, 조건이 더 이상 <code>true</code>가 아닌 지점에 가까워지게 하기 위해 제공됩니다.</li>
   </ol>
  </li>
- <li>코드 블럭을 감싸는 중괄호({}) — 중괄호 안에 있는 코드는 loop가 반복 될 때마다 실행된다.</li>
+ <li>코드 블럭을 감싸는 중괄호 — 이 코드는 반복문이 반복될 때마다 실행될 것입니다.</li>
 </ol>
 
-<p>실제 예제를 보면서 이러한 것들이 무엇을 더 확실하게 시각화 할 수 있는지 살펴보자.</p>
+<p>이것들이 무엇을 하는지를 더욱 확실하게 시각화할 수 있도록 실제 예제를 봅시다.</p>
 
 <pre class="brush: js notranslate">const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
 let info = 'My cats are called ';
@@ -196,7 +196,7 @@ for (let i = 0; i &lt; cats.length; i++) {
 
 para.textContent = info;</pre>
 
-<p>이것은 우리에게 다음과 같은 결과를 보여준다:</p>
+<p>이것은 우리에게 다음의 결과를 보여줍니다:</p>
 
 <div class="hidden">
 <h6 id="Hidden_code_2">Hidden code 2</h6>
@@ -235,39 +235,40 @@ para.textContent = info;</pre>
 <p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>
 
 <div class="note">
-<p><strong>Note</strong>: 너는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">example code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">see it running live</a>)에서 예제를 찾을수 있다.</p>
+<p><strong>Note</strong>: 당신은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">예제를 GitHub에서</a> 또한 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">see it running live</a>).</p>
 </div>
 
-<p>이것은 배열의 항목을 반복하는 데 사용되는 loop를 보여 주며 각각의 항목을 사용하여 JavaScript에서 매우 일반적인 패턴을 나타낸다:</p>
+<p>이것은 반복문이 배열 안의 요소들에 대해 반복하고 그 각각의 요소들과 무언가를 하기 위해 쓰였다는 것을 보여줍니다 — 이것은 JavaScript에서 아주 일반적인 패턴입니다. 여기서:</p>
 
 <ol>
- <li>iterator <code>i</code>는 <code>0</code>에서부터 시작한다 (<code>let i = 0</code>).</li>
- <li><code><font face="Arial, x-locale-body, sans-serif">cats의 배열의 길이보다 작을때 까지만 실행하라는 명령을 받았다. 이것은 중요하다. 종료 조건은 loop가 계속 실행되는 조건을 나타낸다. 따라서 이 경우에는 </font>i &lt; cats.length</code> 까지만 loop가 true여서 계속 실행된다.</li>
- <li>loop 안에서 현재 loop항목(<code>cats[i가 몇번 실행되었던지 간에</code> <code>cats[i]</code> 는)과 쉼표 및 공백을 <code>info</code>변수 끝에 위치한다:
+ <li>카운터 변수 (때때로 초기화식(initializer) 또는 반복 변수(iteration variable)으로도 알려져 있음) <code>i</code>는 <code>0</code>에서 시작합니다 (<code>let i = 0</code>).</li>
+ <li>반복문은 <code>i</code>가 더 이상 <code>cats</code> 배열의 길이(length)보다 작지 않을 때까지 실행되라는 명령을 받았습니다. 이것은 중요합니다 — 조건은 반복문이 여전히 실행되는 것 아래의 조건입니다. 그래서 이 경우, <code>i &lt; cats.length</code>가 여전히 true인 동안, 반복문은 계속 실행될 것입니다.</li>
+ <li>반복문 안에서, 우리는 콤마와 공백(space)과 같이 있는 현재 반복 요소(item) (<code>cats[이 때 i가 무엇이든]</code>인, <code>cats[i]</code>)를 <code>info</code> 변수의 끝에 연결시킵니다. 그래서:
   <ol>
-   <li>처음 실행되는 동안, <code>i = 0</code>, 이므로 <code>cats[0] + ', '</code> 는 info ("Bill, ")에 옆에 위치한다.</li>
-   <li>두번째로 실행되는 동안, <code>i = 1</code>, 이므로 <code>cats[1] + ', '</code> 역시 info ("Jeff, ")에 옆에 위치한다.</li>
-   <li>계속해서 loop가 실행될 때마다 1이 <code>i</code> (<code>i++</code>)에 추가되고, 프로세스가 다시 시작된다.</li>
+   <li>첫번째 실행 동안에, <code>i = 0</code>이므로, <code>cats[0] + ', '</code> (이는 <code>Bill, </code>과 같습니다)는 <code>info</code>에 연결될 것입니다.
+</li>
+   <li>두번째 실행 동안에, <code>i = 1</code>이므로, <code>cats[1] + ', '</code> (이는 <code>Jeff, </code>와 같습니다)는 <code>info</code>에 연결될 것입니다.</li>
+   <li>계속 이와 같습니다. 반복문이 실행 된 후마다, <code>i</code>에 1이 더해질 것이고 (<code>i++</code>), 이 과정(process)은 다시 실행될 것입니다.</li>
   </ol>
  </li>
- <li><code>i</code>의 값이  <code>cats.length</code>같아질때, loop는 멈추고, 브라우저는 loop 아래의 다음 코드로 넘어가게된다.</li>
+ <li><code>i</code>가 <code>cats.length</code>와 같아질 때 (이 경우, 5), 반복문은 멈출 것이고, 브라우저는 반복문 아래에 있는 다음 코드로 이동할 것입니다.</li>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>:  컴퓨터는 1이 아닌 0부터 계산하기 때문에 exit 조건을<code>i &lt;= cats.length</code>이 아닌 <code>i &lt; cats.length</code>로 설정했다. — 우리는  <code>i</code> 를 <code>0</code>에서 시작해서,  <code>i = 4</code> (배열의 마지막 index 항목)까지 실행한다. <code>cats.length</code> 는 5개의 항목을 가지고있어 5까지 반환하지만 우리는 <code>i = 5</code>까지의 값을 원하지 않으므로 마지막 항목은 <code>undefined</code>를 반환하게 된다.(그래서 index가 5인 배열 항목이 존재하지 않는다.)그러므로  <code>cats.length</code> (<code>i &lt;=</code>) 를 쓰지 않고 <code>cats.length</code> (<code>i &lt;</code>)로 만들었다.</p>
+<p><strong>Note</strong>: 우리는 조건을 <code>i &lt;= cats.length</code>이 아니라 <code>i &lt; cats.length</code>로 만들었는데, 이는 컴퓨터는 카운트를 1부터가 아니라 0부터 세기 때문입니다 — 우리는 <code>i</code>를 0에서 시작했고, <code>i = 4</code>까지 갔습니다 (마지막 배열 원소의 인덱스). 배열에 5개의 원소가 있으므로, <code>cats.length</code>는 5를 반환하지만, 우리는 <code>i = 5</code>까지 가고 싶지는 않습니다. 왜냐하면 이는 마지막 원소에 대해 <code>undefined</code>를 반환할 것이기 때문입니다 (5의 인덱스를 가진 배열 원소는 없습니다). 그래서, 그러므로, 우리는 <code>cats.length</code>과 같은 데까지가 아니라 (<code>i &lt;=</code>), <code>cats.length</code>보다 1 작은 데까지 가기를 원합니다 (<code>i &lt;</code>).</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: exit조건의 공통적인 실수는  "작거나 같다" (<code>&lt;=</code>)를 사용하는것보다  "동등"(<code>===</code>)을 사용하는것이다 . 만약 우리가 <code>i = 5</code>까지 loop를 사용한다면  exit 조건은 <code>i &lt;= cats.length</code>가 되어야 한다. 만약 우리가 <code>i === cats.length</code>로 설정한다면 그 loop는 전부를 실행하지 않을것이다 왜냐하면 <code>i</code>는 첫번째 loop에서 <code>5</code>와 같지 않기 때문에 작업이 즉시 중단된다. </p>
+<p><strong>Note</strong>: 조건에 관련된 일반적인 실수는 "보다 작거나 같다(less than or equal to)" (<code>&lt;=</code>)가 아니라 "동등(equal to)" (<code>===</code>)을 사용하는 것입니다. 만약 우리가 반복문을 <code>i = 5</code>까지 실행하기를 원했다면, 종료 조건은 <code>i &lt;= cats.length</code>일 필요가 있었을 것입니다. 만약 우리가 그것을 <code>i === cats.length</code>에 설정했다면, 첫 반복문 반복에서 <code>i</code>는 <code>5</code>와 같지 않아서, 반복문은 즉시 멈췄을 것이기 때문에 반복문은 전혀 실행되지 않을 것입니다.</p>
 </div>
 
-<p>우리는 마지막으로 출력되는 문장이 잘 만들어지지 않았다는 작은 문제를 가지고 있다.:</p>
+<p>우리는 마지막으로 출력되는 문장이 잘 만들어지지 않았다는 작은 문제를 가지고 있습니다:</p>
 
 <blockquote>
 <p>My cats are called Bill, Jeff, Pete, Biggles, Jasmin,</p>
 </blockquote>
 
-<p>이상적으로 우리는 문장의 마지막에 쉼표가 없도록 마지막 loop 반복에서 연결을 변경하는것을 원한다 — 우리는 for loop 내부에서 조건부를 넣어서 이 특별한 경우를 처리할수 있다:</p>
+<p>이상적으로, 우리는 문장의 끝에 콤마를 가지지 않도록 마지막 반복문 반복에서 연결을 변경하기를 원합니다. 좋습니다, 문제 없어요 — 우리는 꽤 행복하게 반복문이 이 특별한 경우를 다루도록 조건문을 내부에 삽입할 수 있습니다:</p>
 
 <pre class="brush: js notranslate">for (let i = 0; i &lt; cats.length; i++) {
   if (i === cats.length - 1) {
@@ -278,20 +279,20 @@ para.textContent = info;</pre>
 }</pre>
 
 <div class="note">
-<p><strong>Note</strong>: 너는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">example code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">see it running live</a>)에서 예제를 찾아볼수있다.</p>
+<p><strong>Note</strong>: 당신은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">예제 코드를 Github</a>에서 또한 찾아볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">see it running live</a>).</p>
 </div>
 
 <div class="warning">
-<p><strong>중요</strong>: With for — 모든 loop와 마찬가지로 — initializer 가 반복되어 결국 종료 조건에 도달하는지 확인해야 한다. 그렇지 않으면 loop가 영원히 계속되고 브라우저가 강제로 중지 시키거나 충돌하게 된다. 이를  우리는 <strong>infinite loop(무한 루프)</strong>라 한다.</p>
+<p><strong>중요</strong>: 모든 반복문과 마찬가지로 — for 문에서, 초기화식(initializer)이 결국 조건이 true가 아닌 지점에 닿도록, 경우에 따라, 증가되거나 혹은 감소되게 해야만 합니다. 만약 그렇지 않다면, 반복문은 영원히 계속될 것이고, 브라우저가 강제로 멈추게 하거나, 브라우저가 멈출(crash) 것입니다. 이것은 <strong>무한 루프</strong>(infinite loop)라고 불립니다.</p>
 </div>
 
-<h2 id="Break을_가지고있는_loops">Break을 가지고있는 loops</h2>
+<h2 id="Exiting_loops_with_break">break로 반복문 종료하기</h2>
 
-<p>만약 너가 모든 반복이 완료되기 전에 loop를 종료하려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> 문을 사용할수 있다. 우리는 이미 이전 설명에서 <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch statements</a>을 본적이 있다. — 입력 식과 일치하는 switch 문에서 case가 충족되면 break 문은 switch 문을 즉시 종료하고 그 뒤에 코드로 이동한다.</p>
+<p>만약 당신이 모든 반복이 완료되기 전에 반복문을 종료하고 싶다면, 당신은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a>문을 사용할 수 있습니다. 우리는 이미 이것을 지난 문서에서 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch문</a>을 살펴볼 때 만났습니다 — 입력 표현식과 일치하는 switch문에서 case가 충족되었을 때, <code>break</code>문은 즉시 switch문을 종료하고 switch문 다음에 있는 코드로 이동합니다.</p>
 
-<p>이것은 loop와 같다. — <code>break</code> 문은 즉시 loop를 빠져 나와 브라우저가 그 다음에 나오는 코드로 이동하게 한다.</p>
+<p>이것은 반복문과 같은 것입니다 — <code>break</code>문은 즉시 반복문을 종료하고 브라우저가 반복문 뒤에 있는 코드로 이동하게 합니다.</p>
 
-<p>여러 연락처와 전화 번호를 검색하여 찾고자 하는 번호 만 반환하고 싶다고 해보자 먼저 간단한 HTML — 우리가 검색할 이름을 입력 할 수 잇께 해주는 텍스트 {{htmlelement("input")}}, 검색 제출을 위한 {{htmlelement("button")}}요소, 그리고 {{htmlelement("p")}} 요소를 사용해 결과를 표시하자:</p>
+<p>우리가 연락처와 핸드폰 번호의 배열을 탐색하고 우리가 원하는 바로 그 번호를 반환하고 싶다고 합시다. 첫째로, 간단한 HTML — 찾고자 하는 이름을 입력할 수 있게 해 주는 텍스트 {{htmlelement("input")}}, 검색을 제출할 {{htmlelement("button")}} 요소, 그리고 결과를 표시할 {{htmlelement("p")}} 요소:</p>
 
 <pre class="brush: html notranslate">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
 &lt;input id="search" type="text"&gt;
@@ -299,7 +300,7 @@ para.textContent = info;</pre>
 
 &lt;p&gt;&lt;/p&gt;</pre>
 
-<p>이제 JavaScript를 보자:</p>
+<p>이제 JavaScript를 봅시다:</p>
 
 <pre class="brush: js notranslate">const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
 const para = document.querySelector('p');
@@ -370,30 +371,30 @@ btn.addEventListener('click', function() {
 <p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
 
 <ol>
- <li>우선 우리는 몇 가지 변수 정의를 한다. 우리는 각 항목이 콜론(:)으로 구분 된 이름과 전화 번호를 포함하는 문자열인 연락처 정보 배열을 가지고 있다.</li>
- <li>그 다음에는 버튼 (<code>btn</code>)에 EventListener에 연결하여 버튼을 누르면 검색을 수행하고 결과를 반환하는 코드를 실행한다.</li>
- <li>텍스트 input을 비우고 text input 에 focus를 두기 전에, 다음 검색을 준비하기위해 <code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">텍스트 input에 입력한 값을 </span></font>searchName</code>이라는 변수에 저장한다.  </li>
- <li>이제 for 반복문의 흥미로운 점을 보자:
+ <li>우선 우리는 몇 가지 변수 정의를 합니다 — 우리는 콜론으로 분리된 이름과 핸드폰 번호를 포함하고 있는 각각의 문자열 요소를 가지고 있는, 연락처 정보의 배열을 가지고 있습니다.</li>
+ <li>다음으로, 버튼이 눌렸을 때 검색을 수행하고 결과를 반환하기 위해 코드가 실행되도록 버튼(<code>btn</code>)에 이벤트 리스너를 붙입니다.</li>
+ <li>다음 검색의 준비를 위해, 텍스트 인풋을 비우고 그것을 다시 포커싱하기 전에, 우리는 <code>searchName</code> 변수에 텍스트 인풋에 입력된 값을 저장합니다. 검색이 대소문자 구분이 없도록(case-insensitive) 우리가 또한 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code>메서드를 문자열에 실행했다는 것에 주목하세요.</li>
+ <li>이제 for 반복문의 흥미로운 점을 봅시다:
   <ol>
-   <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">카운터를 </span></font>0</code>에서 시작하고 카운터가 <code>contacts.length</code> 보다 커지지 않을때 까지 loop를 실행하고 <code>i</code> 를 1씩 증가시킨다.</li>
-   <li>반복문 내부에서 먼저 콜론 문자에서 현재 연락처(<code>contacts[i]</code>) 를 나누고 결과값이 두 값을<code>splitContact</code>라는 배열에 저장한다.</li>
-   <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">그런 다음 </span></font>splitContact[0]</code> (the contact's name)의 값과 입력된 값 <code>searchName</code>이 같은지 조건문을 이용하여 테스트한다. 두값이 같은 경우, 우리는 para 값에 문자열을 입력하여 연락처 번호를 알린후 <code>break</code> 을 사용하여 loop를 종료한다.</li>
+   <li>우리는 <code>0</code>에서 카운터를 시작하고, 카운터가 <code>contacts.length</code>보다 더 이상 작지 않을 때까지 반복문을 실행시키고, 그리고 <code>i</code>를 반복문의 각 반복 후마다 1씩 증가시킵니다.</li>
+   <li>반복문 내부에서, 우리는 첫째로 현재 연락처 (<code>contacts[i]</code>)를 콜론 문자에서 나누고(split), 결과인 두 값을 <code>splitContact</code> 배열에 저장했습니다.</li>
+   <li>그리고서 우리는 <code>splitContact[0]</code> (연락처의 이름, 다시 얘기하자면 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code>로 소문자화(lower-cased)된)이, 입력된 <code>searchName</code>과 같은지를 검사하는 조건문을 사용했습니다. 만약 그렇다면, 우리는 연락처의 번호가 무엇인지를 알리는 문자열을 문단에 입력하고, 반복문을 끝내기 위해 <code>break</code>을 사용합니다.</li>
   </ol>
  </li>
  <li>
-  <p>연락처 이름<code>(contacts.length-1)</code> 을 반복한 후 연락처 이름이 입력 된 검색과 일치 하지 않으면 단락 텍스트가 "연락처 를 찾을 수 없습니다."로 설정되고 반복문이 계속 반복된다.</p>
+  <p><code>(contacts.length-1)</code> 반복 후에, 만약 연락처 이름이 입력된 검색과 일치하지 않으면 문단 텍스트는 "Contact not found."로 설정되고, 반복문은 조건이 더 이상 true가 아닐 때까지 반복을 계속합니다.</p>
  </li>
 </ol>
 
 <div class="note">
-<p>Note: 너는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>) 에서 전체 코드를 볼수있다.</p>
+<p>Note: 당신은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>).</p>
 </div>
 
-<h2 id="Continue로_반복_건너뛰기">Continue로 반복 건너뛰기</h2>
+<h2 id="Skipping_iterations_with_continue">Continue로 반복 건너뛰기</h2>
 
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a>문은 <code>break</code>과 비슷한 방식으로 작동하지만 loop에서 완전히 벗어나는 대신 loop의 다음 반복으로 건너 뛰게된다. 숫자를 입력으로 사용하고 정수의 제곱 인 숫자 (정수)만 반환하는 또 다른 예를 살펴보자.</p>
+<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/continue">continue</a>문은 <code>break</code>와 유사한 방식으로 작동하지만, 반복문을 완전히 탈출하는 대신, 이것은 반복문의 다음 반복으로 건너뜁니다. 숫자를 입력으로 취하고, 오직 정수의 제곱인 수만을 반환하는 다른 예제를 봅시다.</p>
 
-<p>HTML 코드는 기본적으로 마지막 예제와 같다 — 간단한 텍스트 입력 및 출력을 위한 단락, loop자체가 약간 다르긴 하지만 JavaScript는 대부분 동일하다 :</p>
+<p>HTML은 기본적으로 지난 예제와 같습니다 — 간단한 텍스트 입력, 그리고 출력을 위한 문단. JavaScript는 대부분 또한 같지만, 반복문 자체는 약간 다릅니다:</p>
 
 <pre class="brush: js notranslate">let num = input.value;
 
@@ -406,7 +407,7 @@ for (let i = 1; i &lt;= num; i++) {
   para.textContent += i + ' ';
 }</pre>
 
-<p>여기에서 출력값을 볼수있다:</p>
+<p>여기 출력이 있습니다:</p>
 
 <div class="hidden">
 <h6 id="Hidden_code_4">Hidden code 4</h6>
@@ -457,34 +458,34 @@ for (let i = 1; i &lt;= num; i++) {
 <p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
 
 <ol>
- <li>이 경우에 입력된 값은 숫자(<code>num</code>)여야 한다. <code>for</code> loop는 1에서 시작하는 카운터(이 경우에는 0에 관심이 없기 때문에), 카운터가 입력 <code>num</code> 보다 커질 때 루프가 중지 될 것이라고 말하는 종료 조건 및  매회 마다 1씩 증가되는 반복자가 주어진다.</li>
- <li>Loop 내에서<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>를 사용하여 숫자의 제곱근을 찾은 다음 제곱근이 가장 가까운 정수로 반올림 된 경우와 같은지 테스트 하여 제곱근이 정수인지 확인한다. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a>가 전달받은 숫자에 대해 정수로 바꿔준다.</li>
- <li>만약 제곱근과 정수로 바뀐 제곱근이 서로 같지 않다면(<code>!==</code>) 제곱근이 정수가 아니므로 관심이 없다. 이 경우<code>continue</code> 문을 사용하여 번호를 기록하지 않고 다음 루프 반복으로 건너 뛴다.</li>
- <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">만약 제곱근이 정수 인 경우 </span></font>continue</code> 문이 실행되지 않도록 if 블록을 지나치게 건너 뛴다. 대신 현재 <code>i</code> 값과 단락 내용 의 끝 부분에 공백을 연결한다.</li>
+ <li>이 경우에, 입력은 반드시 숫자 (<code>num</code>)여야 합니다. <code>for</code> 반복문은 1에서 시작하는 카운터 (우리는 이 경우에서 0에 관심이 없으니까요), 카운터가 입력 <code>num</code>보다 더 크게 되었을 때 반복문이 멈춘다고 말하는 종료 조건, 그리고 매번 카운터에 1을 더하는 반복자가 주어져 있습니다.</li>
+ <li>반복문 안에서, 우리는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>를 사용하여 각 숫자의 제곱근을 찾고, 이 제곱근이 가장 가까운 정수로 내림되었을 때 (이것이 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a>가 전달된 숫자에게 하는 일입니다) 그 자신과 같은지를 검사함으로써 정수인지 확인합니다.</li>
+ <li>만약 제곱근과 내림된 제곱근이 서로 같지 않다면 (<code>!==</code>), 이것은 제곱근이 정수가 아니라는 것을 의미하므로, 우리는 이것에 관심이 없습니다. 그러한 경우에, 우리는 숫자를 어디에도 기록하는 일 없이 다음 반복문 반복으로 건너뛰기 위해 <code>continue</code>문을 사용합니다.</li>
+ <li>만약 제곱근이 정수라면, 우리는 <code>continue</code>문이 실행되지 않도록 지난 <code>if</code>블록을 완전히 건너뜁니다; 대신, 우리는 현재 <code>i</code>값 + 공백을 단락 콘텐츠의 끝에 연결합니다.</li>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>: 너는  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">see it running live</a>)에서 전체 코드를 볼수 있다.</p>
+<p><strong>Note</strong>: 당신은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">see it running live</a>).</p>
 </div>
 
-<h2 id="while_그리고_do_..._while">while 그리고 do ... while</h2>
+<h2 id="while_and_do_..._while">while 그리고 do ... while</h2>
 
-<p><code>for</code> 는 JavaScript에서 사용할 수 잇는 유일한 유형의 loop가 아니다. 실제로 많은 다른 것들이 있따. 지금 모든 것을 이해할 필요는 없지만 약간 다른 방식으로 같은 기능을 인식 할 수 있도록 몇 가지 다른 구조를 살펴 보는것이 좋다.</p>
+<p><code>for</code> 는 JavaScript에서 사용할 수 있는 유일한 유형의 반복문이 아닙니다. 실제로 많은 다른 것들이 있고, 지금 이 모든 것을 이해할 필요는 없는 반면 당신이 약간 다른 방식으로 작업에서 같은 기능을 인식할 수 있도록 다른 두 개의 구조를 살펴 볼 가치가 있습니다.</p>
 
-<p>먼저 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> loop를 살펴보자 이 loop의 구문은 다음과 같다:</p>
+<p>먼저 <a href="/ko/docs/Web/JavaScript/Reference/Statements/while">while</a> 반복문을 살펴봅시다. 이 반복문의 구문은 다음과 같습니다:</p>
 
-<pre class="notranslate">initializer
-while (exit-condition) {
-  // code to run
+<pre class="notranslate">초기화식
+while (종료 조건) {
+  // 실행할 코드
 
-  final-expression
+  증감식
 }</pre>
 
-<p>이는 for loop와 매우 비슷하게 작동한다. 단,  initializer 변수가 loop 앞에 설정되어 있고, final-expression이 실행되는 코드 다음에 loop 내에 포함되어 있지 않다. 이 두개가 괄호 안에 포함되어 있지 않다. exit-조건은 괄호 안에 포함되며 <code>for</code>대신 <code>while</code> 키워드가 온다.</p>
+<p>초기화식 변수와 증감식이 괄호 안에 포함되어 있는 것이 아니라, 초기화식 변수가 반복문 전에 설정되어 있다는 것과, 증감식이 반복문 안에 실행할 코드 후에 포함되어 있다는 것을 제외하고, 이것은 <code>for</code> 반복문과 아주 비슷한 방식으로 작동합니다. 조건은 괄호 안에 포함되어 있고, <code>for</code> 대신 <code>while</code> 키워드가 앞에 옵니다.</p>
 
-<p>같은 세 가지 항목이 여전히 존재하며 for loop와 동일한 순서로 정의되어 있다. exit 조건에 도달햇는지 여부를 확인 하기 전에 initializer를 정의해야 하므로 의미가 있다. loop 내부의 코드가 실행 된 후 최종 조건이 실행되고 (반복이 완료 되었다.) 이는 exit 조건에 아직 도달하지 않은 경우에만 발생한다. </p>
+<p>같은 세 가지 요소가 여전히 존재하고, 이것들은 for 반복문에서처럼 여전히 같은 순서로 정의되어 있습니다. 여전히 카운터 변수가 조건이 더 이상 true가 아닌 지점에 도달했는지를 확인하기 전에 정의된 초기화식을 가지고 있어야만 하므로 이것은 말이 됩니다. 반복문 안의 코드가 실행된 이후에 증감식은 그리고서 실행되는데 (반복은 완료되었습니다), 이는 오직 조건이 여전히 참인 경우에만 일어납니다.</p>
 
-<p>고양이 목록 예제를 다시 한번 살펴 보자 while loop를 사용하도록 다시 작성해 보자:</p>
+<p>고양이 목록 예제를 다시 봐 봅시다. 하지만 while 반복문을 사용하기 위해 재작성되었습니다:</p>
 
 <pre class="brush: js notranslate">let i = 0;
 
@@ -499,23 +500,23 @@ while (i &lt; cats.length) {
 }</pre>
 
 <div class="note">
-<p><strong>Note</strong>: 이것은 여전히 예상하는 바와 똑같이 작동한다  <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">full source code</a>).</p>
+<p><strong>Note</strong>: 예상한대로 이것은 여전히 똑같이 동작합니다 — 여기서 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">전체 소스 코드</a>도 보세요).</p>
 </div>
 
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> loop 는 많이 비슷하지만 while 구조에 변형을 제공한다:</p>
+<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> 반복문은 많이 비슷하지만 while 구조에 변형을 제공합니다:</p>
 
-<pre class="notranslate">initializer
+<pre class="notranslate">초기화식
 do {
-  // code to run
+  // 실행할 코드
 
-  final-expression
-} while (exit-condition)</pre>
+  증감식
+} while (종료 조건)</pre>
 
-<p>이 경우 루프가 시작되기 전에 initializer가 다시 시작된다. <code>do</code> 키워드 는 실행할 코드와 최종 표현식을 포함하는 중괄호 바로 앞에 온다.</p>
+<p>이 경우, 반복문이 시작하기 전에, 초기화식은 다시 첫번째로 옵니다. 키워드는 곧장 실행할 코드와 증감식을 포함하는 중괄호의 앞에 있습니다.</p>
 
-<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">여기서 차별화 요소는 종료 조건이 그 밖의 모든 것 다음에 괄호로 묶여 있고 </span></font>while</code> 키워드로 시작한다는 것이다. <code>do...while</code> loop 에서 중괄호 안의 코드는 체크가 실행되기 전에 항상 한 번 실행되어 다시 실행되어야 하는지를 확인한다.( 체크가 먼저 오면 코드가 실행 되지 않을 수도 있다.)</p>
+<p>여기서 차별화 요소는 조건이 모든 것 뒤에 오는데, 괄호에 감싸져 있고 <code>while</code> 키워드가 앞에 있다는 점입니다. <code>do...while</code> 반복문에서, 중괄호 안의 코드는 이것이 다시 실행되어야 하는지를 보기 위해 확인이 만들어지기 전에 항상 한 번은 실행됩니다 (while과 for에서는, 확인이 먼저 와서, 코드는 혹시라도 절대로 실행될 일이 없습니다).</p>
 
-<p><code>do...while</code> loop를 사용하기 위해 고양이 목록 예제를 다시 작성해 보자:</p>
+<p><code>do...while</code>을 사용하기 위해 고양이 목록 예제를 다시 작성해 봅시다:</p>
 
 <pre class="brush: js notranslate">let i = 0;
 
@@ -530,37 +531,41 @@ do {
 } while (i &lt; cats.length);</pre>
 
 <div class="note">
-<p><strong>Note</strong>: 다시 말하지만 이것은 예상했던 것과 똑같이 작동한다. <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">full source code</a>).</p>
+<p><strong>Note</strong>: 다시 말하지만, 이것은 예상한 바와 같이 똑같이 동작합니다 — 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">전체 소스 코드</a>도 보세요).</p>
 </div>
 
 <div class="warning">
-<p><strong>중요</strong>: while과 do ... while - while -  모든 loop와 마찬가지로 - initalizer 가 반복 되어 결국 종료 조건에 도달하는지 확인해야 한다. 그렇지 않으면 loop는 영원히 계속되고 브라우저가 강제로 종료 시키거나 충돌한다. 이를 <strong>infinite loop(무한 루프)라한다</strong>.</p>
+<p><strong>중요</strong>: 모든 반복문과 마찬가지로 — while과 do...while문에서, 조건이 결국 false가 되도록, 경우에 따라, 초기화식이 증가되거나 감소되게 해야만 합니다.만약 그렇지 않다면, 반복문은 영원히 계속될 것이고, 브라우저가 강제로 멈추게 하거나, 브라우저가 멈출(crash) 것입니다. 이것은 <strong>무한 루프</strong>(infinite loop)라고 불립니다.</p>
 </div>
 
-<h2 id="활동_학습_카운트_다운_시작!">활동 학습: 카운트 다운 시작!</h2>
+<h2 id="Active_learning_Launch_countdown!">활동 학습: 카운트 다운 시작!</h2>
 
-<p>이 연습에서 출력 상자에 간단한 발사 카운트 다운을 인쇄하여 특히 우리가 원하는10에서 Blast off로 출력한다:</p>
+<p>이 연습에서, 우리는 당신이 간단한 발사 카운트다운을, 10에서 발사까지, 출력 박스에 출력하기를 원합니다. 구체적으로 말하면, 우리는 당신이 다음을 하기를 원합니다:</p>
 
 <ul>
- <li>Loop를 10에서 0으로 반복한다 initializer — <code>let i = 10;</code>.</li>
- <li>반복 할때 마다 새로운 단락을 만들어 <code>const output = document.querySelector('.output');</code> 를 사용하여 <code>&lt;div&gt;</code>에 추가한다. comments에서 우리는 loop의 어딘가에 사용되어야하는 세 개의 코드 라인을 제공했다:
+ <li>10에서 0까지 반복하세요. 우리는 당신에게 초기화식을 제공합니다 — <code>let i = 10;</code>.</li>
+ <li>각 반복마다, 새로운 단락을 만들고, 우리가 <code>const output = document.querySelector('.output');</code>를 사용해 선택한, 출력 <code>&lt;div&gt;</code>에 추가하세요. 주석에, 우리는 당신에게 반복문 내부 어딘가에서 사용될 필요가 있는 세 줄의 코드를 제공합니다.
   <ul>
-   <li><code>const para = document.createElement('p');</code> — 새로운 단락 생성.</li>
-   <li><code>output.appendChild(para);</code> — 문단을 <code>&lt;div&gt;</code>에 추가</li>
-   <li><code>para.textContent =</code> — 단락 안의 텍스트를 등호 다음에 오른쪽에 놓은 것과 동일하게 만든다.</li>
+   <li><code>const para = document.createElement('p');</code> — 새로운 단락을 만듭니다.</li>
+   <li><code>output.appendChild(para);</code> — 단락을 출력 <code>&lt;div&gt;</code>에 추가합니다.</li>
+   <li><code>para.textContent =</code> — 등호 기호 이후에, 우항(right-hand side)에 당신이 입력한 것과 같은 텍스트를 단락 내부에 만듭니다.</li>
   </ul>
  </li>
- <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">다른 반복 숫자는 해당 반복에 대한 단락에 다른 텍스트를 넣어야한다.(조건문과 여러 문장이 필요하다 </span></font>para.textContent =</code> lines):
+ <li>다른 반복 숫자는 그 반복에 대한 단락에 입력될 다른 텍스트를 요구합니다 (당신은 조건문과 다수의 <code>para.textContent =</code> 줄이 필요할 것입니다):
   <ul>
-   <li>숫자가 10이면 단락에 "카우트 다운 10."을 출력해라</li>
-   <li>숫자가 0이면 "Blast off!"라고 단락에 출력해라.</li>
-   <li>다른 번호의 경우 단락에 숫자만 출력해라.</li>
+   <li>만약 숫자가 10이면, 단락에 "Countdown 10"을 출력하세요.</li>
+   <li>만약 숫자가 0이면, "Blast off!"를 단락에 출력하세요.</li>
+   <li>다른 숫자에 대해서는, 단지 단락에 그 숫자를 출력하세요.</li>
   </ul>
  </li>
- <li>반복자를 포함하는 것을 잊지 말아라! 그리고 이 예제에서 각각의 반복 후에 숫자가 증가되는게 아니게 카운트 다운을 하고있다.너는 <code>i++</code> 원하지 <strong>않는다.</strong>— 어떻게 아래로 반복시킬까?</li>
+ <li>반복자를 포함하는 것을 잊지 마세요! 그러나, 이 예제에서는 우리는 각 반복마다 카운트를 위가 아니라 아래로 셉니다. 그러니 당신은 <code>i++</code>를 원하지 <strong>않을</strong> 것입니다 — 어떻게 아래로 반복하실 건가요?</li>
 </ul>
 
-<p>만약 실수를 한 경우 "재설정" 버튼을 사용하여 예제를 얼마든지 재설정 할수 있다. 정말 모르겠다면 "soultion보기"를 눌러 풀이를 보자</p>
+<div class="note">
+<p><strong>Note</strong>: 만약 당신이 반복문을 타이핑하기 시작했다면 (예를 들어 (while(i&gt;=0)), 아직 종료 조건을 입력하지 않았기 때문에 브라우저는 멈출(stuck) 지도 모릅니다. 그러니 조심하세요. 이 문제에 대처하기 위해 코드를 주석에 작성하고, 완성한 이후에 주석을 제거할 수 있습니다.</p>
+</div>
+
+<p>만약 실수했다면, 언제나 예제를 "Reset" 버튼으로 리셋할 수 있습니다. 만약 정말로 막혔다면, 답을 보기 위해 "Show solution"을 누르세요.</p>
 
 <div class="hidden">
 <h6 id="Active_learning">Active learning</h6>
@@ -705,33 +710,33 @@ textarea.onkeyup = function(){
 
 <p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
 
-<h2 id="활동_학습_손님_목록_작성">활동 학습: 손님 목록 작성</h2>
+<h2 id="Active_learning_Filling_in_a_guest_list">활동 학습: 손님 목록 작성</h2>
 
-<p>이 연습에서 배열에 저장된 이름 목록을 가져 와서 손님 목록에 넣기를 원한다. 그러나 그것은 쉽지 않다. — 우리는 Phil과 Lola가 욕심 많고 무례하고, 항상 모든 음식을 먹기 때문에 Phil과 Lola를 들여 보내고 싶지 않다. 우리는 초대할 손님 목록과 거절할 손님목록을 가지고 있다.</p>
+<p>이 연습에서, 우리는 당신이 배열에 저장된 이름 목록을 취하고 그것을 손님 명단에 넣기를 원합니다. 하지만 이것은 쉽지 않습니다 — Phil과 Lola는 탐욕스럽고 무례하고, 항상 모든 음식을 먹기 때문에 우리는 Phil과 Lola를 목록에 넣고 싶지 않습니다. 우리는 두 목록을 가지고 있는데, 하나는 승인할 손님들을 위한 것이고 하나는 거절할 손님들을 위한 것입니다.</p>
 
-<p>특히, 우리가 너에게 원하는 것:</p>
+<p>구체적으로, 우리는 당신이 다음을 하기를 원합니다:</p>
 
 <ul>
- <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">0부터 </span></font>people</code> 배열의 길이까지 반복 할 loop를 작성해라. <code>let i = 0;</code> 를 initializer 로 시작해야 하지만 종료 조건은 무엇일까?</li>
- <li>각 loop 반복 중에 조건문을 사용하여 현재 배열 항목이 "Phil"또는 "Lola"와 같은지 확인해라:
+ <li>0부터 <code>people</code> 배열의 길이까지 반복하는 반복문을 작성하세요. 당신은 초기화식 <code>let i = 0;</code>에서부터 시작할 필요가 있을 것이지만, 당신은 무슨 조건을 필요로 하나요?</li>
+ <li>각 반복문 반복 동안에, 조건문을 사용하여 현재 배열 원소가 "Phil" 또는 "Lola"와 동일한지 검사하세요:
   <ul>
-   <li>그럴 경우 배열 항목을 <code>refused</code> 된 단락의 <code>textContent</code>, 끝에 쉽표와 공백을 붙여 연결해라 .</li>
-   <li>그렇지 않은 경우 배열 항목을 <code>admitted</code> 된단락의 <code>textContent</code>, 끝에 연결하고 뒤에 쉼표와 공백을 붙인다.</li>
+   <li>만약 그렇다면, 배열 원소를 <code>refused</code> 단락의 <code>textContent</code>의 끝에 콤마와 공백을 붙여 연결하세요.</li>
+   <li>만약 그렇지 않다면, 배열 원소를 <code>admitted</code> 단락의 <code>textContent</code>의 끝에 콤마와 공백을 붙여 연결하세요.</li>
   </ul>
  </li>
 </ul>
 
-<p>우리는 너에게 이미 아래의 것들을 제공했다:</p>
+<p>우리는 이미 당신에게 다음을 제공합니다:</p>
 
 <ul>
- <li><code>let i = 0;</code> — 너의 initializer.</li>
- <li><code>refused.textContent +=</code> —  <code>refused.textContent</code> 의 끝까지 무언가를 연결할 라인의 시작</li>
- <li><code>admitted.textContent +=</code> — <code>admitted.textContent</code> 의 끝까지 무언가를 연결할 행의 시작 부분이다.</li>
+ <li><code>let i = 0;</code> — 초기화식.</li>
+ <li><code>refused.textContent +=</code> — 무언가를 <code>refused.textContent</code>의 끝에 연결할 줄의 시작.</li>
+ <li><code>admitted.textContent +=</code> — 무언가를 <code>admitted.textContent</code>의 끝에 연결할 줄의 시작.</li>
 </ul>
 
-<p>추가 보너스 질문 — 위의 작업을 성공적으로 마친 후에는 쉼표로 구분 된 두 개의 이름 목록이 남지만 정리되지 않는다. 각 끝에 쉼표가 표시된다. 각각의 경우에 마지막 쉼표를 잘라내는 줄을 작성하는 방법을 알아 내고 마지막에 모든것을 멈추는 코드를 추가할수 있겠어? 도움이 되는 <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a> 도움말을 읽어봐라.</p>
+<p>추가 보너스 질문 — 위의 일을 성공적으로 완료한 이후에, 당신은 콤마로 나눠진 두 이름 목록을 가지고 있을 것이지만, 그것들은 단정치 못합니다 — 각 목록의 끝에 콤마가 있을 것입니다. 각 경우에 어떻게 마지막 콤마를 잘라낸 줄을 작성하고, 끝에 마침표를 추가할 지 알아내실 수 있으신가요? 도움을 위해 <a href="/ko/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자열 메서드</a> 문서를 한 번 봐 보세요.</p>
 
-<p>실수를 한 경우 "재설정"버튼을 사용하여 예제를 언제든지 재설정 할 수 있다. 정말 힘들다면 "solution보기"를 눌러 풀이를 확인할수 있다.</p>
+<p>만약 실수했다면, 언제나 예제를 "Reset" 버튼으로 리셋할 수 있습니다. 만약 정말로 막혔다면, 답을 보기 위해 "Show solution"을 누르세요.</p>
 
 <div class="hidden">
 <h6 id="Active_learning_2">Active learning 2</h6>
@@ -881,68 +886,72 @@ textarea.onkeyup = function(){
 
 <p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>
 
-<h2 id="어떤_loop종류를_사용하나">어떤 loop종류를 사용하나?</h2>
+<h2 id="Which_loop_type_should_you_use">어떤 반복문을 써야 할까?</h2>
 
-<p>기본적으로 <code>for</code>, <code>while</code>, 그리고 <code>do...while</code> loops 는 상호 교환이 가능하다. 그들은 모두 동일한 문제를 해결하는 데 사용할수 있으며, 사용하는 것은 주로 개인의 취향에 달려 있다. 가장 기억하기 쉽거나 가장 직관적인 방법을 찾아라. 다시 한번 살펴보자.</p>
+<p>기본적 사용에 대해, <code>for</code>, <code>while</code>, 그리고 <code>do...while</code> 반복문들은 대체로 교체할 수 있습니다. 이것들은 같은 문제를 풀기 위해 모두 쓰여질 수 있고, 어떤 것을 사용할지는 주로 당신의 개인적인 선호에 달려 있습니다 — 어떤 것이 가장 기억하기 쉽거나 직관적이라고 생각하시나요. 이것들을 다시 살펴봅시다.</p>
 
-<p>First <code>for</code>:</p>
+<p>첫째로 <code>for</code>:</p>
 
-<pre class="notranslate">for (initializer; exit-condition; final-expression) {
-  // code to run
+<pre class="notranslate">for (초기화식; 종료 조건; 증감식) {
+  // 실행할 코드
 }</pre>
 
 <p><code>while</code>:</p>
 
-<pre class="notranslate">initializer
-while (exit-condition) {
-  // code to run
+<pre class="notranslate">초기화식
+while (종료 조건) {
+  // 실행할 코드
 
-  final-expression
+  증감식
 }</pre>
 
-<p>and finally <code>do...while</code>:</p>
+<p>그리고 마지막으로 <code>do...while</code>:</p>
 
-<pre class="notranslate">initializer
+<pre class="notranslate">초기화식
 do {
-  // code to run
+  실행할 코드
 
-  final-expression
-} while (exit-condition)</pre>
+  증감식
+} while (종료 조건)</pre>
 
-<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">우리는 적어도 </span></font><code>for</code>를 <font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">처음에는 모든 것중에 기억하는 것이 가장 쉽기 때문에 추천한다. </span></font>— initializer, exit 조건 및 최종 표현식은 모두 괄호 안에 깔끔하게 들어가야 하므로 어디에 있는지 쉽게 알 수 있다. 너가 그것들을 놓치지 않게 잘 점검해보자.</p>
+<p>우리는, 적어도 시작하는 데, <code>for</code>를 추천합니다. 왜냐하면 이것은 아마도 모든 것을 기억하기 가장 쉽기 때문입니다 — 초기화식, 조건, 증감식 모두가 괄호 안에 깔끔하게 들어가야만 하므로, 이것들이 어디 있는지 보고 당신이 이것들을 놓치지 않았다는 것을 확인하기 쉽습니다.</p>
 
 <div class="note">
-<p><strong>Note</strong>: 고급 / 특수한 상황에서 나아가 다른 loop 유형 / 기능도 있다. loop 학습으로 더 자세히 알고 싶다면 <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a> 를 읽어보자.</p>
+<p><strong>Note</strong>: 다른 반복문 형태/기능 또한 있는데, 이는 고급/특수한 상황에서 유용하고 이 글의 범위 너머에 있습니다. 만약 반복문을 더 많이 배우고 싶다면, 고급 <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 가이드</a>를 읽어 보세요.</p>
 </div>
 
+<h2 id="Test_your_skills!">당신의 실력을 평가해 보세요!</h2>
+
+<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops">실력을 평가해 보세요: 반복문</a>.</p>
+
 <h2 id="결론">결론</h2>
 
-<p>이 설명에서는 기본 개념과 JavaScript에서 반복되느 코드를 사용할 수 있는 여러 가지 옵션에 대해 설명했다. 이제 loop가 반복적 인 코드를 처리하는 좋은 메커니즘 인 이유를 명확히 파악하고 자신의 예제에서 사용하도록 노력해야한다!</p>
+<p>이 문서는 당신에게 JavaScript에서의 반복문에 대한 기본 개념과 이용 가능한 다른 옵션들을 드러내 보였습니다. 당신은 이제 왜 반복문이 반복적인 코드를 다루는 데 좋은 메커니즘인지 확실히 이해하고, 당신만의 예제에서 그것들을 사용하고 싶어서 몸이 근질거려야만 합니다!</p>
 
-<p>만약 이해가 되지 않는 내용이 있으면 다시 내용을 읽어보거나 <a href="/en-US/Learn#Contact_us">contact us</a> 를 통해 도움을 요청하자.</p>
+<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/en-US/docs/Learn#contact_us">contact us</a>에서 도움을 요청해 보세요.</p>
 
-<h2 id="또한_볼것">또한 볼것</h2>
+<h2 id="See_also">더 보기</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration in detail</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> references</li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> references</li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 자세히 알아보기</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for 문 레퍼런스</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/while">while</a> 과 <a href="/ko/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> 레퍼런스</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a> 과 <a href="/ko/docs/Web/JavaScript/Reference/Statements/continue">continue</a> 레퍼런스</li>
  <li>
-  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — some advanced loop best practices</p>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">JavaScript For 반복문을 작성하는 가장 좋은 방법이 무엇인가?</a> — 몇몇 고급 반복문 습관</p>
  </li>
 </ul>
 
 <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
 
-<h2 id="In_this_module">In this module</h2>
+<h2 id="In_this_module">이 모듈에서는</h2>
 
 <ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li>
 </ul>
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html
new file mode 100644
index 0000000000..4867a45ddf
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html
@@ -0,0 +1,86 @@
+---
+title: '실력을 평가해 보세요: 반복문'
+slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
+tags:
+  - Beginner
+  - JavaScript
+  - Learn
+  - Loops
+---
+<div>{{learnsidebar}}</div>
+
+<p>이 실력 테스트의 목적은 당신이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a> 문서를 이해했는지를 평가하기 위함입니다.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: 당신은 코드를 다운로드하고, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!<br>
+ <br>
+ 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p>
+</div>
+
+<h2 id="DOM_manipulation_considered_useful">DOM 조작: 유용하다고 생각됨</h2>
+
+<p>아래의 몇몇 문제들은 당신에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p>
+
+<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 당신은 이것을 사용하는 몇몇 예제를 보았고, 우리는 당신이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p>
+
+<h2 id="Loops_1">반복문 1</h2>
+
+<p>우리의 첫 반복문 과제에서 우리는 당신이 제공된 <code>myArray</code> 내의 모든 요소를 순회하고, 제공된 <code>list</code>에 추가될 리스트 아이템 (예: <code><a href="/ko/docs/Web/HTML/Element/li">&lt;li&gt;</a></code> 요소) 내에서 화면에 그것들을 출력하는 간단한 반복문을 만듦으로써 시작하기를 원합니다.</p>
+
+<div class="notecard note">
+<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p>
+</div>
+
+<h2 id="Loops_2">반복문 2</h2>
+
+<p>이 다음 과제에서, 우리는 당신이, 이름이 주어지면 이름과 전화번호 (<code>phonebook</code>)를 포함하고 있는 객체 배열을 탐색하고, 만약 그 이름을 찾으면, 이름과 전화번호를 단락 (<code>para</code>)에 출력하고 그리고서 반복문이 다 실행되기 전에 반복문을 빠져나오는 간단한 프로그램을 작성하기를 원합니다.</p>
+
+<p>3개의 변수가 주어집니다:</p>
+
+<ul>
+ <li><code>i</code> — 0의 값에서 시작합니다; 반복자(iterator)로써 쓰이게 의도되었습니다.</li>
+ <li><code>name</code> — 검색할 이름을 포함하고 있습니다.</li>
+ <li><code>para</code> — 단락에 대한 참조를 포함하고 있는데, 결과를 보이기 위해 사용될 것입니다.</li>
+</ul>
+
+<p>당신은 전 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p>
+
+<div class="notecard note">
+<p><p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p></p>
+</div>
+
+<h2 id="Loops_3">반복문 3</h2>
+
+<p>이 마지막 과제에서는, 다음의 것들이 제공됩니다:</p>
+
+<ul>
+ <li><code>i</code> — 500의 값으로 시작합니다; 반복자로써 쓰이게 의도되었습니다.</li>
+ <li><code>para</code> — 단락에 대한 참조를 포함하고 있는데, 결과를 보이기 위해 사용될 것입니다.</li>
+ <li><code>isPrime()</code> — 숫자가 전달되었을 때, 만약 숫자가 소수(prime number)면, <code>true</code>를 반환하고, 아니면 <code>false</code>를 반환하는 함수.</li>
+</ul>
+
+<p>당신은 숫자 2에서 500까지 뒤로 가는 반복문을 사용하고 (1은 소수에 포함되지 않습니다), 제공된 <code>isPrime()</code> 함수를 그 숫자들에서 실행할 필요가 있습니다. 소수가 아닌 각 숫자에 대해서는, 다음 반복으로 계속하세요. 소수인 각 숫자에 대해서는, 그것을 단락의 <code>textContent</code>에 몇몇 종류의 분리자(separator)에 덧붙여 추가하세요.</p>
+
+<p>당신은 이전의 두 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p>
+
+<div class="notecard note">
+<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p>
+</div>
+
+<h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2>
+
+<p>당신은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다. (역자 주: 이 문서 상단의 노트에 나와있듯이 무한 루프의 위험 때문에 다른 평가들처럼 인터랙티브 에디터가 제공되지 않았다고 안내되었기 때문에, 이 문장은 잘못 들어가 있는 듯 합니다.)</p>
+
+<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p>
+
+<ol>
+ <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li>
+ <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다:
+  <ul>
+   <li>"반복문 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.</li>
+   <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li>
+   <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li>
+   <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li>
+  </ul>
+ </li>
+</ol>