for 반복문

제어문: if조건문, switch문, for반복문 while반복문 등

개발을 하다 보면 여러 동작을 반복해야 하는 경우가 종종 생깁니다.
상품 목록에서 상품을 차례대로 출력하거나 숫자를 1부터 10까지 하나씩 증가시키면서 동일한 코드를 반복 실행해야 하는 경우같이 말이죠.

for 반복문은 while 반복문보다는 복잡하지만 가장 많이 쓰이는 반복문입니다.

for 반목문

• 각 반복이 시작하기 전에 조건을 확인합니다. 추가 세팅을 할 수 있습니다.
• 반복 횟수에 중점을 둬 조건이 만족되는 동안 반복 실행
• 조건식이 falsy가 되면 반복 종료

<script>
    for(초기값; 조건식; 증감식){
        실행문;
    }
</script>

---

예시 1

• 1부터 10까지 출력

<script>
for(let i = 1; i <= 10; i++){//조건식이 참인 경우 증가 실행
    console.log(i)
} // let i = 1(초기값) i <- 10(조건식) i++(증감식)
</script>
결과 = 1 2 3 4 5 6 7 8 9 10

---

예시 2

• 1~10의 합을 계산
• 1+2+3+4+5+6+7+8+9+10 = ??

<script>
let sum = 0; //숫자로 변수 초기화 필요. sum은 0부터 시작
for (let i = 1; i <= 10; i++) { // i는 1부터 시작
  sum += i; // += 더하기 대입 연산자. sum에 i를 더해서 sum값을 새로운 값으로 갱신
}
console.log(sum);
결과 = 55
/*
	i가 1일 때 sum(0) + i(1) -> sum(1) 재할당. 재대입
	i가 2일 때 sum(1) + i(2) -> sum(3) 
	i가 3일 때 sum(3) + i(3) -> sum(6)
	...
	i가 10일 때 sum(45) + i(10) -> sum(55)
	i가 11일 때 i <= 10 조건을 만족시키지 못하기 때문에 실행x
*/
</script>

---

예시 3

• 구구단 2단 출력

<script>
let  total = 0;
for(let i = 1; i <= 9; i++){
    total = 2 * i;// 변하지 않는 값을 실행문에.
    console.log(`2 * ${i} = ${total}`);// 1~9까지 모두 출력돼야 하므로 반복문 안에 console.log 작성
}
</script>
결과 = 
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18

---

예시 4

• 사용자가 입력한 값 까지의 합을 출력
• 예) 4 입력 시 1+2+3+4값 출력

<script>
let getNum = prompt("숫자를 입력해 주세요");
getNum = +getNum; //숫자열로 변환
let total = 0;
      for (let i = 1; i <= getNum; i++) {
        total += i; //+ = 더하기 대입 연산자. total에 i를 더해서 total값을 새로운 값으로 갱신
      }
      document.body.textContent = `사용자가 입력한 ${getNum} 까지의 합은 ${total}입니다`;
// i <= getNum 인 이유 = 사용자가 입력한 값 3이면 1~3까지만 계산되어야 함. 입력한 값 까지만 증가되어야 하므로.
</script>

---

예시 5

• *중첩문
• 1부터 100사이의 숫자 중
• 3의 배수이지만 7의 배수는 아닌 숫자만 출력

<script>
for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0 && i % 7 !== 0) { //3의 배수를 얘기 7의 배수는 아님을 얘기.
    console.log(i);
  }
}
</script>

---

예시 6

• 구구단 2단부터 9단까지 모두 출력

<script>
let total = 0;
      let i, j;

      for (i = 2; i <= 9; i++) {
        document.write(`<h3>--- ${i}단 ---</h3>`);
        for (j = 1; j <= 9; j++) {
          // * 1,2,3,4,5,6,7,8,9
          total = i * j;
          document.write(`${i} * ${j} = ${total}<br>`);
        }
      }
</script>

• 결과

---

예시 7

• 입력받은 구구단 출력
• 2~9 외의 숫자 입력시 에러메시지 출력

<script>
let getNum = prompt('2~9까지의 숫자를 입력해 주세요');
let total = 0;
let j;

    if(getNum <= 9 && getNum > 1){// 2 ~ 9 까지
        document.write(`<h3>--- ${getNum}단 ---</h3>`)// 안내선
        for(j = 1; j <= 9; j++){ //1,2,3,4,5,6,7,8,9
                total = getNum * j;
                document.write(`${getNum} * ${j} = ${total}<br>`);
        }               
    }
    else{
        alert('2~9까지의 숫자만 입력해 주세요');
    }
</script>

---

예시 8

• 두 개의 주사위를 던졌을 때 두 수의 값이 6인 경우만 출력
• 첫번째 주사위를 던졌을 때, 두번째 주사위의 값이 대응

<script>
let firstDice;
let secondDice;
for(let i = 1; i <=6; i++){// 첫번째 주사위  1~6

    for(let k = 1; k <= 6 ; k++){// 두번째 주사위 1~6
        let sum = i + k;

        if(sum === 6){// 두번째 주사위와의 합이 6인 경우만 출력
            console.log(`첫번째 주사위 값: ${i}, 두번째 주사위 값: ${k}`);
        }
    }

}
</script>