이권석

이권석

Studying Design & Data

[JavaScript] 반복문 정리

for in 반복문

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

[for in 반복문 형태]

for (const 반복변수 in 배열&객체) {
  문장  
}

예시1]

const todos = ['공부', '게임', '운동', '독서']

for (const i in todos) {
  console.log(`${Number(i)+1}번째 할 일: ${todos[i]}`)
}

[console.log]

1번째 할 일: 공부
2번째 할 일: 게임
3번째 할 일: 운동
4번째 할 일: 독서

for in 반복문은 조금 위험한 반복문이기 때문에, 이후에 나오는 for of 반복문 이나 for 반복문 을 활용하는 것이 더 좋다


for of 반복문

for in 반복문 과 달리 반복변수에 요소의 값이 들어간다

[for of 반복문 형태]

for (const 반복변수 of 배열&객체) {
  문장  
}

예시1]

const todos = ['공부', '게임', '운동', '독서']
let i = 0
for (const todo of todos) {                         // for in과 달리 인덱스가 아닌 값이 들어간다
  console.log(`${Number(i)+1}번째 할 일: ${todo}`)  // todos[i]가 아닌 todo 로 바뀐 것을 확인!
  i++
}

[console.log]

1번째 할 일: 공부
2번째 할 일: 게임
3번째 할 일: 운동
4번째 할 일: 독서


for 반복문

for 반복문은 가장 범용적인 반복문입니다

[for 반복문 형태]

for (let i = 0; i < 반복횟수; i++) {      // 다른 반복문과 달리 반복변수를 let 키워드로 선언
  문장
}

예시1]

let output = 0
for (let i = 0; i <= 100; i++) {
  output += i
}

console.log(`1 ~ 100까지의 합은 ${output}입니다`)

[console.log]

1 ~ 100까지의 합은 5050입니다



예시2]

const todos = ['공부', '게임', '운동', '독서']

for (let i = 0; i < todos.length; i++) {
  console.log(`${Number(i)+1}번째 할 일: ${todos[i]}`)
}

[console.log]

1번째 할 일: 공부
2번째 할 일: 게임
3번째 할 일: 운동
4번째 할 일: 독서


while 반복문

while 반복문은 for 반복문과 달리 불 표현식이 true 면 계속해서 문장을 실행한다
true 가 계속되면 무한루프를 돌기 때문에 false를 만들어야 한다

[while 반복문 형태]

while (불표현식) {
  문장
}

예시]

let i = 0
while (confirm('계속진행할까요?')) {
  alert(`${i}번째 반복입니다.`)
  i++
}

[alert 창]

계속진행할까요?
> 확인 버튼
계속진행할까요?
> 취소 버튼
- 끝 -



예시2]

let i = 0
const todos = ['공부', '게임', '운동', '독서']

while (i < todos.length) {
  console.log(`${Number(i)+1}번째 할 일: ${todos[i]}`)
  i++
}

[console.log]

1번째 할 일: 공부
2번째 할 일: 게임
3번째 할 일: 운동
4번째 할 일: 독서

for 반복문 과 달리 배열 길이까지만 반복하게 조건을 걸었다


break 키워드

break키워드는 switch조건문 또는 반복문을 벗어날 때 사용하는 키워드.

[while break]

while (불표현식) {
  문장
} break

예시]

// 반복문
for (let i = 0; true; i++) {
  alert(i + '번째 반복문')
  
  // 진행여부 확인
  const isContinue = confirm('계속하실?')
  if (!isContinue) {      // ! + 변수 : false 표현 
    break
  }

  // 프로그램 종료
  alert('프로그램 종료')
}


[alert 창]

0번째 반복문
> 확인 버튼
계속하실?
> 확인 버튼
1번째 반복문
> 확인 버튼
계속하실?
> 취소 버튼
프로그램 종료


continue 키워드

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

예시1]

for (let i = 0; i < 5; i++) {
  continue
  alert(i)
}

[alert 창]

코드를 실행하면 continue를 만나면 다음 반복작업으로 넘어간다.
그래서 계속 넘어가기 때문에 결국 alert 경고창이 뜨지 않는다

예시2]

let output = 0

for (let i = 0; i <= 10; i++) {
  if (i % 2 === 1) {    // 홀수면 이번 반복은 스킵!
    continue
  }
  output += i
}

alert(output)

[alert 창]

30

홀수는 continue 만나서 해당 반복회차는 스킵되기 때문에
결과적으로 짝수들만 output에 더해지기 때문에 짝수합이 나온다


+ 중첩 반복문

예시1]

let output = ''

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < i; j++) {
    output += '*'
  }
  output += '\n'
}

console.log(output)

[console.log]

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


정리

  • for in 반복문 : 배열의 인덱스 기반으로 반복할 때 사용 (잘안씀)
  • for of 반복문 : 배열의 값을 기반으로 반복할 때 사용
  • for 반복문 : 횟수를 기반으로 반복할 때 사용
  • while 반복문 : 조건을 기반으로 반복할 때 사용
  • break 키워드 : switch조건문 또는 반복문을 벗어날 때 사용
  • continue 키워드 : 반복문에서 작업을 스킵하고 다음 반복문 진행

참고