[혼공스] 04 - 2 '반복문' 정리

 

오늘은 04 - 2장의 내용을 정리해 보자.

 

04 - 2장의 제목은 '반복문'으로, 컴퓨터에 반복을 지시하는 방법에 대해 다루고있다.

 

익숙하게 사용해왔던 반복문과는 조금 다르니까 헷갈리지 않게 정신 바짝차리고 정리하도록 하자.

 

그럼 정리 시작!

 

for in 반복문

for in 반복문은 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다.

 

<script>
 const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
 
 for (const i in todos) {
  console.log(`${i}번째 할 일: ${todos[i]}`)
  }
 </script>

 

for in 반복문은 기본 형태 이외에도 여러가지 코드를 추가해서 사용해야 안정적으로 쓸 수 있는 조금 위험한 반복문이다.

for of 반복문

for in 반복문은 반복 변수에 인덱스가 들어간다. 그래서 반복문 내부에 요소를 사용하려면 fruits[i]와 같은 형태로 사용하며, 안정성을 위해 몇 가지 코드를 더 추가해야했다.

 

그래서 등장한 것이 for of 반복문이며, 요소의 값을 반복할 때 안정적으로 사용할 수 있다.

 

<script>
 const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
 for (const todo of todos) {
  console.log(`오늘의 할 일: ${todo}`)
 }
</script>

 

for 반복문

for 반복문은 특정 횟수만큼 반복하고 싶을때 사용하는 범용적인 반복문이다. 다른 반복문과는 다르게 반복 변수를 let 키워드로 선언한다.

 

<script>
 for (let i = 0; i < 5; i++) {
  console.log(`${i}번째 반복입니다.`)
 }
</script>

 

for 반복문과 함께 배열 사용하기

 

보통 배열의 length 속성만큼 반복을 돌리는 형태로 많이 사용한다.

 

<script>
 const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
 
 for (let i = 0; i < todos.length; i++) {
  console.log(`${i}번째 할 일: ${todos.[i]}`)
 }
</script>

 

'length - 1부터 0까지 하나씩 빼면서 반복한다'와 같은 형태로 작성하여 반복을 역으로 돌릴 수도 있다.

 

<script>
 const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
 
 for (let i = todos.length - 1; i >= 0; i--) {
  console.log(`${i}번째 할 일: ${todos[i]}`)
 }
</script>

 

while 반복문

while 반복문의 경우 조건이 변하지 않는다면 무한 루프에 빠질 수 있으므로 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어 있어야 한다.

 

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

 

while 반복문의 조건식에 confirm() 함수를 넣었다. confirm() 함수를 입력하면 사용자에게 확인을 받는 대화상자가 실행된다. 사용자가 [확인] 버튼을 클릭하면 true가 되어 반복문을 계속해서 반복한다. 반면 사용자가 [취소] 버튼을 클릭하면 false로 바뀌어 반복을 종료한다.

 

while 반복문과 함께 배열 사용하기

for 반복문과 비슷하게 사용하면 된다.

 

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

 

하지만 이처럼 횟수를 기준으로 반복할 때는 코드를 간결하게 구현할 수 있는 for 반복문을 사용하는 것이 훨씬 편하다. while 반복문은 조건에 큰 비중이 있을 때 사용하는 것이 좋다. '특정 시간 동안 어떤 데이터를 받을 때까지', '배열에서 어떤 요소가 완전히 제거될 때까지' 등 조건을 기반으로 사용하는 반복문에 while 반복문을 사용하자.

 

break 키워드

switch 조건문이나 반복문을 벗어날 때 사용한다.

 

몇 번째 반복문인지 경고창을 출력하고 사용자에게 한 번 더 반복 작업을 수행할지 물어보는 코드

 

<script>
 for (let i = 0; true; i++) {
  alert(`${i}번째 반복문입니다.`)
  
  const isContinue = confirm('계속 하시겠습니까?')
  if (!isContinue) {
   break
  }
 }

alert('프로그램 종료')
</script>

 

사용자가 [취소] 버튼을 클릭하면 !에 의해 if 문이 실행이 되고 break 키워드가 실행되어 반복문이 종료된다.

 

continue 키워드

continue 키워드는 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행한다.

 

0부터 10까지의 짝수 합을 구하는 코드를 살펴보자.

 

<script>
 let output = 0
 
 for (let i = 1; i <= 10; i++) {
  if (1 % 2 === 1) {
   continue
  }
  output += i
 }
 
 alert(output)
</script>

 

조건문을 활용해 홀수일때는 continue 키워드를 만나 바로 다음 반복 작업으로 넘어가므로 짝수 합만 구해진다.

 

04 - 2장 '반복문'의 개념정리는 여기서 마치도록 하자.

 

내일은 누적예제와 연습문제를 풀어보면서 자바스크립트의 반복문에 더 익숙해지도록 하자!

 

오늘 하루도 쌓였다.