[자바스크립트] while 반복문

박은정·2021년 11월 1일

자바스크립트

목록 보기

5/25

while 반복문은 if 조건문과 형태가 매우 비슷한 반복문이다

if 조건문과 다른 점

문장을 한 번만 실행하고 끝나는 것이 아니라 bool 표현식이 true면 계속해서 문장을 실행한다
while 반복문의 경우 조건이 변하지 않는다면 무한히 반복실행하기 때문에 무한 루프
조건을 거짓으로 만들 수 있는 내용이 실행할 문장 내부에 포함되어야 한다

무한반복

다른 프로그래밍 언어에서는 '데이터를 전달받을 때까지 기다린다' 같은 목적으로 무한 반복문을 사용하지만
자바스크립트에서는 무한 반복을 사용하면 페이지 전체가 먹통이 되는 문제가 발생한다

let i = o
while (confirm('계속 진행하시겠습니까?')) {
  // 사용자가 [확인] 버튼을 클릭하면 true가 되어 계속 반복한다
  alert(`${i}번째 반복입니다.`)
  i = i + 1
}

confirm() 함수

사용자에게 확인을 받는 대화상자가 실행된다
사용자가 확인 버튼을 클릭하면 true가 되어 반복문을 계속해서 반복한다
만약 사용자가 취소 버튼을 클릭하면 false로 바뀌어 반복을 종료한다

배열과 함께 사용

let i = 0
const array = [1,2,3,4,5]
while (i < array.length) {
  console.log(`${i} : ${array[i]}`)
  i++
}

for 반복문 vs while 반복문

횟수를 기준으로 반복할 때에는 코드를 간결하게 구현할 수 있는 for 반복문을 사용하는 것이 훨씬 더 편하다
while 반복문은 조건에 큰 비중이 있을 때 사용하는 것이 좋지만
아직은 언제 for 반복문을 사용할지 while 반복문을 사용할지 구분하기 어렵기 때문에 다양한 코드를 먼저 경험하는 것이 좋을 것 같다

조건을 기반으로 하는 반복문일 때 while 반복문 사용

특정 시간동안 어떤 데이터를 받을 때까지
배열에서 어떠한 요소가 완전히 제거될 때까지

break 키워드

해당하는 조건문이나 반복문에서 벗어날 때 사용하는 키워드

while (true) {
  // 실행할 문장
} break

// 반복문 시작
for (let i = 0; true; i++) {
  alert(i + '번째 반복문입니다.')
  
  // 진행여부 확인
  const isContinue = confirm('계속 하시겠습니까?')
  if (!isContinue) {
    break
  }
}

// 프로그램 종료 확인
alert('프로그램 종료')

continue 키워드

반복문 안의 반복 작업을 멈추고 break 기능
반복문의 처음으로 돌아가 다음 반복 작업 진행

예시1

// 반복문
for (let i = 0; i < 5; i++) {
  // 현재 반복 작업을 중지하고 다음 반복 작업 수행
  continue
  alert(i)
}

코드를 실행하면 경고창이 출력되지 않는다
continue 키워드를 만나면 바로 다음 반복 작업으로 넘어가기 때문에 alert() 함수를 실행하지 않는다

예시2

let output = 0

for (let i = 1; i <= 10; i++) {
  // i가 홀수이면 현재 반복을 종료하고 다음 반복 수행
  if (i % 2 === 1) continue
  output += i // 기존의 output에 i 더함
}

alert(output)