JS. while, for (반복문)

MJ·2022년 8월 24일

JavaScript

Java Script

목록 보기

18/57

while & for 반복문

동일한 코드를 반복해서 사용해야할 때 쓰이는 조건문을 반복문이라고 합니다.
(loops 문)

1. while 반복문

조건문이 참, true라면 반복해서 실행됩니다.
무한루프에서 주로 사용되며, 일반적인 반복문에서는 for문을 사용합니다.

while (condition) {	// condition은 조건입니다.
	// 코드
    // 반복문 본문 `body`라고 부릅니다.
}

❤️ 문법

let i = 0;
while ( i < 3 ) {	// i가 3보다 작다면, 반복해서 실행합니다.
  alert( i );
  i++;
}


/* 
i가 3보다 작다면 반복해서 반복문을 실행합니다.
i++ 증가연산자를 사용해서, i가 3이 됐을 경우에는, 반복문이 종료됩니다.
*/


❗ 반복문이 실행되는 것을 iteration(이터레이션) 이라고 부릅니다.
  만약 i를 증가해주는 증가연산자가 없었다면, 반복문의 값은 영원히 3보다 작기 때문에
  무한대로 반복문이 작동했을 것입니다.

  하지만 브라우저는 무한대로 반복하는 반복문을 중단해주는 기능이 있기 때문에, 
  무한으로 반복되는 프로세스를 종료할 수 있습니다.

1.1 while문을 사용하는 경우

반복적인 무한루프 구간이 필요한 경우 사용합니다.

const userPassword = 'abcd1234';

let passwordAsk = prompt('Enter Your Password', '');
while (passwordAsk !== userPassword) {
  passwordAsk = prompt('Failed!! Try Enter Your Password', '');
}
alert('login success');


/* 
사용자로부터 값을 입력받아서, userPassword 변수와 다른값을 입력 받는다면
무한루프 발생
*/

1.2 반복문과 변수 or 표현식을 사용 할 수 있다.

반복문 조건에는 조건문과 동일하게 모든 변수 or 표현식이 올 수 있습니다.
조건을 평가하고, 평가후에는 논리형으로 변환합니다. true / false
변환된 값이 참이 아니라면(거짓이라면) 반복문은 종료됩니다.

let i = 3;

while (i) {		// i가 0이 되면 거짓된 값이 되므로 반복문이 종료됩니다.
 alert(i);
 i--;			// i(3)의 값을 반복해서 1씩 감소. 결국에는 0이된다.
}

2. do while 반복문

do while 반복문은, 반복문을 한 번 실행하고 조건(condition)을 검사합니다.

do {
 // 반복문 본문 
} while (condition);

/* 해석 */
본문이 먼저 실행되고, 조건문이 참이라면 다시 반복해서 실행됩니다.

❤️ do while 
  
let i = 0;

do {
 alert(i); 			// 조건문이 아래에 있기 때문에, 조건을 평가하지않고 일단 실행합니다.
  i++; 
} while( i < 3 );	// i값이 3이거나 3보다 크다면 반복문은 이제 실행되지 않습니다.


❗ 왜 do while 문을 사용하나요?
조건이 만족하지 않지만, 본문을 1번이라도 실행하고 싶을 때 사용 합니다.
예외인 상황을 제외하면 while( ) 문을 사용합니다.

3. for 반복문

while ( ) 반복문보다 많이 사용되는 반복문입니다.

❤️ 문법

for (begin; condition; step) {	
	// 반복문 본문
}

for (let i = 0; i < 3; i++) {	// i가 3이되면, 반복문이 종료됩니다.
 alert(i); 
}

3.1 for문 구성요소

구성요소	설명
begin	반복문에 진입할 때, 딱 한 번 실행됩니다.
condition	반복마다 해당 조건을 확인합니다. 조건이 참인경우에만 반복문 수행
body	조건이 참일경우에만 계속 실행됩니다.
step	body가 실행된 이후에 실행됩니다.

1. begin 실행
2. condition 조건 확인 
2.1 true => 반복문 실행 
2.2 false => 반복문 종료
3. 반복문이 실행되면 step 실행

4. condition 조건 확인
5. 조건이 true면 반복문실행 , false면 종료
6. 반복문이 실행되면 step 실행
7. 다시 condition 조건 확인

( for문의 동작원리 입니다. )

3.2 인라인 변수 선언

반복문 안에서 변수를 선언하는 것을 인라인 변수 선언 방식이라고 합니다. (카운터변수)
반복문 안에서 선언한 변수는, 반복문 안에서만 작동합니다.

// for (let i = 0; <== 인라인변수 선언 방식 )
  
for ( let i=0; i<3; i++ ) {
  
 alert(i); 
  
}

alert(i);	// 오류 발생, 인라인 변수(카운터변수)이기 떄문에 외부에서 사용 불가


/* 외부에서 선언하면 사용 가능 */
let i;

for (i=0; i<3; i++) {
  
  alert(i); 
  
}

alert(i);	// 외부에서 선언한 변수는 반복문과, 반복문 밖에서도 사용할 수 있다.

3.3 for문 구성 요소 생략하기

❤️ begin 생략

let i = 0;

for (; i<3; i++) {		// i를 이미 선언했기 때문에 begin을 할 이유가 없다.
 alert(i); 
}

❤️ step 생략

let i = 0;

for (; i<3;) {
 alert(i++;)		// 본문에서, 후위형으로인해 i를 반환하고 i 값을 증가하므로, step 과정과 동일하다. 
}

❤️ 무한 반복문

let i = 0;

for (;;) {		// 이렇게하면 무한으로 반복문이 발생합니다. ;은 생략하지 맙시다.
 	body 	 
}

또는
for (i<3) <== 이 방법도 오류가 발생합니다. 세미콜론은 꼭 붙이세요.

3.4 for문 무한루프

반복문이 종료되지않고 계속해서 순환하는것을 무한루프라고 합니다.
영원히 끝나지 않는것은 아니지만, 브라우저나 자바스크립트상에 메모리가 부족해지기전까지
반복문을 계속해서 수행합니다.

 for(let i=20; i>=0; i++){
	console.log('무한 루프');
 }

/*
i는 항상 0보다 크기 때문에, 반복문이 계속 수행된다.
*/

3.5 배열 순회하기

배열에 있는 요소도 for문으로 간단하게 모든 요소를 출력할 수 있습니다.

let animalName = [ 'Lion', 'Dog', 'Cat', 'wolf', 'pig' ];

for(let i=0; i<animalName.length; i++){
 	console.log(`${i}번째 :`, animalName[i]); 
}
/* 
0번째 : Lion
1번째 : Dog
2번째 : Cat
3번째 : wolf
4번째 : pig
*/

3.7 중첩문

for문 안에 for문이 존재하는 반복문입니다.

// 중첩배열을 이용해서 1분단 2분단 3분단으로 그룹을 나누어 봅시다.

const studentGroup = [
	['철수', '영희', '맹구'],	// 1분단
	['상태', '나라', '백현'],	// 2분단
	['현진', '수연', '송모']	// 3분단
]

for(let i=0; i<studentGroup.length; i++){
	let group = studentGroup[i];	//	gropu 변수에는 [0]부터 [2]까지의 중첩배열이 저장된다.
  	console.log(`${i+1}분단 학생 목록 ↓↓↓`);

  for(let j=0; j<group.length; j++){
	console.log(group[j]);	// 학생들 출력
  }
}

/* 
1분단 학생 목록 ↓↓↓
철수
영희
맹구
2분단 학생 목록 ↓↓↓
상태
나라
백현
3분단 학생 목록 ↓↓↓
현진
수연
송모
*/

4. `Break` 반복문 빠져나오기

while() for()반복문은 조건이 거짓일 때 반복문을 종료하고 빠져나옵니다.
하지만 특별한 지시자인 break를 사용하면 언제든지 반복문을 종료할 수 있습니다.

❤️ 형식

let sum = 0;

while (true) {	// 항상 반복됨
 let value = +prompt("숫자를 입력하세요", ''); 	// 사용자로부터 입력 받은 값을 숫자형으로 변환하고 반환
  
 if (!value) break;		// 조건이 참이라면 반복문 종료
  						
 sum += value;			// if 조건이 거짓인 경우 실행
  
}

alert('합계' + sum);		// 반복문이 종료된다면 메서드 발동


/* */
let value = +prompt("숫자를 입력하세요", '');
1) 사용자로부터 입력받은 값을 숫자열로 형 변환해서 반환한다.
2) 공백이나 빈문자열도 숫자로 출력하기 위해서 형변환 한다.

 
if (!value) break;	
1) 조건이 참이라면 break 지시자를 통해 반복문을 종료한다.
2) ! 연산자로 인해 참은 거짓, 거짓은 참이 된다. 
3) 조건이 만족되려면 value 값은 거짓이여야 한다. 
undefined, null, 0같은 값이라면 조건이 만족되어 반복문을 종료합니다.

`Continue` 다음 반복문으로 넘어가기

continue 지시자는 break 지시자의 가벼운 버전입니다. 전체 반복문을 멈추지 않습니다.
조건을 만족하면, 현재 실행중인 반복문을 중단하고, 다음 반복문으로 수행합니다.

즉, continue가 있는 코드블럭은 실행되지 않고 건너뜁니다.

❤️ continue 지시자로 홀수만 출력하기

for (let i = 0; i < 10; i++) {
  
	if (i % 2 == 0) continue;	// 조건이 참인경우에는 실행하지 않고 다음 반복문을 수행합니다.
  
  alert(i);
}


/*  */
(let i = 0; i < 10; i++)
1) i가 10보다 작을 때 까지 반복문 수행


if ( i % 2 == 0 ) continue;
1) i의 값을 2로 나눴을 때 나머지가 0이라면 현재 반복문을 스킵한다. (짝수기에)
2) i의 값을 2로 나눴을 때 나머지가 0이 아니라면, 반복문의 본문을 수행한다.
3. i가 홀수라면 (1,3,5,7,9) 2로 나눠도 나머지가 0이 아니므로, 조건을 만족하지 않아서 반복문을 수행합니다.

4. alert(i) 메서드에는 홀수만 출력됩니다.

1) break, continue는 ? 연산자뒤에 사용 불가

표현식이 아니라 문법구조는 ? 연산자 뒤에 사용할 수 없습니다.
break continue 같은 지시자도 동일합니다.
이는, if( )문을 ? 연산자로 대체해서 사용하지 말아야 하는 것과 동일합니다.

❤️ ? 연산자와 break, continue 지시자는 같이 사용할 수 없다

if ( i > 5 ){
	alert(i) 
} else {
 	continue; 
}

위 코드를 ? 연산자로 간소화 시키면 아래 코드처럼 됩니다.

(i > 5) ? alert(i) : continue;	// 이는 문법 오류를 발생합니다.

중첩 반복문에서 break문은 소용 없다

여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우도 있습니다.
어떤 상황에서 빠져나와야 하는지 확인 해보겠습니다.

/* i와 j를 반복하면서, prompt 창에 (0,0) 부터 (2,2) 까지를 구성하는 좌표(i,j)를
입력하게 해주는 예시를 봐볼게요. */

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

	for (let j=0; j<3; j++) {
    
    let input = prompt('${i} , ${j}의 값','');
    
    }
}

alert('완료');


/* */
(let i=0; i<3; i++)
1) i가 3보다 작을 때 까지 반복문 수행 


for (let j=0; j<3; j++)
1) j가 3보다 작을 때 까지 반복문 수행


let input = prompt('${i} , ${j}의 값','');
1) 카운터변수j의 반복문에서, i와 j의 값이 출력 된다.


/* 반복문 수행 과정 */
1. i가 0일 때 조건 만족 > j 반복문 실행 > j가 0일 때 조건 만족 > i와 j값 출력 [0,0]
2. j 반복문의 본문 수행후 j값 1증가 > j는 1 조건 만족 > i와 j값 출력 [0.1]
3. j 반복문은 최종적으로 3보다 작은 값 2가 되면 종료됨 > [0.2] 
4. 중첩 j 반복문 빠져 나오면서 i값 1 증가 > i는 1 조건 만족 > j 반복문 실행 > j는 0
조건 만족 > i와 j값 출력 [1.0] > 무한 반복 결과 값이 [2.2] 가 될 때 까지

조건문은 올바르게 작동합니다. 다만 사용자가 종료 버튼을 눌렀을 때, 반복문 전체를 종료할 수
없습니다. break을 사용하더라도 반복문 1개만 종료하기 때문에 j반복문은 빠져나와도 i
반복문은 빠져나올 수 없습니다. 아래 예제 처럼요

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

	for (let j=0; j<3; j++) {
    
    let input = prompt('${i} , ${j}의 값','');
    
    if (!input) break;	// input에 값이 없다면, 해당 반복문 종료
    }
}


/* */
사용자가 입력필드에 아무런 값을 입력하지 않으면, j 반복문은 종료되지만 외부에 i 반복문은
종료되지 않아서 사용자의 마음대로 반복문을 종료할 수 없습니다.

중첩 반복문을 사용할 때, 모든 반복문에 대해서 break 기능을 제공하게 해주는
기능이 lable 입니다.

lable

lable은 break 지시자뒤에 이름표(식별자)를 붙여서, 같은 식별자를 가진 반복문을
break를 통해서 한 번에 종료할 수 있게 해주는 식별자 입니다.

labelName : for (condition) {
 //body 
}


/* */
lable은 반복문앞에 식별자 : 를 붙이면 사용할 수 있습니다.
중첩 for문에서 break를 사용하면, lable이 붙은 반복문도 같이 종료됩니다.

❤️ lable로 중첩 반복문 벗어나기

outer : for (let i=0; i<3; i++) {	// 레이블명 : outer
  
  for (let j = 0; j < 3; j++) {
    
  	let input = prompt(`${i} , ${j}의 값`);
    
    if (!input) break outer;	// 조건이 만족하면, 현재 반복문과 outer라는 레이블이 붙은 반복문도 종료
  }
  
} alert('완료 !');				


/* 레이블을 다른줄에서 써주는 것도 가능합니다. */
outer :
for ( condition ) {
	...
}

🔔 lable과 continue 지시자도 같이 사용 가능

label은 break 뿐만 아니라, continue 지시자와도 같이 사용할 수 있습니다.
레이블이 붙은 반복문을 모두 스킵하고 다음 반복문을 수행합니다.

⚠️ label 주의 사항

break는 label은 사용한다고 해서 원하는 곳으로 마음대로 이동할 수 없습니다.
아래 예시처럼 사용할수는 없습니다.
break outer;	// 아래 for문으로 점프할 수 없습니다.
outer : for ( .. ) 
/*
*/
❗ 중요
break와 continue는 반복문 안에서만 사용할 수 있고, 레이블은 반드시 
break나 continue 지시자 위에 있어야 합니다.

정리

while 문은 반복이 시작하기전에 조건을 먼저 평가합니다.

do while 문은 반복문을 먼저 실행하고, 조건을 평가 합니다. ( 조건이 거짓이여도 1번은 실행 한다 )

for 문은 반복이 시작하기전에 조건을 평가합니다. step 기능을 이용해서 셋팅을 할 수 있다.

무한 반복문

무한으로 반복하는 반복문은 while(true)을 사용해서 만듭니다.
무한 반복문도, break 지시자로 멈출 수 있습니다.

break 지시자는 if문과 같이 사용하며, 반복문을 종료합니다.

continue 지시자는 if문과 같이 사용하며, 현재 반복문만 스킵합니다.

break : 전체 반복문 종료
continue : 현재 반복문만 종료하고 다음 반복문 수행

lable 식별자는, break를 사용할 때 lable이 붙은 반복문은 모두 종료합니다.
주로 중첩반복문과 외부반복문 모두 빠져나올 때 사용합니다.

프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

JS. while, for (반복문)

Java Script

while & for 반복문

1. while 반복문

1.1 while문을 사용하는 경우

1.2 반복문과 변수 or 표현식을 사용 할 수 있다.

2. do while 반복문

3. for 반복문

3.1 for문 구성요소

3.2 인라인 변수 선언

3.3 for문 구성 요소 생략하기

3.4 for문 무한루프

3.5 배열 순회하기

3.7 중첩문

4. `Break` 반복문 빠져나오기

`Continue` 다음 반복문으로 넘어가기

1) break, continue는 ? 연산자뒤에 사용 불가

중첩 반복문에서 break문은 소용 없다

lable

정리

JS. nullish

JS. Switch 조건문

0개의 댓글

JS. while, for (반복문)

Java Script

while & for 반복문

1. while 반복문

1.1 while문을 사용하는 경우

1.2 반복문과 변수 or 표현식을 사용 할 수 있다.

2. do while 반복문

3. for 반복문

3.1 for문 구성요소

3.2 인라인 변수 선언

3.3 for문 구성 요소 생략하기

3.4 for문 무한루프

3.5 배열 순회하기

3.7 중첩문

4. Break 반복문 빠져나오기

Continue 다음 반복문으로 넘어가기

1) break, continue는 ? 연산자뒤에 사용 불가

중첩 반복문에서 break문은 소용 없다

lable

정리

JS. nullish

JS. Switch 조건문

0개의 댓글

4. `Break` 반복문 빠져나오기

`Continue` 다음 반복문으로 넘어가기