자바스크립트 기본 문법 5 - 반복문 개념 학습 및 실습해보기 + 미션 문제 풀기

이제 반복문에 대한 공부를 시작해 보겠다.

---

 

 

 

반복문에 대한 개념 학습

 

 

 

 

 

 

 

 

 

---

 

 

 

 

반목문 실습해 보기

 

1. JS 파일 만들고 HTML 문서로 연결하기

---

 

 

 

2. while 문 출력하기

 

 

조건이 만족할 때까지 0부터 출력이 되고 있다.

---

 

 

 

3. while 문이 종료되는 조건 넣어 출력하기

 

하지만 이 코드를 실행하니 무한루프에 빠져서 컴퓨터가 잠시 먹통이 되기도 했다. 선생님이 코드를 잘못 쓴 거였다. 근데 이 선생님은 자신의 실수를 조금도 인정하지 않고 코드를 잘못 쓰는 경우도 몇 번 있었는데 그때마다 마치 새로운 사실을 하나 더 알려주는 듯이 상황을 모면하는 모습을 보였다.

난 이런 강사님은 신뢰가 가지 않는다. 하지만 강사들 중에 이런 사람들이 종종 있다. Spring을 가르치던 선생님도 전형적인 이런 사람이었다.

 

어쨌든 간신히 무한 루프를 빠져나왔다. 이제 그 이유를 분석해 보겠다. 주어진 코드의 두 번째 구문에서 무한루프에 빠지는 이유는 num1 값이 첫 번째 while 루프와 두 번째 while 루프에서 공유되고 있기 때문이다.

 

 

코드의 동작 흐름 분석

첫 번째 while 문

let num1 = 0;
console.log('(1) while 문');
while (num1 < 3) {
    console.log(num1);
    num1++;
}

 

1. num1은 처음에 0으로 초기화된다.
2. 조건 num1 < 3이 참인 동안 console.log(num1)과 num1++이 실행된다.
3. num1이 3이 되면 조건이 거짓이 되어 while 루프가 종료된다.
4. 결과적으로, 첫 번째 while 문 실행 후 num1의 값은 3이 된다.

 

 

두 번째 while 문

while (true) {
    console.log(num1);
    num1++;
    if (num1 == 3) break;
}

 

 

1. 두 번째 while 문이 시작될 때, num1은 이미 3이다(첫 번째 while 문에서 변경되었기 때문).
2. 첫 번째 반복에서:
   • console.log(num1)이 실행되어 3이 출력된다.
   • num1++이 실행되어 num1은 4가 된다.
   • 이후 조건 if (num1 == 3)은 거짓이므로 break가 실행되지 않고 루프가 계속된다.
3. num1이 계속 증가하면서 절대 3이 될 수 없으므로 break 조건이 절대 실행되지 않고 무한 루프에 빠지게 된다.

---

 

 

4. 무한 루프에 빠지지 않도록 코드 수정하기

이 코드에서 num1의 값을 초기화하면 된다.

 

 

여기서는 num2라는 새로운 변수를 생성해서 이 값을 초기화했다.

 

 

 

 

값은 0, 1, 2로 잘 출력되고 있다. num2의 값이 종료되는 조건은 다음과 같이 변경하며 다른 결과가 출력된다.

---

 

 

 

5. 종료되는 조건 변경하기

 

---

 

 

 

6. for 문 조건 걸고 출력하기

 

 

값이 잘 출력되었다.

---

 

 

 

반복문 미션 문제

 

랜덤 숫자를 입력받고 그 값을 맞출 때까지 알려주는 과정을 반복한다.

---

 

 

 

1. JS 파일 만들고 HTML 문서와 연결하기

---

 

 

 

2. 랜덤 숫자 생성하기

 

이것은 0에서 1 난수를 생성하는 함수이다. 이제 이것을 0에서 100 사이의 값의 난수를 생성하는 코드를 작성해 볼 것이다.

 

 

 

하지만 선생님 코드와 다르게 난수가 만들어지지 않았다. 코드에서 Math.round()를 호출했지만, 인자를 전달하지 않았기 때문에 NaN이 출력된 것이다. Math.round()는 숫자를 인자로 받아야 하며, 인자가 없을 경우 결과는 NaN(Not a Number)이 된다. 비주얼 코드에서는 이것을 입력하는 기능은 없고 Node.js에서는 가능하다고 한다.

 

여기서 100을 곱해서 값을 정수 이상이 나오도록 변경한다. 그런 다음 정수만 가져오면 우리가 원하는 값이 출력된다.

---

 

 

 

3. 코드 다시 작성하기

보니까 코드를 잘못 써서 다시 작성해 보았다.

 

 

 

이제 랜덤 수가 잘 나오고 있다. 계속해서 바뀌지는 않고 다시 코드를 실행하면 랜덤 수가 바뀌었음을 볼 수 있다.

 

 

---

 

 

 

4. 100을 곱한 정수 이상의 난수 생성하기

 

 

100을 곱한 다음 정수로 변환하는 형 변환을 하고 거기에 1을 더하면 0의 값도 1로 출력이 될 것이다. 출력 결과를 보면 57이 잘 만들어졌다. 하지만 이제 계속해서 값을 받아와야 하니 변수를 하나 생성해 줄 것이다.

---

 

 

 

5. 조건에 맞는 식 작성하기

 

난수를 담을 변수를 하나 생성하고 반복해서 난수를 가져와야 하므로 이를 while 문으로 풀면 된다. 입력받을 숫자는 프롬프트 창에서 받을 것이므로 prompt라고 써주고, 문자를 숫자 형태로 형 변환한다. 왜냐하면 프롬프트 입력은 리턴 타입이 모두 String이므로 숫자 형태로 바꾸는 작업이 필요하다.

그런 다음 조건에 따른 다른 창이 올 수 있도록 조건문을 써준다. 그리고 반복문을 종료할 때는 break를 붙인다.

 

 

 

 

 

 

 

 

몇 번의 과정을 반복한 수에 답을 드디어 맞혔다.

 

 

 

 

콘솔 창에 들아가 보면 값이 남아있지 않았다.

---

 

 

 

학습을 마치고

마지막 과제는 조금 어려웠다. 그래도 이렇게 어려운 문제를 풀고 이해하고 나면 실력이 전보다 향상되는 것 같아 참 기쁘다. 끝날 시간이 다 되어서 다음날 과제로 나머지 부분을 풀어오라고 하셨다. 그때는 이 문제도 무슨 말인지 거의 이해하지 못했는데 지금은 잘 알 수 있게 되어 감사하다.

다음 학습은 배열인데 그전에 책으로 반복문까지 공부를 진행하려고 한다.