✍ 공부하기 | 반복문 (loop)

안녕하세요! 오늘은 코딩하면서 정말정말 많이 쓰는 반복문에대해 내용을 정리 해볼까해요

참고한 원본은 모던 자바스크립트입니다 👉 주소

while과 for 반복문

거의 내용 그대로 복붙한거나 다름 없어요 😊

다시한번 머리속에 상기시키기 위해서, 그리고 무엇보다 제가 몰랐던 사용법이 굉장히 많았어서 정리합니다!

 

 

 

---

 

 

 

while 반복문

while 반복문의 문법은 다음과 같습니다

while (condition) {
	// body
}

저~기  body가 반복문 본문이라고 불리는 곳이며, 반복 하고싶은 코드를 작성해 넣으면 됩니다

condition(조건)이 truthy(참과 비슷한)이면 반복문 본문(body)의 코드가 실행됩니다

아래 예제를 봅시다!

let i = 0;
while (i < 3) {
	alert(i); // 0, 1, 2가 출력됩니다
    i++;
}

여기서 i++가 없었다면 반복문이 영원히 반복되는 무한반복(...)이 일어날 것입니다😖

반복문이 한 줄이면 대괄호를 쓰지 않고 줄여쓰기가 가능합니다

let i = 3;

while(i != 0) {
	alert(i);
    i--;
}

// 위 코드를 짧게 줄이면
while (i) alert(i--);

개인적으로 저는 반복문을 줄여서 쓸 수 있다는걸 이제 알았네요!

하지만 가독성을 위해서, 초초초초간단한 반복문 아닌이상 정석대로 씁시다...😅

 

 

 

do..while 반복문

while과 비슷한 반복문이지만 차이점은  조건부분(condition)이 본문 아래에 위치한다는 점!

do {
	// body
} while (condition);

이때 본문(body)이 먼저 실행되고, 조건을 확인한 후

조건이 truthy(참과 비슷한)인 동안엔 body가 계속 실행됩니다

(이렇게 조건을 먼저 확인하냐 아니냐에따라 차이가 크다는걸 코딩하면서 많이 느끼고 있어요)

아래 예시를 볼까요?

let i = 0;

do {
	alert(i);
    i++;
} while (i < 3);

여기서 포인트!!!!!! 💥

do...while 문법은 조건이 truthy인지 아닌지에 상관없이

일단 body를 최소한 한번은 무조건!!! 무조건!!!!!!! 실행한다는 점입니다

 

 

 

for 반복문

다들 반복문하면 가장 많이 쓰는 반복문이죠!

for (begin; condition; step) {
	// body
}

• begin : 반복문에 진입할 때 단 한 번 실행됩니다
• condition : 반복마다 해당 조건이 확인됩니다. false이면 반복문이 멈춥니다
• body : condition이 truthy일 동안 계속해서 실행됩니다
• step : 각 반복의 body가 실행된 이후에 실행됩니다

for 반복문을 쓸 때 위 실행 순서를 기억하고 계시는게 혼란스럽지 않을겁니다

간단한 예제를 볼까요?

for (let i = 0; i < 3; i++) {
	alert(i); // 0, 1, 2가 출력됩니다
}

i가 3보다 작을때까지 body가 실행됩니다

i == 3이 되면 반복문은 종료됩니다

신기하게도 for문은 구성 요소를 생략할 수 있다고 합니다

let i = 0; // i를 선언하고 값도 할당

// begin 생략
for (; i < 3; i++) {
	alert(i);
}

// step 생략
for(; i < 3;) {
	alert(i++);
}

신기하지만 가독성이 좋지 않아서 쓸 일은 없겠네요😅

begin과 step을 생략한 for문은 마치 while문과 동일한 구조를 보여주고 있네요

while문으로 써도 똑같이 동작합니다 ㅎㅎ

 

 

 

반복문 빠져나오기

break

대개 반복문은 조건이 falsy(거짓과 비슷한)가 되면 종료됩니다

그런데 특별한 지시자인 break를 사용하면 언제든지 원할때 반복문을 빠져나올 수 있습니다!

// 사용자가 값을 입력하지 않으면 아래 반복문은 종료됩니다

let sum = 0;

while(true) {
	let value = +prompt("숫자를 입력하세요.", '');
    
    if(!value) break; // 사용자가 값을 입력하지 않거나, 취소 버튼을 눌렀을때 실행
    
    sum += value;
}

alert(sum);

if문을 만나면 반복문은 즉시 중단되고

제어 흐름이 반복문 아래 첫번째 줄로 이동합니다 (예제에서는 alert부분)

break같은 경우는 본문 가운데 혹은 본문 여러 곳에서 조건을 확인해야하는 경우인

무한반복 + break 조합에서 사용하면 좋습니다

 

 

 

다음 반복으로 넘어가기

continue

전체 반복문을 멈추지 않고,

현재 실행중인 반복을 멈추고 반복문이 다음 반복을 강제로 실행되도록 합니다

단, 조건을 통과할 때입니다!

아래 예제를 통해서 봅시다

for (let i = 0; i < 10; i++) {
	// 조건이 참이라면 남아있는 본문은 실행되지 않습니다
    if(i % 2 == 0) continue;
	
    alert(i); // 1, 3, 5, 7, 9
}

이렇게 짝수들은 if문에서 참이니까 현재 반복이 종료되고 i는 증가,

그리고 다음 반복으로 넘어가면서 결국 홀수만 출력됩니다

이 continue이 유용한게 중첩을 줄이는데 유용합니다!!

생각보다 반복문 안에 조건문을 써야하는 경우가 많은데

이러면 중첩 레벨이 늘어나고 가독성도 안 좋아집니다

근데 이 continue만 쓰면 if문을 쓴 것처럼 동일하게 동작하죠 😊

 

 

💥 주의! 삼항 연산자 '?' 오른쪽에 break나 continue가 올 수 없습니다

 

 

여러 개의 중첩 반복문을 한 번에 빠져나오기

break/continue와 레이블

생각보다 반복문을 쓸때 중첩되는 경우가 많습니다

그럴때 break만 쓰면 안 쪽에있는 해당 본문만 빠져나오지

전체 반복문을 빠져나오는 것은 아닙니다

이때 식별자를 써줍니다

label(레이블)은 반복문 앞에 콜론과 함께 쓰이는 식별자입니다

labelName: for (...) {
	...
}

반복문 안에 break <labelName>문을 사용하면 레이블에 해당하는 반복문을 빠져나올 수 있습니다

outer: for (let i = 0; i < 3; i++) {

	for (let j = 0; j < 3; j++) {
    	let input = prompt(`(${i}, ${j})의 값`, '');
    
    	// 사용자가 아무것도 입력하지 않거나 취소 버튼을 누르면 두 반복문 모두를 빠져나감
    	if (!input) break outer;
        
        // ... 무언가 실행
    }
}

alert('완료');

위 예시에서 break outer는 outer라는 레이블이 붙은 반복문을 찾고,

해당 반복문을 빠져나오게 해줍니다

따라서 제어 흐름인 alert로 바뀝니다

continue 지시자를 레이블과 함께 사용하는 것도 가능합니다

continue 같은 경우에는 레이블이 붙은 반복문의 다음 반복을 실행합니다

💥 주의! 레이블은 마음대로 점프할 수 있게 해주는 것이 아닙니다!

break와 continue는 반복문 안에서만 사용이 가능하고,

레이블은 반드시 break이나 continue 지시자 위에 있어야 한다는 것입니다!!

 

 

 

 

🌞 마무리

생각보다 정말 간단하고 별거 없는듯한 내용이죠...?

근데 저는 정말 for문만 쓰던 사람으로써... 그리고 for문, if문 중첩을 오지게하고...

이걸 어떻게 빠져나가야 할지 잘 몰라서 애먹고...

중간에 어케 이러저리 피해가고? 넘어가고? 막 그렇게 하고싶은데ㅋㅋㅋㅋㅋㅋ

잘 몰라서 포기했던 적이 많았거든요? (특히 코테...)

근데 이렇게 다양한 식별자들 그리고 레이블까지!

정말 잘 알고만 있다면 매우 유용하게 썼을텐데 참 아쉽습니다...

여러분 이거 정말 사소한데 진짜 유용한 것들이에요...!!

사실 이걸 몰라도 if문, for문 중첩해서 이리저리 구현 할 수는 있는데

진짜 이게 코드가 엄청 지저분해지거든요ㅠㅠㅠ 항상 찝찝해 했었는데...

그래서 오래오래 기억하려고 정리해봤습니다 😊