[JavaScript] 반복문

반복문

for in 반복문

• 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
• 반복 변수에 인덱스가 들어감

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

<script>
	const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

	for (const i in todos) {
		console.log(`${i}번째 할 일: ${todos[i]}`)
	}
</script>

// 실행 결과
// 0번째 할 일: 우유 구매
// 1번째 할 일: 업무 메일 확인하기
// 2번째 할 일: 필라테스 수업

 

for of 반복문

• 반복 변수에 인덱스가 아닌 요소의 값이 들어감

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

<script>
	const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

	for (const todo in todos) {
		console.log(`오늘의 할 일: ${todo}`)
	}
</script>

// 실행 결과
// 오늘의 할 일: 우유 구매
// 오늘의 할 일: 업무 메일 확인하기
// 오늘의 할 일: 필라테스 수업

 

for 반복문

for (let i = 0; i < 반복 횟수; i++) {
	문장
}

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

// 실행 결과
// 0번째 반복입니다.
// 1번째 반복입니다.
// 2번째 반복입니다.
// 3번째 반복입니다.
// 4번째 반복입니다.

// 1부터 N까지 더하기
<script>
	let output = 0
	for (let i = 1; i <= 100; i++) {
		output += i
	}

	console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`)
</script>

// 실행 결과
// 1~100까지 숫자를 모두 더하면 5050입니다.

 

while 반복문

while (불 표현식) {
	문장
}

<script>
	let i = 0
	while(true) {
		alert(`${i}번째 반복입니다.`)
		i = i + 1
	}
</script>

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

 

break 키워드

• switch 조건문이나 반복문을 벗어날 때 사용하는 키워드

while (true) {

} break

<script>
	for (let i = 0; true; i++) {
		alert(i + '번째 반복문입니다.')

		const isContinue = confirm('계속 하시겠습니까?')
		if (!isContinue) {
			break
		}
	}

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

 

continue 키워드

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

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

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

	alert(output)
</script>

// 실행 결과
// 30

 

중첩 반복문을 사용하는 피라미드

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

	console.log(output)
</script>

// 실행 결과
// *
// **
// ***
// ****
// *****
// ******
// *******
// ********
// *********

<script>
	let output = ''
	for (let i = 1; i < 15; i++) {
		for (let j = 15; j > i; j--) {
			output += ' '
		}
		for (let k = 0; k < 2 * i - 1; k++) {
			output += '*'
		}
		output += '\n'
	}

	console.log(output)
</script>

// 실행 결과
//         *
//        ***
//       *****
//      *******
//     *********
//    ***********
//   *************
//  ***************
// *****************

• 예제 4

  <script>
      let output = ''
      const size = 5
  
      for (let i = 1; i<=size; i++) {
          for (let j = size; j>i; j--) {
              output += ' '
          }
          for (let k = 0; k<2*i-1;k++) {
              output += '*'
          }
          output +='\n'
      }
  
      for (let i = size - 1; i > 0; i--) {
          for(let j = size; j>i; j--) {
              output += ' '
          }
          for (let k = 0; k<2 * i - 1; k++) {
              output += '*'
          }
          output += '\n'
      }
      console.log(output)
  </script>
  
  //     *
  //    ***
  //   *****
  //  *******
  // *********
  //  *******
  //   *****
  //    ***
  //     *