[JavaScript] 반복문(for in, for of, for, while) / 2021.10.13

1. for in 반복문

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

 

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

 

예시를 통해서 알아보자.

 

for in 결과

 

여기서 i 변수가 차례대로 0, 1, 2, 3 이다. i 변수로 배열의 요소에 접근한다.

따라서 콘솔창을 확인해보면, 사과부터 차례대로 출력이된다.

 

for in 결과

 

2. for of 반복문

for in 반복문과는 다르게 for of 반복문의 반복 변수에는 인덱스의 번호가 아니라 인덱스의 요소의 값이 들어간다.

 

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

 

위의 for in문 코드를 for of문으로 바꿔보자.

 

for of 예시

콘솔 창을 확인해보면 똑같이 출력되는 것을 알수있다.

 

for of 결과

 

3. for 반복문

 

(1) for반복문은 특정 횟수만큼 반복하고 싶을때 사용하는 반복문이다.

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

for문은 위의 반복문과는 다르게 반복 변수를 let키워드로 선언한다.

 

예시를 통해서 알아보자.

 

for문 예시

반복변수 i는 0부터 4까지 변화한다.

콘솔창을 확인해보면 0~4까지 총 5번 반복된것을 알수있다.

 

for문 결과

 

(2) for반복문으로 반복 변수의 증가뿐 만아니라 감소도 나타낼 수 있다.

 

배열을 반대로 출력해보자.

 

for문 예시

 

여기서 반복변수 i는 배열의 마지막 인덱스 번호인 3부터 0까지 하나씩 감소된다.

 

for문 결과

 

배열의 마지막 요소인 바나나부터 사과까지 배열이 반대로 출력된것을 확인할 수 있다.

 

4. while 반복문

while반복문은 if 조건문과 형태가 비슷하다. 

while(불 표현식){
    문장
} 

while문은 불 표현식이 true이면 문장을 계속해서 실행한다. 만약 불 표현식에 true라고 적으면 무한루프가 된다.

 

(1) 무한 루프를 예시를 통해서 알아보자.

 

while 무한루프 예시

 

페이지를 실행해보면 경고창이 끝나지 않고 계속 뜨는것을 확인할 수 있다.

while 무한루프 결과

 

 

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

for문과 배열을 함께 사용했던 것처럼 while문에서도 사용할 수 있다.

 

while문과 배열예시

 

위 코드에서 변수 i가 0부터 3까지일 때 반복한다. 

while문과 배열결과

5. break 키워드

break 키워드는 switch 조건문에서도 사용하지만 반복문을 벗어날 때도 사용한다.

예시를 통해서 알아보자.

이 코드는 몇 번째 반복문인지 경고장을 출력하고 사용자에게 한번 더 반복할 것인지 물어보는 예제이다.

 

break 예시

이 코드를 실행해보면 몇번째 반복중인지 알려주는 경고창이뜬다. 

 

확인을 누르면 아래와 같이 계속 하시겠습니까? 라는 경고창이 뜨는데 확인을 누르면 true 취소를 누르면 false이다.

 

만약 확인을 누르면 다음 반복문을 실행하고

 

확인 누를시에

취소를 누르면 프로그램 종료 안내창이 뜬다.

 

취소 누를시에

 

6. continue 키워드

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

예시를 통해서 알아보자.

다음 코드는 0부터 10까지 짝수의 합을 구하는 코드이다.

 

continue 예시

 

경고창을 확인하면 1부터 10까지 짝수의 합인 30이 출력된것을 확인할수 있다.

 

continue 결과