[JavaScript] 반복문(for & while)

- 지난 시간

안녕하세요. 지난 시간에는 JavaScript 연산자에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다.

 

[JavaScript] 연산자(비교 연산자, 동등 연산자, 일치 연산자, 논리 연산자)

[JavaScript] 연산자(비교 연산자, 동등 연산자, 일치 연산자, 논리 연산자)

 

- 개요

이번 시간에는 반복문에 대해 알아보겠습니다.

 

우리는 프로그래밍을 하다 보면 반복적인 코드나 특정 로직에서는 반복적으로 수행해야 하는 부분들이 있습니다.

 

이러한 부분들은 반복문이라는 기술을 통해 해결할 수 있습니다.

 

JavaScript에서는 여러 가지 반복문이 있지만 이번 시간에는 기본 반복문에 대해 알아보겠습니다.

 

 

- 사용법

1. for 문

for문은 "for(초기값; 조건문; 초기 증가 값;)"으로 설정할 수 있습니다.

 

머릿속에 바로 그려지지 않으실 것 같아서 바로 예시를 보여드리겠습니다.

 

let coffee = 10 // 커피 양
const money = 10 // 돈

console.log("for문 실행")

for (let i = 0; i < money; i++) {
  coffee--
  console.log("남은 커피의 양은 " + coffee + "입니다.")

  if (coffee == 0) {
    console.log("장사 끝!! :) ")
  }

  console.log("힘들다... 힘내자!!")
}
console.log("for문 끝!")

/**
 * - 실행 결과 -
 * for문 실행
 * 
 * 남은 커피의 양은 9입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 8입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 7입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 6입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 5입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 4입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 3입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 2입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 1입니다.
 * 힘들다... 힘내자!!
 * 
 * 남은 커피의 양은 0입니다.
 * 
 * 장사 끝!! :) 
 * 힘들다... 힘내자!!
 * 
 * for문 끝!
 */

실행 방법에 대해 설명드리겠습니다.

 

커피(coffee)와 돈(money)은 값이 10이 주어집니다. 

 

반복문 for문이 실행되는 방식을 확인하면

1. let i = 0; (초기 값) 초기 값은 0으로 설정

2. i는 money 값 보다 작기 때문에 조건은 성립

3. for(){} 내부에 있는 코드 실행

4. 내부 코드가 모두 수행되면 i++ -> i의 값은 1씩 증가합니다.

5. i 값이 money 돈 보다 값이 큰 수 일 때까지 반복문은 실행됩니다.

 

2. for 무한 루프

for문도 무한 루프로 실행할 수 있습니다.

for (;;) {
  console.log("for문 실행")
}

for(;;) 세미콜론 두 개를 넣으면 무한루프가 됩니다.

 

하지만 이렇게 사용하는 경우는 없죠... (프로그램이... 버티지 못하고 죽습니다.)

 

3. for문 빠져나가기 (break) & for문 조건으로 돌아가기 (continue)

반복문을 수행하다 보면 반복문을 그만 수행해야 할 때가 있습니다. 그럴 때 사용되는 키워드는 "break"입니다.

 

그리고 반복문 조건으로 다시 돌아가야 하는 상황도 발생합니다. 그럴 때 사용되는 키워드는 "continue"입니다.

 

- 반복문 빠져나가기 break

let coffee = 10 // 커피 양
let money = 10 // 돈

console.log("for문 실행")
for (let i = 0; i < money; i++) {
  if (money == 100) {
    console.log("장사 끝!! :) ")
    break
  }

  money += 10
  coffee--
  console.log("돈을 받았으니 커피를 판매합니다. 현재 자금: " + money)
  console.log("남은 커피의 양은 " + coffee + "입니다.")
  console.log("힘들다... 힘내자!!")
}
console.log("for문 끝!")

/**
 * - 실행 결과 -
 * for문 실행
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 20
 * 남은 커피의 양은 9입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 30
 * 남은 커피의 양은 8입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 40
 * 남은 커피의 양은 7입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 50
 * 남은 커피의 양은 6입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 60
 * 남은 커피의 양은 5입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 70
 * 남은 커피의 양은 4입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 80
 * 남은 커피의 양은 3입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 90
 * 남은 커피의 양은 2입니다.
 * 힘들다... 힘내자!!
 * 
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 100
 * 남은 커피의 양은 1입니다.
 * 힘들다... 힘내자!!
 *
 * 장사 끝!! :)
 * 힘들다... 힘내자!!
 *
 * for문 끝!
 */

위 예시를 보면 for문이 실행되면서 money 변수 값이 100이라면 break 코드를 통해 for 문을 빠져나갑니다.

 

- for문 조건으로 돌아가기 (continue)

let coffee = 10 // 커피 양
let money = 10 // 돈

console.log("for문 실행")
for (let i = 0; i < money; i++) {
  if (money == 100) {
    console.log("장사 끝!! :) ")
    break
  }

  money += 10
  coffee--
  console.log("돈을 받았으니 커피를 판매합니다. 현재 자금: " + money)
  console.log("남은 커피의 양은 " + coffee + "입니다.")

  if (money == 100) {
    console.log("돈을 다 모았습니다.")
    continue
  }

  console.log("힘들다... 힘내자!!")
}
console.log("for문 끝!")

/**
 * - 실행 결과 -
 * for문 실행
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 20
 * 남은 커피의 양은 9입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 30
 * 남은 커피의 양은 8입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 40
 * 남은 커피의 양은 7입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 50
 * 남은 커피의 양은 6입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 60
 * 남은 커피의 양은 5입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 70
 * 남은 커피의 양은 4입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 80
 * 남은 커피의 양은 3입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 90
 * 남은 커피의 양은 2입니다.
 * 힘들다... 힘내자!!
 *
 * 돈을 받았으니 커피를 판매합니다. 현재 자금: 100
 * 남은 커피의 양은 1입니다.
 *
 * 돈을 다 모았습니다.
 *
 * 장사 끝!! :)
 * for문 끝!
 */

위 예시를 보면 for문이 실행되고 money 값이 100이면 밑에 print 코드가 실행되지 않고 for 문으로 갑니다.

 

그리고 마지막으로 break; 코드를 만나 for문이 종료됩니다.

 

4. while 문

while문은 조건이 true(참)이면 반복문을 계속 수행합니다.

let count = 0

//while 조건이 참이면 반복문이 계속 실행된다.
while (true) {
  count++
  console.log("count : " + count)
}

/**
 * - 실행 결과 -
 * count : 1
 * count : 2
 * count : 3
 * count : 4
 * ...
 * 계속 실행...
 */

 

while문도 for에서 사용했던 break, continue를 사용할 수 있습니다. 사용법은 동일하기 때문에 따로 설명은 하지 않겠습니다.

 

이번 시간에는 JavaScript에서 사용하는 기본 반복문에 대해 알아봤습니다.

 

꼭 실습을 하시는 걸 추천드리겠습니다.