for & while 반복문

03 August 2023 - 13 mins read time
Tags: javascript for for문 while while문 반복문 기본개념

📖 for 반복문

: 초기값을 설정 한 후, 조건을 만족하는 동안 코드를 반복하여 실행하는 메서드


반복문에서 중요한 점

  1. 종료되는 시점(종결조건) 설정
    종료되는 시점이 없거나 연산할 수 없는 조건이라면 무한루프에 걸리게 된다.

  2. 지역변수
    for문 안에서 선언되는 변수는 for문 안에서만 사용할 수 있다.
    어디에 속해있지 않고 선언 된 변수 -> 전역변수


🖋️ 문법

for(1.초기조건; 2.종결조건; 4.증감식){
  3.실행코드(반복할 명령문)
}
for 반복문의 실행순서

  1. 초기조건 (변수의 선언), 보통 i를 쓴다. 초기조건은 최초 1회만 수행됨.
  2. 이후 종결조건을 보고 true이면 for문 내부에 있는 코드를 수행하고, false이면 for문을 멈추고 빠져나옴
  3. 종결조건이 참일 경우 수행되는 내부 부분 {} 실행 코드 실행
  4. 이후 증감식을 수행한 후 다시 2의 종결조건에 맞는지 확인
  5. 종결조건이 만족하지 않을 때 까지(false) 2 ~ 3 단계 반복 실행


🖋️ for문 예시


1️⃣ 기본 for문
for(let i = 1; i <= 5; i++){ // i가 1이고, i가 5이하 일때 까지
document.write(i + '<br>'); // i + '<br>'실행
}

//결과 : 1 ~ 5까지의 숫자가 도큐멘트에 출력됐다.
2️⃣ 증감식에 특정 숫자를 대입
for(let i = 0; i <= 10; i = i + 2){ //i가 0이고, 10 이하의 수일 때, 실행되는 i마다 +2
document.write(i + '<br>');
} 

//결과 : 0,2,4,6,8,10
3️⃣ 선택적 사용

for 반복문의 3개 식은 모두 선택 사항이다.
변수를 초기화하려고 초기값을 재선언 할 필요는 없다.

var i = 0;
for (; i < 9; i++) { // i = 0;을 생략하고 ;만 써도 된다!
  console.log(i + '<br>');
}
  // 0 ~ 8

초기값 생략과 같이 종결조건도 선택으로 사용할 수 있다.
다만 이 경우에는, switch문과 같이 실행 코드에 무한 반복을 탈출할 수 있는 장치 break를 추가해야한다!

for (var i = 0; ; i++) { // i > 3;을 생략
  console.log(i);
  if (i > 3) break;
}


🖋️ 중첩 for문

중첩 for문의 구조
for(초기조건1; 종결조건1; 증감식1){ //외부 반복문
  for(초기조건2; 종결조건2; 증감식2){	//내부 반복문
    반복할 명령문;
  }
}

시계의 초침이 한 바퀴 돌면 분침이 한 칸 움직이는 것처럼 내부 반복문의 루프가 끝나고 나면 외부 반복문이 한 번 증가 or 감소한다.
중첩 for문의 작동 순서는 1️⃣ 내부반복문 -> 2️⃣외부반복문

중첩 for문 예시

for(let i = 0; i < 5; i++){
  for (let j = 0; j < 5; j++){
      console.log('i:'+i, 'j:'+j);
  }
}
🔍 결과


🖋️ 반복문 연습하기

1️⃣ 반복문을 이용해서 날짜 select박스 만들기
📝 연습 시도 
 let list = '<select>';
 for(i = 1; i <= 30; i++){
  document.write(`${list}<option>${i}일</option>`)
 }
🔍 결과

와이라노… 홀수만 출력되는 현상이 나타났다..


🖍️ 맞는 답
let list = '<select>';

for(let i = 1; i <= 30; i++){ //1 ~ 30까지 반복
    list += '<option>' + i + '일' + '</option>'; //변수 list에 ''안 내용 더해주기.
};

list += '</select>'; //반복문 뒤에서 select 닫기
document.write(list);
🙅🏻‍♀️ 오답노트

document.write(list);를 반복문 안에서 말고 밖에서 불러와야했다..!
-> 모든 list에 대한 변수와 값들이 같이 반복실행되기 때문에 데이터가 누적되고 반복되면서 제대로 출력되지 않는 현상이 나타난다.
-> 전역변수를 불러와야 하기 때문에 밖에서 불러와야한다.
-> 반복문 안에서 완성된 list를 밖에서 호출


2️⃣ 중첩 for문을 사용해서 구구단 만들기
1. 2~9단 까지 구구단 작성
2. 중첩 for문을 사용해서 단이 시작할 때 마다 1~9까지를 곱하기
📝 연습 시도 
  for(let i = 2; i <= 9; i++){
      //console.log(i);
      for(let j = 1; j <= 9; j++){
          console.log(j, i);
          document.write(`${i} X ${j}= ${j * i}<br>`)
      }
  }
🔍 결과

제대로 나온거같다!


🖍️ 맞는 답
for(let i = 2; i <= 9; i++){
    document.write( i + '단 <br>' );
    for(let j = 1; j <= 9; j++){
        //document.write(i * j + '<br>');
        document.write(i + ' X ' + j + ' = ' + (i * j) + '<br>');
    }
}
🙅🏻‍♀️ 살~~짝 아쉬운 오답노트

document.write( i + '단 <br>' );을 집어넣었으면 아래처럼 나왔을텐데 조금조금 아쉽다.

🔍 결과


📖 while 반복문

무한 루프에 특화됨!

for문이 정해진 횟수만큼 반복한다면, while 문은 조건식이 true 일 경우에 계속해서 반복한다.
조건식에는 비교 또는 논리 연산식이 주로오는데, 조건식이 false가 되면 반복 행위를 멈추고 while문을 종료한다.

정확한 조건(반복 실행 횟수)을 모르는 경우 특정한 조건을 만족할 때 까지 무한으로 반복하게 된다. (ex. 로그인)
다시 말해, 끝나는 부분을 작성하지 않으면 while문은 무한히 반복한다는 뜻이다.
그렇기 때문에 while문의 구조에서 break와 같은 명령문을 종료시키는 무언가 또는 어떠한 형태를 작성해줘야만 한다.
꼭 break만 써야하는건 아니고 반복문을 종료시킬 수 있는 명령어라면 무엇이든 가능하다.

블록단위에서 코드가 작성되지 않았기 때문에 구분이 필요한 경우가 있다.


🖋️ 문법

let 초기값;
while(1.조건식){
    2.실행 코드
    종료 코드
};


while 반복문의 실행순서

스크린샷 2023-09-21 오후 4 29 29

  1. ①조건식을 평가합니다. 평가 결과가 true이면 ②실행문을 실행합니다.
  2. ②실행문이 모두 실행되면 다시 ①조건식으로 되돌아가서 다시 검사합니다.
  3. 만약 ①조건식이 true라면 1,2번 순서를 다시 반복하고 아니면 while문을 종료합니다.

🖋️ while문 예시

let i = 1; //초기값은 외부에서 선언한다.(전역변수)
while(i <= 10){
    //i++; 출력보다 증감식을 먼저 넣으면 증감식까지 게산되어 보여준다. 증감식 위치에 따라 결과물이 다르게 나옴
    document.write(i + '<br>');
    i++;
}


🖋️ while문 종료시키기

1️⃣ break

이 전에 조건문에서 switch문에서 등장한 녀석과 똑같은 역할을 한다.
여기에서 break는 보통 while문 안에 if문이 들어있을 때 주로 사용된다.

let number = 0;
while(true) {
    number++;
    if(number <= 10) {
    	document.write(number);
    }
    else {
    	document.write("while문을 종료합니다.");
    	break;
    }
}
🔍 결과

123456789 출력


2️⃣ 조건식 변수 선언

플래그 변수가 되는 변수에 true나 false를 미리 저장해서 while문을 동작시키거나 멈추게 할 수 있다.

let flag = true

while(flag){
    let question = parseInt(prompt(`내가그린기린그림 제조기 1. 내가  2. 그린  3. 기린  4. 그림  5.종료`))
    switch(question){
        case 1 :
            document.write(`내가`);
            break;
        case 2 :
            document.write(`그린`);
            break;
        case 3 :
            document.write(`기린`);
            break;
        case 4 :
            document.write(`그림`);
            break;
        case 5:
            flag = false;
            break;
        default :    
            prompt(`숫자 한 개 씩만 입력해주세요.`)    
    }
}
🔍 결과

숫자 1~4를 무작위로 한개 씩 입력 후 마무리 하고 싶을 때 5번을 입력하면 종료가 된다.
내가그린기린그림그린내가그린기린내가그린그림 출력


📖 for & while 반복문 차이점

for 문을 사용하는 경우 while 문을 사용하는 경우
1. 반복 횟수가 정해진 경우
2. 배열과 함께 주로 많이 사용		 1. 무한 루프나 특정 조건에 만족할 때까지 반복해야하는 경우
2. 주로 파일을 읽고 쓰기에 많이 사용


🖋️ while 반복문 연습하기

1️⃣ while 반복문을 이용해서 날짜 아이디 패스워드 입력 만들기
  while문 안에 if문을 넣어서 해보쟈.
📝 연습 시도 
//아이디, 비번 입력할 prompt창 생성
let pId = prompt('아이디를 입력하세요.')
let pPw = prompt('비밀번호를 입력하세요.')

let id = 'user01' //유저 아이디
let pw = 'pw123' //유저 비번
let login = false;

while(!login){
  if(pId === id && pPw === pw){
    document.write('로그인 성공! 연습도 성공!');
    break
  }else{
    document.write('아이디와 비밀번호를 확인해주세요.');
  }
}
🔍 결과

아이디와 비번을 제대로 기입했을 땐 괜찮았지만, 틀렸을 때는 아무것도 나오지 않고, 페이지 역시 무한로딩이 걸렸다 ㅠ


🖍️ 맞는 답

let id = 'user01' //유저 아이디
let pw = 'pw123' //유저 비번
let login = false;

while(!login){
  //아이디, 비번 입력할 prompt창 생성
  let pId = prompt('아이디를 입력하세요.')
  let pPw = prompt('비밀번호를 입력하세요.')
  if(pId === id && pPw === pw){
    document.write('로그인 성공! 연습도 성공!');
    break
  }else{
    document.write('아이디와 비밀번호를 확인해주세요.');
  }
}
🙅🏻‍♀️ 오답노트

pId와pPw는 while문 안에서 반복되어야 하는 변수이다.
while문 안에 넣어야 while문의 조건을 만족할 때 까지 적용이 된다.


2️⃣ while 반복문을 이용해서 1~10까지의 랜덤한 숫자를 출력
    1. 랜덤한 숫자를 맞출 때 까지 prompt창이 계속 출력
    2. 입력한 값이 정답보다 낮으면 down, 높으면 up 출력
    3. 숫자를 맞추면 랜덤 숫자의 정답과 실패 횟수를 출력

 let rNum = Math.floor((Math.random()*10)+1);
  let num;
  let count = 0;

  while(num !== rNum){
      num = parseInt(prompt('1에서 10까지의 숫자를 입력해주세요.'));
      count ++;
      console.log(count);
      if(num < rNum){
          console.log('up')
      }else if(num > rNum){
          console.log('down')
      }
  }

  document.write(`추카합니다. 정답은 ${rNum}이며, ${count}회 만에 성공했습니다.`)
🙅🏻‍♀️ 오답노트

흑 넘 어렵다… num !== rNum의 순서가 뒤바뀌면 안되는구나.. 두개 순서를 바꿔 썼더니 if가 먹히지 않았다.