--- title: Looping code slug: Learn/JavaScript/Building_blocks/Looping_code tags: - for문 - 반복문 - 초보자 translation_of: Learn/JavaScript/Building_blocks/Looping_code ---

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/조건문", "Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

프로그래밍 언어는 다양한 작업을 통해 반복적 인 작업을 신속하게 처리 할 수 있습니다. 이제 우리는 JavaScript를 사용하여 반복 구문을 사용하여 편리하게 처리 할 수 있습니다.

선수 과목 :	기본적인 컴퓨터 활용 능력, HTML과 CSS, 자바 스크립트 의 기본 이해 .
목표:	JavaScript에서 루프를 사용하는 방법을 이해합니다.

나를 계속 붙잡아 라.

반복(loop), 반복 반복. popular breakfast cereals, roller coasters 그리고 musical production과 같이, 그것들은 프로그래밍의 중요한 개념이다. 프로그래밍 loop는 반복적으로 동일한 작업을 반복하는것이고 이런것들을 프로그래밍 언어로 loop라 한다.

가족들이 일주일동안 먹을 식량이 충분한지 확신하기 위해 고민하는 농부의 상황을 보자. 그는 이것을 알기위해 다음과 같은 loop를 취할수 있다:

이 loop에서 다음과 같이 우리는 한가지 이상의 기능을 가질수 있다:

counter은 특정 값으로 초기화된다 — loop의 시작점이다. ("시작: I have no food", 위 그림을 참고).
exit condition는 loop가 멈추는 기준이 되는 종료 조건 — 보통 counter가 특정 값에 도달하면 멈추게된다. 이것은 위에서 "Have I got enough food?"라고 설명되어 있다. 가족에게 먹일 음식 10개가 필요하다고 가정 해 보자.
iterator는 끝나는 조건에 도달 할 때까지 일반적으로 counter를 각각의 연속된 루프에서 조금 씩 증가시킨다. 우리는 위에 명시적으로 설명하지 않았지만, 농부가 시간 당 음식을 2개씩 수집 할 수 있다고 생각할 수 있다. 매시간 후, 그가 모은 음식의 양은 2개씩 증가하고, 그는 음식이 충분한 지 여부를 확인한다. 그가 10개(종료 조건)에 도달하면, 그는 수집을 중지하고 집에 갈수 있다.

{{glossary("pseudocode")}}에서 이것은 다음과 같아 보일 것이다.:

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
  }
}

따라서 필요한 음식의 양은 10으로 설하고, 현재 농부의 양은 0으로 설정한다. 매 반복마다 농부의 음식 양이 필요한 양과 같은지 확인한다. 필요한 양을 얻었다면 loop를 종료 할수 있다. 그렇지 않다면, 농부는 음식을 모을때까지 다시 반복해서 loop를 실행한다.

왜 귀찮게?

여기에서 loop의 뒤에 있는 고급개념을 이해했을 것이다. 하지만 "그래 뭐 괜찮군 그래서 이 코드가 어떻게 도움이 될수 있는거지?"라고 생각할수도 있다. 앞서 말햇듯이 loop는 반복적인 작업을 빠르게 동일한 작업을 반복해서 수행해 완료하는 것이다.

종종 코드는 각각의 연속적인 반복된 loop에서 조금씩 달라질수도 있다. 그래서 유사하지만 약간 다른 작업에 이것을 이용해 작업을 완료할수도 있다.만약 너가 여러가지 다른종류의 계산을 해야한다면, 반복해서 처리하는게 아닌 각각 계산하고 싶을것이다.

Loop가 왜 그렇게 좋은지 완벽하게 설명하는 예제를 한번 보자. {{htmlelement("canvas")}} element에 100개의 무작위 원을 그려야 한다고 가정해보자. (예제를 다시 실행하여 다른 임의의 세트를 보려면 Update 버튼을 클릭) :

Hidden code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Random canvas circles</title>
    <style>
      html {
        width: 100%;
        height: inherit;
        background: #ddd;
      }

      canvas {
        display: block;
      }

      body {
        margin: 0;
      }

      button {
        position: absolute;
        top: 5px;
        left: 5px;
      }
    </style>
  </head>
  <body>

  <button>Update</button>

  <canvas></canvas>


    <script>
    const btn = document.querySelector('button');
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    let WIDTH = document.documentElement.clientWidth;
    let HEIGHT = document.documentElement.clientHeight;

    canvas.width = WIDTH;
    canvas.height = HEIGHT;

    function random(number) {
      return Math.floor(Math.random()*number);
    }

    function draw() {
      ctx.clearRect(0,0,WIDTH,HEIGHT);
      for (let i = 0; i < 100; i++) {
        ctx.beginPath();
        ctx.fillStyle = 'rgba(255,0,0,0.5)';
        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
        ctx.fill();
      }
    }

    btn.addEventListener('click',draw);

    </script>

  </body>
</html>

{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

지금 당장은 모든 코드를 이해할 필요는 없지만 실제로100개의 원을 그리는 코드를 살펴보자:

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

코드의 앞부분에서 정의한random()은 0 그리고 x-1사이의 정수를 반환한다.
WIDTH 그리고 HEIGHT 는 내부 브라우저 윈도우의 너비와 높이이다.

우리는 이 코드를 100번 반복하기 위해서 loop를 사용하고 있다. 너는 여기에서 기본적인 아이디어를 얻을수 있다. 코드는 페이지에서 임의의 위치에 원을 그린다. 코드의 크기가 100개가 되든 1000개가 되든 또는 10,000개가 되든간에 동일하게 작업을 수행할것이다. 너는 숫자만 변경하면된다.

만약 우리가 loop를 사용하지 않았다면 원을 그릴때마다 다음 코드를 반복해서 써야한다 :

ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();

이것은 겁나 지루하고 빠르게 유지하기 힘들것이다. 이럴때 loop를 사용하는게가장 좋다.

루프의 표준

특정 loop 구문을 살펴보도록 하자. 대부분의 시간을 보낼 첫번째는 for loop이다. 이 구문은 다음과 같다:

for (initializer; exit-condition; final-expression) {
  // code to run
}

여기서 우리가 알수있는것:

for 라는 키워드를 쓰고 그옆에 괄호를 만든다.
괄호 안에는 세미콜론(;)으로 구분 된 세개의 항목이 있다.
1. initializer — 일반적으로 숫자로 설정된 변수이며 루프가 실행 된 횟수가 얼마나 되는제 되는지 알기위해 증가한다 그것을 counter variable라고 한다.
2. exit-condition — 앞에서 언급했듯이 loop가 loop를 언제 멈출지 정의한다. 이 조건은 일반적으로 비교 연산자, 종료 조건이 충족되었는지 확인하는 테스트를 특징으로 하는 표현식이다.
3. A final-expression — 이것은 매번 loop 전체가 반복이 될때 항상 분석(또는 실행)한다. 일반적으로 counter variable를 증가(또는 경우에 따라 감소)하여 종료 조건 값으로 점점 가까워진다.
코드 블럭을 감싸는 중괄호({}) — 중괄호 안에 있는 코드는 loop가 반복 될 때마다 실행된다.

실제 예제를 보면서 이러한 것들이 무엇을 더 확실하게 시각화 할 수 있는지 살펴보자.

const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
let info = 'My cats are called ';
const para = document.querySelector('p');

for (let i = 0; i < cats.length; i++) {
  info += cats[i] + ', ';
}

para.textContent = info;

이것은 우리에게 다음과 같은 결과를 보여준다:

Hidden code 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Basic for loop example</title>
    <style>

    </style>
  </head>
  <body>

  <p></p>


    <script>
    const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
    let info = 'My cats are called ';
    const para = document.querySelector('p');

    for (let i = 0; i < cats.length; i++) {
      info += cats[i] + ', ';
    }

    para.textContent = info;

    </script>

  </body>
</html>

{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

Note: 너는 example code on GitHub too (also see it running live)에서 예제를 찾을수 있다.

이것은 배열의 항목을 반복하는 데 사용되는 loop를 보여 주며 각각의 항목을 사용하여 JavaScript에서 매우 일반적인 패턴을 나타낸다:

iterator i는 0에서부터 시작한다 (let i = 0).
cats의 배열의 길이보다 작을때 까지만 실행하라는 명령을 받았다. 이것은 중요하다. 종료 조건은 loop가 계속 실행되는 조건을 나타낸다. 따라서 이 경우에는 i < cats.length 까지만 loop가 true여서 계속 실행된다.
loop 안에서 현재 loop항목(cats[i가 몇번 실행되었던지 간에 cats[i] 는)과 쉼표 및 공백을 info변수 끝에 위치한다:
1. 처음 실행되는 동안, i = 0, 이므로 cats[0] + ', ' 는 info ("Bill, ")에 옆에 위치한다.
2. 두번째로 실행되는 동안, i = 1, 이므로 cats[1] + ', ' 역시 info ("Jeff, ")에 옆에 위치한다.
3. 계속해서 loop가 실행될 때마다 1이 i (i++)에 추가되고, 프로세스가 다시 시작된다.
i의 값이 cats.length같아질때, loop는 멈추고, 브라우저는 loop 아래의 다음 코드로 넘어가게된다.

Note: 컴퓨터는 1이 아닌 0부터 계산하기 때문에 exit 조건을i <= cats.length이 아닌 i < cats.length로 설정했다. — 우리는 i 를 0에서 시작해서, i = 4 (배열의 마지막 index 항목)까지 실행한다. cats.length 는 5개의 항목을 가지고있어 5까지 반환하지만 우리는 i = 5까지의 값을 원하지 않으므로 마지막 항목은 undefined를 반환하게 된다.(그래서 index가 5인 배열 항목이 존재하지 않는다.)그러므로 cats.length (i <=) 를 쓰지 않고 cats.length (i <)로 만들었다.

Note: exit조건의 공통적인 실수는 "작거나 같다" (<=)를 사용하는것보다 "동등"(===)을 사용하는것이다 . 만약 우리가 i = 5까지 loop를 사용한다면 exit 조건은 i <= cats.length가 되어야 한다. 만약 우리가 i === cats.length로 설정한다면 그 loop는 전부를 실행하지 않을것이다 왜냐하면 i는 첫번째 loop에서 5와 같지 않기 때문에 작업이 즉시 중단된다.

우리는 마지막으로 출력되는 문장이 잘 만들어지지 않았다는 작은 문제를 가지고 있다.:

My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

이상적으로 우리는 문장의 마지막에 쉼표가 없도록 마지막 loop 반복에서 연결을 변경하는것을 원한다 — 우리는 for loop 내부에서 조건부를 넣어서 이 특별한 경우를 처리할수 있다:

for (let i = 0; i < cats.length; i++) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }
}

Note: 너는 example code on GitHub too (also see it running live)에서 예제를 찾아볼수있다.

중요: With for — 모든 loop와 마찬가지로 — initializer 가 반복되어 결국 종료 조건에 도달하는지 확인해야 한다. 그렇지 않으면 loop가 영원히 계속되고 브라우저가 강제로 중지 시키거나 충돌하게 된다. 이를 우리는 infinite loop(무한 루프)라 한다.

Break을 가지고있는 loops

만약 너가 모든 반복이 완료되기 전에 loop를 종료하려면 break 문을 사용할수 있다. 우리는 이미 이전 설명에서 switch statements을 본적이 있다. — 입력 식과 일치하는 switch 문에서 case가 충족되면 break 문은 switch 문을 즉시 종료하고 그 뒤에 코드로 이동한다.

이것은 loop와 같다. — break 문은 즉시 loop를 빠져 나와 브라우저가 그 다음에 나오는 코드로 이동하게 한다.

여러 연락처와 전화 번호를 검색하여 찾고자 하는 번호 만 반환하고 싶다고 해보자 먼저 간단한 HTML — 우리가 검색할 이름을 입력 할 수 잇께 해주는 텍스트 {{htmlelement("input")}}, 검색 제출을 위한 {{htmlelement("button")}}요소, 그리고 {{htmlelement("p")}} 요소를 사용해 결과를 표시하자:

<label for="search">Search by contact name: </label>
<input id="search" type="text">
<button>Search</button>

<p></p>

이제 JavaScript를 보자:

const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let searchName = input.value;
  input.value = '';
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let splitContact = contacts[i].split(':');
    if (splitContact[0] === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

Hidden code 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple contact search example</title>
    <style>

    </style>
  </head>
  <body>

  <label for="search">Search by contact name: </label>
  <input id="search" type="text">
  <button>Search</button>

  <p></p>


    <script>
    const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
    const para = document.querySelector('p');
    const input = document.querySelector('input');
    const btn = document.querySelector('button');

    btn.addEventListener('click', function() {
      let searchName = input.value;
      input.value = '';
      input.focus();
      for (let i = 0; i < contacts.length; i++) {
        let splitContact = contacts[i].split(':');
        if (splitContact[0] === searchName) {
          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
          break;
        } else if (i === contacts.length-1)
              para.textContent = 'Contact not found.';
        }
    });
    </script>

  </body>
</html>

{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

우선 우리는 몇 가지 변수 정의를 한다. 우리는 각 항목이 콜론(:)으로 구분 된 이름과 전화 번호를 포함하는 문자열인 연락처 정보 배열을 가지고 있다.
그 다음에는 버튼 (btn)에 EventListener에 연결하여 버튼을 누르면 검색을 수행하고 결과를 반환하는 코드를 실행한다.
텍스트 input을 비우고 text input 에 focus를 두기 전에, 다음 검색을 준비하기위해 텍스트 input에 입력한 값을 searchName이라는 변수에 저장한다.
이제 for 반복문의 흥미로운 점을 보자:
1. 카운터를 0에서 시작하고 카운터가 contacts.length 보다 커지지 않을때 까지 loop를 실행하고 i 를 1씩 증가시킨다.
2. 반복문 내부에서 먼저 콜론 문자에서 현재 연락처(contacts[i]) 를 나누고 결과값이 두 값을splitContact라는 배열에 저장한다.
3. 그런 다음 splitContact[0] (the contact's name)의 값과 입력된 값 searchName이 같은지 조건문을 이용하여 테스트한다. 두값이 같은 경우, 우리는 para 값에 문자열을 입력하여 연락처 번호를 알린후 break 을 사용하여 loop를 종료한다.
연락처 이름(contacts.length-1) 을 반복한 후 연락처 이름이 입력 된 검색과 일치 하지 않으면 단락 텍스트가 "연락처 를 찾을 수 없습니다."로 설정되고 반복문이 계속 반복된다.

Note: 너는 full source code on GitHub too (also see it running live) 에서 전체 코드를 볼수있다.

Continue로 반복 건너뛰기

continue문은 break과 비슷한 방식으로 작동하지만 loop에서 완전히 벗어나는 대신 loop의 다음 반복으로 건너 뛰게된다. 숫자를 입력으로 사용하고 정수의 제곱 인 숫자 (정수)만 반환하는 또 다른 예를 살펴보자.

HTML 코드는 기본적으로 마지막 예제와 같다 — 간단한 텍스트 입력 및 출력을 위한 단락, loop자체가 약간 다르긴 하지만 JavaScript는 대부분 동일하다 :

let num = input.value;

for (let i = 1; i <= num; i++) {
  let sqRoot = Math.sqrt(i);
  if (Math.floor(sqRoot) !== sqRoot) {
    continue;
  }

  para.textContent += i + ' ';
}

여기에서 출력값을 볼수있다:

Hidden code 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Integer squares generator</title>
    <style>

    </style>
  </head>
  <body>

  <label for="number">Enter number: </label>
  <input id="number" type="text">
  <button>Generate integer squares</button>

  <p>Output: </p>


    <script>
    const para = document.querySelector('p');
    const input = document.querySelector('input');
    const btn = document.querySelector('button');

    btn.addEventListener('click', function() {
      para.textContent = 'Output: ';
      let num = input.value;
      input.value = '';
      input.focus();
      for (let i = 1; i <= num; i++) {
        let sqRoot = Math.sqrt(i);
        if (Math.floor(sqRoot) !== sqRoot) {
          continue;
        }

        para.textContent += i + ' ';
      }
    });
    </script>

  </body>
</html>

{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

이 경우에 입력된 값은 숫자(num)여야 한다. for loop는 1에서 시작하는 카운터(이 경우에는 0에 관심이 없기 때문에), 카운터가 입력 num 보다 커질 때 루프가 중지 될 것이라고 말하는 종료 조건 및 매회 마다 1씩 증가되는 반복자가 주어진다.
Loop 내에서Math.sqrt(i)를 사용하여 숫자의 제곱근을 찾은 다음 제곱근이 가장 가까운 정수로 반올림 된 경우와 같은지 테스트 하여 제곱근이 정수인지 확인한다. Math.floor()가 전달받은 숫자에 대해 정수로 바꿔준다.
만약 제곱근과 정수로 바뀐 제곱근이 서로 같지 않다면(!==) 제곱근이 정수가 아니므로 관심이 없다. 이 경우continue 문을 사용하여 번호를 기록하지 않고 다음 루프 반복으로 건너 뛴다.
만약 제곱근이 정수 인 경우 continue 문이 실행되지 않도록 if 블록을 지나치게 건너 뛴다. 대신 현재 i 값과 단락 내용 의 끝 부분에 공백을 연결한다.

Note: 너는 full source code on GitHub too (also see it running live)에서 전체 코드를 볼수 있다.

while 그리고 do ... while

for 는 JavaScript에서 사용할 수 잇는 유일한 유형의 loop가 아니다. 실제로 많은 다른 것들이 있따. 지금 모든 것을 이해할 필요는 없지만 약간 다른 방식으로 같은 기능을 인식 할 수 있도록 몇 가지 다른 구조를 살펴 보는것이 좋다.

먼저 while loop를 살펴보자 이 loop의 구문은 다음과 같다:

initializer
while (exit-condition) {
  // code to run

  final-expression
}

이는 for loop와 매우 비슷하게 작동한다. 단, initializer 변수가 loop 앞에 설정되어 있고, final-expression이 실행되는 코드 다음에 loop 내에 포함되어 있지 않다. 이 두개가 괄호 안에 포함되어 있지 않다. exit-조건은 괄호 안에 포함되며 for대신 while 키워드가 온다.

같은 세 가지 항목이 여전히 존재하며 for loop와 동일한 순서로 정의되어 있다. exit 조건에 도달햇는지 여부를 확인 하기 전에 initializer를 정의해야 하므로 의미가 있다. loop 내부의 코드가 실행 된 후 최종 조건이 실행되고 (반복이 완료 되었다.) 이는 exit 조건에 아직 도달하지 않은 경우에만 발생한다.

고양이 목록 예제를 다시 한번 살펴 보자 while loop를 사용하도록 다시 작성해 보자:

let i = 0;

while (i < cats.length) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
}

Note: 이것은 여전히 예상하는 바와 똑같이 작동한다 running live on GitHub (also view the full source code).

do...while loop 는 많이 비슷하지만 while 구조에 변형을 제공한다:

initializer
do {
  // code to run

  final-expression
} while (exit-condition)

이 경우 루프가 시작되기 전에 initializer가 다시 시작된다. do 키워드 는 실행할 코드와 최종 표현식을 포함하는 중괄호 바로 앞에 온다.

여기서 차별화 요소는 종료 조건이 그 밖의 모든 것 다음에 괄호로 묶여 있고 while 키워드로 시작한다는 것이다. do...while loop 에서 중괄호 안의 코드는 체크가 실행되기 전에 항상 한 번 실행되어 다시 실행되어야 하는지를 확인한다.( 체크가 먼저 오면 코드가 실행 되지 않을 수도 있다.)

do...while loop를 사용하기 위해 고양이 목록 예제를 다시 작성해 보자:

let i = 0;

do {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
} while (i < cats.length);

Note: 다시 말하지만 이것은 예상했던 것과 똑같이 작동한다. running live on GitHub (also view the full source code).

중요: while과 do ... while - while - 모든 loop와 마찬가지로 - initalizer 가 반복 되어 결국 종료 조건에 도달하는지 확인해야 한다. 그렇지 않으면 loop는 영원히 계속되고 브라우저가 강제로 종료 시키거나 충돌한다. 이를 infinite loop(무한 루프)라한다.

활동 학습: 카운트 다운 시작!

이 연습에서 출력 상자에 간단한 발사 카운트 다운을 인쇄하여 특히 우리가 원하는10에서 Blast off로 출력한다:

Loop를 10에서 0으로 반복한다 initializer — let i = 10;.
반복 할때 마다 새로운 단락을 만들어 const output = document.querySelector('.output'); 를 사용하여 <div>에 추가한다. comments에서 우리는 loop의 어딘가에 사용되어야하는 세 개의 코드 라인을 제공했다:
- const para = document.createElement('p'); — 새로운 단락 생성.
- output.appendChild(para); — 문단을 <div>에 추가
- para.textContent = — 단락 안의 텍스트를 등호 다음에 오른쪽에 놓은 것과 동일하게 만든다.
다른 반복 숫자는 해당 반복에 대한 단락에 다른 텍스트를 넣어야한다.(조건문과 여러 문장이 필요하다 para.textContent = lines):
- 숫자가 10이면 단락에 "카우트 다운 10."을 출력해라
- 숫자가 0이면 "Blast off!"라고 단락에 출력해라.
- 다른 번호의 경우 단락에 숫자만 출력해라.
반복자를 포함하는 것을 잊지 말아라! 그리고 이 예제에서 각각의 반복 후에 숫자가 증가되는게 아니게 카운트 다운을 하고있다.너는 i++ 원하지 않는다.— 어떻게 아래로 반복시킬까?

만약 실수를 한 경우 "재설정" 버튼을 사용하여 예제를 얼마든지 재설정 할수 있다. 정말 모르겠다면 "soultion보기"를 눌러 풀이를 보자

Active learning

<h2>Live output</h2>
<div class="output" style="height: 410px;overflow: auto;">

</div>

<h2>Editable code</h2>
<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
<textarea id="code" class="playable-code" style="height: 300px;width: 95%">
let output = document.querySelector('.output');
output.innerHTML = '';

// let i = 10;

// const para = document.createElement('p');
// para.textContent = ;
// output.appendChild(para);
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
let solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  let scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  let front = (textarea.value).substring(0, caretPos);
  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

활동 학습: 손님 목록 작성

이 연습에서 배열에 저장된 이름 목록을 가져 와서 손님 목록에 넣기를 원한다. 그러나 그것은 쉽지 않다. — 우리는 Phil과 Lola가 욕심 많고 무례하고, 항상 모든 음식을 먹기 때문에 Phil과 Lola를 들여 보내고 싶지 않다. 우리는 초대할 손님 목록과 거절할 손님목록을 가지고 있다.

특히, 우리가 너에게 원하는 것:

0부터 people 배열의 길이까지 반복 할 loop를 작성해라. let i = 0; 를 initializer 로 시작해야 하지만 종료 조건은 무엇일까?
각 loop 반복 중에 조건문을 사용하여 현재 배열 항목이 "Phil"또는 "Lola"와 같은지 확인해라:
- 그럴 경우 배열 항목을 refused 된 단락의 textContent, 끝에 쉽표와 공백을 붙여 연결해라 .
- 그렇지 않은 경우 배열 항목을 admitted 된단락의 textContent, 끝에 연결하고 뒤에 쉼표와 공백을 붙인다.

우리는 너에게 이미 아래의 것들을 제공했다:

let i = 0; — 너의 initializer.
refused.textContent += — refused.textContent 의 끝까지 무언가를 연결할 라인의 시작
admitted.textContent += — admitted.textContent 의 끝까지 무언가를 연결할 행의 시작 부분이다.

추가 보너스 질문 — 위의 작업을 성공적으로 마친 후에는 쉼표로 구분 된 두 개의 이름 목록이 남지만 정리되지 않는다. 각 끝에 쉼표가 표시된다. 각각의 경우에 마지막 쉼표를 잘라내는 줄을 작성하는 방법을 알아 내고 마지막에 모든것을 멈추는 코드를 추가할수 있겠어? 도움이 되는 Useful string methods 도움말을 읽어봐라.

실수를 한 경우 "재설정"버튼을 사용하여 예제를 언제든지 재설정 할 수 있다. 정말 힘들다면 "solution보기"를 눌러 풀이를 확인할수 있다.

Active learning 2

<h2>Live output</h2>
<div class="output" style="height: 100px;overflow: auto;">
  <p class="admitted">Admit: </p>
  <p class="refused">Refuse: </p>
</div>

<h2>Editable code</h2>
<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
<textarea id="code" class="playable-code" style="height: 400px;width: 95%">
const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];

const admitted = document.querySelector('.admitted');
const refused = document.querySelector('.refused');
admitted.textContent = 'Admit: ';
refused.textContent = 'Refuse: '

// let i = 0;

// refused.textContent += ;
// admitted.textContent += ;

</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
let solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  let scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  let front = (textarea.value).substring(0, caretPos);
  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

어떤 loop종류를 사용하나?

기본적으로 for, while, 그리고 do...while loops 는 상호 교환이 가능하다. 그들은 모두 동일한 문제를 해결하는 데 사용할수 있으며, 사용하는 것은 주로 개인의 취향에 달려 있다. 가장 기억하기 쉽거나 가장 직관적인 방법을 찾아라. 다시 한번 살펴보자.

First for:

for (initializer; exit-condition; final-expression) {
  // code to run
}

while:

initializer
while (exit-condition) {
  // code to run

  final-expression
}

and finally do...while:

initializer
do {
  // code to run

  final-expression
} while (exit-condition)

우리는 적어도 for를 처음에는 모든 것중에 기억하는 것이 가장 쉽기 때문에 추천한다. — initializer, exit 조건 및 최종 표현식은 모두 괄호 안에 깔끔하게 들어가야 하므로 어디에 있는지 쉽게 알 수 있다. 너가 그것들을 놓치지 않게 잘 점검해보자.

Note: 고급 / 특수한 상황에서 나아가 다른 loop 유형 / 기능도 있다. loop 학습으로 더 자세히 알고 싶다면 Loops and iteration guide 를 읽어보자.

결론

이 설명에서는 기본 개념과 JavaScript에서 반복되느 코드를 사용할 수 있는 여러 가지 옵션에 대해 설명했다. 이제 loop가 반복적 인 코드를 처리하는 좋은 메커니즘 인 이유를 명확히 파악하고 자신의 예제에서 사용하도록 노력해야한다!

만약 이해가 되지 않는 내용이 있으면 다시 내용을 읽어보거나 contact us 를 통해 도움을 요청하자.

또한 볼것

Loops and iteration in detail
for statement reference
while and do...while references
break and continue references
What’s the Best Way to Write a JavaScript For Loop? — some advanced loop best practices

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}