(21) JavaScript - 제어문 / break와 continue

break는 이미 switch문에서 한번 사용 했었다.

간단하게 switch문을 복습 해보자면..

   let myChioce = 2;

    switch (myChioce) {
        case 1:
            console.log('토끼를 선택하였습니다');
            break;
        case 2:
            console.log('고양이를 선택하였습니다.');
            break;
        case 3:
            console.log('코알라를 선택하였습니다.');
            break;
        case 4:
            console.log('강아지를 선택하였습니다.');
            break;    
        default:
            console.log('1에서 4사이 숫자를 선택해 주세요');        
    }

 

소괄호 안에 비교할 값을 두고 case로 조건값을 정해서 비교할 값이 조건값에 일치하는 경우에는 

그 case에 해당하는 동작 부분을 수행한다.

이 때 break가 없을 경우 case 아래의 모든 동작을 수행하기 때문에 break로 switch문을 빠져 나왔다.

 

같은 원리로 break는 반복문에서도 사용할 수있다.

 

break

해당 코드는 while 반복문으로, 1부터 10까지 출력하는 코드이다.

    let i = 1;

    while (i <= 10) {
        console.log(i);
        i++
    }

 

 

그런데 i++ 밑에 break를 작성해주면

    let i = 1;

    while (i <= 10) {
        console.log(i);
        i++
        break //추가
    }

 

이렇게 1 하나만 출력이 된 것을 볼 수가 있는데

처음에 i가 1인 상태로 반복문이 실행된다.

그리고 i를 출력하고 i를 증가 시킨 다음에 break문을 만나기 때문에 while문을 빠져나가게 되면서

더 이상 반복을 하지 않게 된 것이다.

이번에는 사이에 if문을 넣어보자면..

    while (i <= 10) {
        console.log(i);
        if (i === 7) {
        break 
        }
        i++
    }

▲ i가 7일 때 break를 해봤다.

이렇게 작성하면 반복이 실행되는 중에 i 가 7이 되는 순간 break가 실행이 된다.

실행해보면 1부터 7까지 출력이 되는 모습을 볼 수있다.

 

 

while문을 for문으로 바꾼 경우를 살펴보면..

    let i = 1;

    while (i <= 10) {
        console.log(i);
        if (i === 7) {
        break 
        }
        i++
    }

	for (let i = 1; i <= 10; i++) {
        console.log(i);
        if (i === 7) {
            break
        }
    }

 

똑같이 1부터 7까지 출력하는 걸 볼 수 있다.

 

이렇게 break를 반복문에서 활용하면

반복문에 조건 부분과 상관 없이 반복이 실행되는 도중에 빠져나갈 수있다.

 

continue

반복문에서 continue를 사용하면 그 아래 코드들은 실행되지 않고 바로 다음 단계로 넘어간다.

for문을 활용해서 contiune를 사용해보자면..

    for (let i = 0; i <= 10; i++) {
        console.log(i);
    }

▲ 똑같이 1부터 10까지 출력하는 코드인데

여기서 break가 반복문 전체를 빠져나오는 거라면 

continue는 동작 부분을 한번 건너뛰는 역할을 한다.

if문을 넣어 사용해보자면..

    for (let i = 0; i <= 10; i++) {
        if (i % 2 === 0) { //i가 2로 나누어 떨어질 때 continue
            continue
        }
        console.log(i)
    }

▲ 처음에 for문이 동작할 때 초기화부분에서 변수 i가 선언된다.

그렇게 되면 1이 할당된 변수 i가 조건 부분에서 평가가 된다.

1은 10보다 작으니 true로 판단되어 동작 부분이 실행되는데 if문이 나왔으니 조건 부분을 또 확인하게 된다.

그런데 1은 2로 나누어 떨어지지 않으므로 continue는 실행되지 않는다.

그래서 콘솔에 바로 1이 출력 된 것.

그다음에 추가 동작 부분에서 i가 2가되면 조건 부분을 통과하게 된다.

그러면 if문의 조건 부분도 충족 하기 때문에 continue가 실행되며

실행 중인 동작 부분을 건너 뛰고 그 다음 동작, 추가 동작 부분으로 넘어가게 된다.

그래서 continue 아래에 있는 console.log(i)가 무시 된 것.

이런 식으로 반복이 진행되다 보니 짝수는 무시되고 홀수만 console.log(i)가 실행 될 것이다.

 

 

 

이번에는 while문으로 작성해보자면..

	let j = 1

	while (j <= 10) {
        if (j % 2 === 0){
            j++
            continue
        }
        console.log(j);
        j++

▲ continue 위에 j를 증가시켜주고 있는 것을 볼 수있는데 (j++)

여기서 j를 증가 시켜주는 이유는 while문은 for문과 다르게 추가 동작 부분이 없기 때문이다.

while문은 continue가 실행돼서 동작 부분을 건너뛰게 되면 바로 조건 부분으로 넘어가게 된다.

그렇기 때문에 미리 j를 증가 시켜줘야 하는 것.

(만약 미리 증가 시키지 않으면 = j++를 쓰지 않으면 j가 2인 채로 무한 반복)

 

실행해보면 while문도 똑같이 홀수를 출력하는 것을 볼 수있다.

만약 짝수만 출력 하고싶다면 조건부분을 === 에서 !== (false)로 바꾸면 된다.

 

이런식으로 continue를 반복문에서 활용하면

반복하는 동작 부분을 필요에 따라 건너뛰게 할 수도 있다.

 

최종적으로 상황에 따라 break와 continue를 잘 활용 한다면 

좀 더 다양한 방식으로 반복문을 다룰 수 있다.

---

★GitHub 주소 (break,continue)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/7-%EC%A0%9C%EC%96%B4%EB%AC%B8/6.break%EC%99%80continue.html

JavaScript_soloPlay/Basic/7-제어문/6.break와continue.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (제어문 최종)

https://purrfect-gargoyle-935.notion.site/10ce9530b3e180a897a2cf4d1fd86ace?pvs=4

제어문 최종(구구단,파보나치 수열) | Notion