[JavaScript] 06. Loops 반복

반복은 중지 조건이 될 때까지 명령들을 반복하는 프로그래밍 구조입니다. 루프를 참조할 때 iterate 를 사용하게 되는데 이는 "반복하다"라는 의미입니다. 코드에서 작업을 재사용할 때는 함수로 묶습니다. 같은 원리로 프로세스가 한 행에서 여러 번 반복되면 루프를 작성해야합니다. 

다이어그램처럼 루프는 특정 조건이 충족될 때까지 작업을 반복합니다.

---

📌 Loops / 반복

📚 Repeating Tasks Manually / 직접 반복하기

우리가 배운 방법들을 이용해 각 배열의 요소를 출력하는 방법은 다음과 같습니다. 같은 코드가 반복되고 요소가 많다면 이 작업이 굉장히 힘들 것입니다.

let vacationSpots = ['Seoul', 'Tokyo', 'London']
console.log(vacationSpots[0])
console.log(vacationSpots[1])
console.log(vacationSpots[2])

---

📚 The For Loop / For 반복문

동일한 코드를 반복해서 작성하는 것 보다는 루프를 사용하는 것이 더 좋습니다. for 루프에는 세 가지 식을 작성하여 반복할 횟수와 기준 등을 조절할 수 있습니다. 

 

for 반복문은 괄호 안에 ;으로 구분된 세 개의 표현식으로 반복합니다.

• for ( 초기식 ; 중지 조건 ; 반복문 )  { ... }
• 초기화는 루프를 시작하고 반복자 변수를 선언하는데 사용할 수 있습니다.
• 중지 조건은 반복 변수가 평가되는 조건입니다.
  조건문의 불리언 값이 true 이면 블럭 내 코드가 실행되고 false이면 실행 반복을 멈춥니다.
• 반복문은 루프에서 반복자 변수를 업데이트하는데 사용됩니다.

 

아래 코드를 보며 for 반복문을 익혀봅시다. (엔터는 \ 로 표시했습니다.)

for (let counter = 0; counter < 4; counter++) {
  console.log(counter);
}
// Output: 0 \ 1 \ 2 \ 3

• 초기화 : let counter = 0 을 통해 반복 변수 counter 를 초기화합니다.
• 중지 조건 : counter 변수가 4 미만일 때가지만 루프가 실행됩니다.
• 반복문 :  counter 변수 값이 1씩 증가됩니다. 
• 코드 블록 : 중지 조건을 만족시킬 때 만큼 { } 안에 있는 문장을 반복합니다. 

---

📚 Looping in Reverse / 거꾸로 반복문

for 루프는 감소하는 형태로도 사용이 가능합니다.

for (let counter = 3; counter >= 0; counter--){
  console.log(counter);
}
// Output: 3 \ 2 \ 1 \ 0

• 초기화 : 표현식에서 반복 변수를 원하는 가장 높은 값으로 설정
• 중지 조건 : 반복자 변수가 원하는 값이 되도록 설정
• 반복문 : 원하는 값만큼 변수를 줄여나감

---

📚 Looping through Arrays / 배열에서 반복문 사용하기

for 반복문은 같은 데이터 구조를 반복할 때 사용됩니다. 배열의 각 요소에 접근하기 위해서는 인덱스 번호를 사용한다고 배웠습니다. for 반복문을 사용하면 인덱스 번호를 통해 접근이 가능합니다.

const vacationSpots = ['Bali', 'Paris', 'Tulum'];

for(let i=0; i<vacationSpots.length; i++){
  console.log('I would love to visit '+vacationSpots[i]);
}
// Output: 
// I would love to visit Bali
// I would love to visit Paris
// I would love to visit Tulum

• 배열의 length를 이용하여 중지 조건을 작성할 수 있습니다.
• 인덱스 번호를 이용하여 배열에서 원하는 작업을 진행할 수 있습니다.

---

📚 Nested Loops / 중첩 반복문

하나의 반복문 내에서 또 다른 반복문을 실행시키는 것을 중첩 반복문이라고 합니다. 외부 반복문의 각 반복에 대해 for 내부 반복문이 또 실행됩니다.

아래 예시를 보며 배워보겠습니다.

const myArray = [6, 19, 20];
const yourArray = [19, 81, 2];
for (let i = 0; i < myArray.length; i++) {
  for (let j = 0; j < yourArray.length; j++) {
    if (myArray[i] === yourArray[j]) {
      console.log('Both arrays have the number: ' + yourArray[j]);
    }
  }
}
// Output: Both arrays have the number: 19

• myArray 배열의 각 요소 값을 for 반복문을 통해 저장합니다.
• 반복문 내의 yourArray 배열의 각 요소를 저장한 값과 비교합니다.

---

📚 The While Loop / While 반복문

조건을 만족할 때까지 반복해야할 때는 while 반복문을 사용해도 됩니다. for 반복문을 while 반복문으로 바꿔봅시다.

// A for loop that prints 1, 2, and 3
for (let counterOne = 1; counterOne < 4; counterOne++){
  console.log(counterOne);
}
 
// A while loop that prints 1, 2, and 3
let counterTwo = 1;
while (counterTwo < 4) {
  console.log(counterTwo);
  counterTwo++;
}

• 변수는 반복문을 실행하기 전에 선언합니다.
• while 키워드 뒤에는 중지 조건을 적어 반복문을 끝낼 조건을 설정합니다.
  중지 조건이 true 일때는 코드 블록이 실행되고, false 이면 실행을 중지합니다.
• 변수를 출력하고 코드 블럭 내부에서 변수값이 증가합니다.

---

📚 Do...While Statements / Do While 반복문

코드를 설계하다보면 반드시 한 번 실행하고 조건을 검사한뒤 반복할지를 결정해야할 수도 있습니다. 이럴 때는 do while 반복문을 사용하면 좋습니다. 

do while 반복문은 한 번 작업을 수행한 다음 지정된 조건이 더 이상 충족되지 않을 때까지 계속 수행하도록 합니다. 

let countString = '';
let i = 0;
 
do {
  countString = countString + i;
  i++;
} while (i < 5);
 
console.log(countString); // Output: 01234

• 코드블록은 countString 변수의 문자열에 변수를 추가하여 i 를 변경합니다.
• 조건이 true로 평가되면 블록이 다시 실행되고, 조건이 false이면 실행을 멈춥니다.

do while 반복문이 while과 다른 점은 조건의 평가 여부와 관계없이 최소 한 번은 실행된다는 점입니다.

---

📚 The break Keyword / break 키워드

반복문을 수행하던 중 원래 설정했던 중지 조건보다 빨리 반복문을 끝내야할 수 있습니다. 이럴 때 사용하는 것이 break 키워드입니다. break 키워를 사용하면 프로그램이 반복문 내에서 원할 때 중단할 수 있습니다.

for (let i = 0; i < 99; i++) {
  if (i > 2) break;
  console.log('Banana.');
}

console.log('Orange you glad I broke out the loop!');
// Output: 
// Banana.
// Banana.
// Banana.
// Orange you glad I broke out the loop!

• for 반복문을 이용하여 변수 i 를 증가시키며 Banana를 출력했습니다.
• if 조건문에서 i가 2가 되면 반복문을 중지하도록 break 문을 사용했습니다.
• Banana가 출력되다가 break문이 실행되면서 반복문을 빠져나왔습니다.