제로초 JavaScript 강의 - 반복문 for

 

• 제로초 JavaScript 강의 - 반복문 for

---

Review

 

 

 

 

 

 

---

 

• 제로초 JavaScript 강의 - 반복문 for

 

<for 문으로 반복해서 출력하기>

 

 

: 반복문에는 while 문 외에도 for 문이 있다. for 문은 다음과 같이 사용한다.

 

for (시작; 조건식; 종료식)
  실행문;

 

for 문의 소괄호에는 세 가지 요소가 들어간다. 시작(식과 변수 선언이 들어갑니다)과 조건식과

종료식이다. 조건식과 실행문은 while 문과 같다. 실행문이 여러 개이면 중괄호로 묶어 줄 수 있다. 

while 문보다 복잡하게 보일 수 있지만, 코드를 넣어 보면 그렇지 않다.

 

> for (let i = 0; i < 100; i++) {
    console.log('Hello, for!');
  }

(100) Hello, for!

 

콘솔에 Hello, for!를 100번 출력하는 코드이다. 이때 for 문의 실행 순서는 다음과 같다.

 

for 문 실행 순서

 

시작 부분이 먼저 실행되고 나서 조건식, 실행문, 종료식 순서대로 실행된다.

그 후 다시 조건식을 검사해 만약 조건식이 참이라면 실행문과 종료식을 반복해서 실행한다.

여기서 while 문과 유사한 부분이 보인다. 

while 문에서 흩어져 있던 반복문 요소들을 for 문에서는 모아서 표현하고 있다.

 

while 문과 for 문 비교

 

참고로 for 문의 시작, 조건식, 종료식은 생략할 수 있다. 따라서 다음과 같은 코드도 가능하다.

 

> for (;;) {
  }

  (무한 반복)

 

단, 실제로 코드를 실행하면 무한 반복되어 프로그램이나 브라우저가 멈춰 버린다.

조건식이 없어서 반복문이 종료되지 않기 때문이다.

 

 

 

 

<1부터 100까지 출력하기>

 

: 이번에는 같은 값을 반복해서 출력하는 대신, 다른 값을 연이어 출력해 보겠다.

1부터 100까지 반복해서 출력하려면 어떻게 해야 할까?

 

> let i = 0;
  while (i < 100) {
    console.log(i + 1);
    i++;
  }

  1
  2
  3
  ...
  100
< 99

 

i가 0부터 시작하므로 console.log(i + 1)을 해야만 1부터 100까지 출력된다. 

console.log(i)를 한다면 0부터 99까지 출력될 것이다.

 

<1분 퀴즈>

 

1부터 100까지 출력하는 코드를 for 문으로 바꿔 보세요.

 

> for (i = 0; i < 100; i++) {
    console.log(i + 1);
  }

  1
  2
  3
  ...
  100
< 99

 

 

여기서 내가 실수한 것은 세미콜론이 아니라 쉼표를 작성해놓고 계속 왜 안되느냐며 찾고 있었다.

 

'Uncaught SyntaxError: Identifier 'i' has already been declared' 이라는 오류가 떴는데

엥 i가 이미 선언됐다니 !!!! 뭐가 문제지 찾다 보니 세미콜론과 쉼표가 헷갈렸다.

이렇게 간단한 오류인데도 내 눈에 한참동안 들어오지 않았다.

 

 

 

---

 

 

<break 문으로 반복문 멈추기>

 

 

: 반복문을 중간에 멈춰야 하는 경우를 생각해보자.

예를 들어, 반복문을 돌릴 대상이 무한히 많을 때가 있다.

자연수나 실수 전체를 대상으로 반복문을 돌리는 경우, 반복문으로 값을 하나씩 찾다가 원하는 값을

찾으면 반복문을 멈춰야 한다. 멈추지 않으면 반복문이 실행되느라 다음 코드를 실행할 수 없고 찾은

값을 사용할 수 없다. 이럴 때 break 문으로 반복문을 멈춘다.

 

> let i = 0;
  while (true) {
    if (i === 5) break;
    i++;
  }
  console.log(i);

  5

 

예제의 반복문은 배운 대로라면 while (true)이기 때문에 무한히 반복된다.

하지만 실행문에 break 문이 들어 있다는 점을 주목해야 한다. i가 5가 되면 반복문은 종료된다.

따라서 예제의 반복문은 무한히 실행되지 않는다.

 

i가 1일 때 false이기 때문에 실행되지 않고, 2일 때도 false, 3일 때도 false, 4일 때도 false,

5일 때 true니까 실행되고 끝이다.

 

 

무한 반복일 때 for 문과 while 문 중 어느 쪽이 더 편할까?

무한 반복문을 표현할 때는 보통 while 문을 더 많이 사용한다. for 문으로도 가능하지만 while 문이

더 간결하기 때문이다. 하지만 두 경우 모두 break 문이 없으면 의미가 없다.

다음 코드로 while 문과 for 문을 비교해보자.

 

 

- while 문

let i = 0;
while (true) {
  console.log(i);
  i++;
}

 

 

- for 문

for (let i = 0; ; i++) {
  console.log(i);
}

 

for 문은 조건식이 생략되어 무한 반복된다. 하지만 보통은 조건식을 잘 생략하지 않기 때문에

어색해 보일 수 있다. 그래서 무한 반복을 표현할 때는 while 문을 더 많이 쓴다.

 

 

 

 

<continue 문으로 코드 실행 건너뛰기>

 

가끔 반복문이 특정 조건에서만 실행되기를 원할 수도 있다. 이럴 때는 continue 문을 사용한다.

continue 문을 넣으면 이후 코드는 건너뛰게 된다.

 

> let i = 0;
  while (i < 10) { // 홀수만 console.log
    i++;
    if (i % 2 === 0) { // 짝수만
      continue; // 건너뛰기
    }
    console.log(i);
  }

  1
  3
  5
  7
  9

 

예제는 i가 홀수일 때 i를 콘솔에 출력하는 코드이다. 

continue 문이 실행되면 그 뒤의 실행문은 실행되지 않으므로 짝수일 때만 continue 문이 실행되도록

작성했다. 보통 때와는 다르게 i++가 위에 있는 이유도 생각해보자.

 

 

 

 

<중첩된 반복문 사용하기>

 

 

: 프로그래밍할 때 어려운 것 중 하나가 반복문 안에 반복문이 들어 있는 경우인데,

이를 중첩 반복문이라고 한다. 

 

> for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      console.log(i, j);
    }
  }

  0 0
  0 1
  0 2
  0 3
  ...
  9 7
  9 8
  9 9
  
  
  // i == 0, j == 0    console.log(0,0);
  // i == 0, j == 1    console.log(0,1);
  // i == 0, j == 2    console.log(0,2);
  // i == 0, j == 9    console.log(0,9);
  // i == 0, j == 10   조건X
  
  // i == 1, j == 0    console.log(1,0);
  // i == 1, j == 9    console.log(1,9);
  // i == 1, j == 10   조건X
  
  // i == 9, j == 0    console.log(9,0);
  // i == 9, j == 9    console.log(9,9);
  // i == 9, j == 10   조건X

 

변수로 i와 j 두 개를 사용했다.

반복문이 중첩됐을 때는 변수의 값이 어떻게 변하는지 추적하는 것이 중요하다.

 

 

반복문의 실행 순서

 

먼저 i가 0일 때 두 번째 반복문이 실행된다.

여기서 j가 0에서 9까지 증가한 후에 i가 1이 되고, 다시 j가 0에서 9까지 증가한다.

이 과정이 반복되어 i가 9가 되고 j가 9가 됐을 때 반복문이 종료된다.

 

반복문이 두 번 이상 중첩될 수도 있다.

삼중 반복문을 보자. 변수 i, j, k가 홀수일 때만 콘솔에 출력하도록 했다.

 

> for (let i = 0; i < 5; i++) {
    if (i % 2 === 0) continue;
    for (let j = 0; j < 5; j++) {
      if (j % 2 === 0) continue;
      for (let k = 0; k < 5; k++) {
        if (k % 2 === 0) continue;
        console.log(i, j, k);
      }
    }
  }

  1 1 1
  1 1 3
  1 3 1
  1 3 3
  3 1 1
  3 1 3
  3 3 1
  3 3 3
  
  
  // i == 0  continue
  // i == 1, j == 0  continue
  // i == 1, j == 1, k == 0  continue
  // i == 1, j == 1, k == 1  console.log(1, 1, 1)
  // i == 1, j == 1, k == 2  continue
  // i == 1, j == 1, k == 3  console.log(1, 1, 3)
  // i == 1, j == 1, k == 4  continue
  // i == 1, j == 1, k == 5  조건 false
  // i == 1, j == 2  continue
  // i == 1, j == 3, k == 0  continue
  // i == 1, j == 3, k == 1  console.log(1, 3, 1)
  // i == 1, j == 3, k == 2  continue
  // i == 1, j == 3, k == 3  console.log(1, 3, 3)
  // i == 1, j == 3, k == 5  조건 false
  // i == 1, j == 4  continue
  // i == 1, j == 5  조건 false
  // i == 2  continue
  // i == 3, j == 0  continue
  // i == 3, j == 1, k == 0  continue
  // i == 3, j == 1, k == 1  console.log(3, 1, 1)
  // i == 3, j == 1, k == 2  continue
  // i == 3, j == 1, k == 3  console.log(3, 1, 3)
  // i == 3, j == 1, k == 4  continue
  // i == 3, j == 1, k == 5  조건 false
  // i == 3, j == 2  continue
  // i == 3, j == 3, k == 0  continue
  // i == 3, j == 3, k == 1  console.log(3, 3, 1)
  // i == 3, j == 3, k == 2  continue
  // i == 3, j == 3, k == 3  console.log(3, 3, 3)
  // i == 3, j == 3, k == 4  continue
  // i == 3, j == 3, k == 5  조건 false
  // i == 3, j == 4  continue
  // i == 3, j == 5  조건 false
  // i == 4  continue
  // i == 5 조건 false 끝 !!!

 

 

 

<퀴즈>

 

구구단을 출력하되, 결과에 짝수가 하나도 나오지 않게 해 보세요. continue 문을 사용하세요.

 

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) continue;
    for (let j = 0; j < 10; j++) {
      if (j % 2 === 0) continue;
        console.log(i, j, i * j); 
    }
}
  
  
  /* for (let i = 1; i < 10; i++) {
       for (let j = 1; j < 10; j++) {
         if (i % 2 === 0 || j % 2 === 0) continue;
        console.log(i, 'X', j, '=', i * j); 
       }
     }  */

 

만약 continue 문을 사용하기 싫다면,

 

for (let i = 1; i < 10; i = i + 2) {
       for (let j = 1; j < 10; j += 2) {
        console.log(i, 'X', j, '=', i * j); 
       }
}

 

i +=2 라고 작성해서 짝수를 걸러내는 방법도 있다. 

사람마다 다른 정답이 나올 수도 있으니 다양하게 사고하는 힘을 기르는 것이 중요하다.

 

 

 

<별찍기>

 

> for (let i = 5; i >= 1; i--) {
	console.log('*'.repeat(i));
  }


< *****
  ****
  ***
  **
  *

 

5, 4, 3, 2, 1 순서로 별을 찍는 것이다.

그런데 여기서 let i = 0로 고정시킨 상태에서 5, 4, 3, 2, 1 순서로 별을 찍으려면 어떻게 해야할까?

 

 

- 내 답안

 

for (let i = 0; i > -5 ; i--) {
	console.log('*'.repeat(i + 5));
}

 

- 제로초님의 답안

 

for (let i = 0; i < 5 ; i++) {
	console.log('*'.repeat(5 - i));
}

// 0   5   5-0
// 1   4   5-1
// 2   3   5-2
// 3   2   5-3
// 4   1   5-4

 

결과는 같다.

제로초님의 답은 규칙을 찾는 것이다. 조금 더 논리적인 답안인 것 같다.

 

 

다음은 1, 3, 5, 7, 9 순서로 별을 찍으려면 어떻게 해야할까?

 

for (let i = 1; i < 10 ; i += 2) {
	console.log('*'.repeat(i));
}

*
***
*****
*******
*********

 

9, 7, 5, 3, 1 순서로 별을 찍으려면 어떻게 해야할까?

 

for (let i = 9; i >= 1 ; i-=2) {
	console.log('*'.repeat(i));
}


*********
*******
*****
***
*