Javascript 3일차 조건문 연습 / 반복문

2025. 12. 19. 20:24ㆍ대우개발원 수업 내용/Javascript

반응형

내용 정리

더보기

9.5 반복문 다루기

반복문(loop)이란?

반복문(loop)은 지정한 조건이 참(true)으로 평가되는 동안
지정한 블록문을 반복해서 실행하는 제어문입니다.

1. while 문

개념

  • 특정 조건을 만족하는 동안 블록문을 반복 실행
  • 조건식이 거짓(false)이 되면 반복 종료

기본 형식

while(조건식){
  // 조건식이 참이면 실행
}

예제: while 문으로 0에서 n까지의 합 구하기

파일명: WhileTon.html

<!DOCTYPE html>
<html>
<head>
<title>while 문</title>
</head>
<body>

<h3>while 문으로 0에서 n까지 합</h3>
<hr>

<script>
let n = prompt("0보다 큰 정수를 입력하세요", 0); 
n = parseInt(n); // 문자열 n을 숫자로 바꿈

let i = 0, sum = 0;

while(i <= n) { // i가 0에서 n까지 반복
  sum += i;
  i++;
}

document.write("0에서 " + n + "까지 합은 " + sum);
</script>

</body>
</html>

핵심 포인트

  • prompt()가 리턴하는 값은 문자열
  • 숫자 연산을 위해 parseInt()로 형 변환 필수

2. 무한 반복문

개념

  • 반복문의 조건이 항상 참(true) 으로 평가되어
    반복문이 끝나지 않고 무한히 실행되는 반복문
while(true) {
  // 무한 반복
}
  • 반드시 break 문과 함께 사용하여 종료 조건을 명시해야 함

3. do...while 문

개념

  • 조건이 참인 동안 반복 실행
  • 블록문을 먼저 실행한 후 조건을 검사
  • 조건이 거짓이어도 최소 1번은 실행

기본 형식

do {
  // 블록문
} while(조건식);

예제: do-while 문으로 0에서 n까지 합 구하기

파일명: doWhileTon.html

<!DOCTYPE html>
<html>
<head>
<title>do-while 문</title>
</head>
<body>

<h3>do-while 문으로 0에서 n까지 합</h3>
<hr>

<script>
let n = prompt("0보다 큰 정수를 입력하세요", 0); 
n = parseInt(n); // 문자열 n을 숫자로 바꿈

let i = 0, sum = 0;

do { 
  sum += i;
  i++;
} while(i <= n); // i가 0~n까지 반복

document.write("0에서 " + n + "까지 합은 " + sum);
</script>

</body>
</html>

while 문과 do…while 문의 차이점을 설명

while 문과 do…while 문의 차이점

핵심 차이 한 줄 요약

while 문은 “조건을 먼저 검사”하고,
do…while 문은 “일단 한 번 실행하고 조건을 검사”한다.

3-1. while 문

실행 구조

조건 검사 → (참이면) 실행 → 다시 조건 검사

형식

while (조건식) {
  실행문;
}

특징

  • 조건이 처음부터 거짓(false) 이면
    → 한 번도 실행되지 않음
  • 반복 여부를 사전에 판단해야 할 때 적합

예시

let i = 5;

while (i < 3) {
  console.log(i);
}

실행 결과
→ 아무것도 출력되지 않음
(조건이 처음부터 거짓)

3-2. do…while 문

실행 구조

실행 → 조건 검사 → (참이면) 다시 실행

형식

do {
  실행문;
} while (조건식);

특징

  • 조건이 거짓이어도
    → 최소 1번은 반드시 실행
  • 사용자 입력, 메뉴 표시 등에 자주 사용

예시

let i = 5;

do {
  console.log(i);
} while (i < 3);

실행 결과
→ 5 출력 후 종료

3-3. 차이점 비교 표

구분while 문do…while 문
조건 검사 시점 실행 전 실행 후
최소 실행 횟수 0번 가능 1번 이상 보장
첫 조건이 거짓일 때 실행 안 함 1번 실행
사용 용도 조건이 중요할 때 무조건 한 번 실행 필요할 때

3-4. 언제 무엇을 쓰는가?

while 문이 적합한 경우

  • 반복 전에 조건 검사가 필요한 경우
  • 잘못된 입력이면 아예 실행되면 안 되는 로직
  • 파일 읽기, 조건 기반 반복 처리

do…while 문이 적합한 경우

  • 입력 → 검사 → 재입력 구조
  • 메뉴를 최소 1번 보여줘야 할 때
  • 사용자 인터랙션 반복 처리

3-5. 핵심 포인트

  • do…while 문은 세미콜론(;) 필수
} while(조건식); // 반드시 ; 있음
  • while 문에는 세미콜론 없음

정리 요약

  • while → 조건 먼저, 실행 나중
  • do…while → 실행 먼저, 조건 나중
  • do…while은 최소 1회 실행 보장

 

4. for 문

개념

  • 지정한 횟수가 끝날 때까지 블록문을 반복 실행
  • 반복 횟수가 명확할 때 가장 많이 사용

기본 형식

for(초깃값; 조건식; 증감식){
  // 블록문
}

실행 순서

  1. 초깃값
  2. 조건식
  3. 블록문 (조건식이 참일 경우)
  4. 증감식
  5. 조건식 재검사

중첩 for 문

  • for 문 안에 또 다른 for 문을 중첩해서 사용 가능

예제: for 문으로 10px ~ 35px 크기 출력

파일명: forex.html

<!DOCTYPE html>
<html>
<head>
<title>for 문</title>
</head>
<body>

<h3>for 문으로 10px~35px 크기 출력</h3>
<hr>

<script>
for(let size = 10; size <= 35; size += 5) { // 5씩 증가
  document.write("<span ");
  document.write("style='font-size:" + size + "px'>");
  document.write(size + "px ");
  document.write("</span>");
}
</script>

</body>
</html>

5. for 문과 배열

  • 배열과 같은 자료형을 반복 횟수 용도로 사용할 수 있음

6. for...in 문

기본 형식

for(가변수 in 배열/객체 리터럴){
  // 블록문
}

특징

  • 객체 리터럴 반복 시
    → 가변수에 객체의 키(key) 가 할당됨
  • 배열 반복 시
    → 순서 보장이 되지 않으므로 주의

7. break 문

개념

  • 종료 조건을 만족하지 않아도
    반복문을 강제로 종료할 때 사용
  • 가장 안쪽 반복문 하나만 벗어남

예제: break 문

파일명: breakEx.html

<!DOCTYPE html>
<html>
<head>
<title>break 문</title>
</head>
<body>

<h3>1에서 얼마까지 더해야 3000을 넘는가?</h3>
<hr>

<script>
let i = 0, sum = 0;

while(true) { // 무한 반복
  sum += i;

  if(sum > 3000)
    break; // 합이 3000보다 크면 반복문 종료

  i++;
}

document.write(i + "까지 더하면 3000을 넘음 : " + sum);
</script>

</body>
</html>

8. continue 문

개념

  • 현재 반복을 중단하고
    다음 반복으로 건너뜀
  • 반복문 자체를 종료하지는 않음

break / continue 비교

구분동작

break 반복문 즉시 종료
continue 현재 반복만 건너뛰고 다음 반복 진행

예제: continue 문

파일명: continue_ex.html

<!DOCTYPE html>
<html>
<head>
<title>continue 문</title>
</head>
<body>

<h3>3으로 나눈 나머지가 1인 수만 더하기</h3>
<hr>

<script>
let sum = 0;

for(let i = 1; i <= 10; i++) { // i가 1에서 10까지 반복
  if(i % 3 != 1) // 나머지가 1이 아니면
    continue;    // 다음 반복으로 이동

  document.write(i + " ");
  sum += i;
}

document.write("합은 " + sum);
</script>

</body>
</html>

정리 요약

  • while : 조건 중심 반복
  • do...while : 최소 1회 실행 보장
  • for : 반복 횟수 명확할 때 사용
  • for...in : 객체/배열 순회
  • break : 반복문 종료
  • continue : 현재 반복 건너뜀

 

 

※ 해당 예제는 로컬 환경(localhost)에서 실행한 결과입니다. 실행 코드는 아래를 참고해주세요.

 

연습문제 7

ex7.html

숫자를 입력 받아 홀수와 짝수를 구분하는 프로그램을 만들어보세요

더보기

http://localhost:52330/js3/ex7.html

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제 7</title>
</head>
<body>
  <script>
    const a = parseInt(prompt('숫자로 입력해주세요'));

    if (a%2 === 0 ) {
     alert("입력한 숫자는 짝수입니다.");
    } else {
      alert("입력한 숫자는 홀수입니다.");
    }
  </script>
</body>
</html>

 

연습문제 9

태어난 연도를 입력 받아 띠 출력하기( if문으로)
도출 식 : 태어난 년도 % 12

더보기

http://localhost:52330/js3/ex9.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제 9</title>
</head>

<body>
  <script>
    let birthYear = parseInt(prompt('태어난 해를 입력해주세요', ''));
    let animal = birthYear % 12;
    let result;

    if (animal === 0) {
      result = '원숭이';
    }else if (animal === 1) {
        result = '닭'; 
      }else if (animal === 2) {
        result = '개';
      }else if (animal === 3) {
        result = '돼지'; 
      }else if (animal === 4) {
        result = '쥐'; 
      }else if (animal === 5) {
        result = '소'; 
      }else if (animal === 6) {
        result = '호랑이'; 
      }else if (animal === 7) {
        result = '토끼'; 
      }else if (animal === 8) {
        result = '용'; 
      }else if (animal === 9) {
        result = '뱀'; 
      }else if (animal === 10) {
        result = '말'; 
      }else {
        result = '양'; 
      }
      //alert(birthYear + "년에 태어났다면" + result + " 띠입니다.");
      alert(`${birthYear} 년에 태어났다면 ${result} 띠입니다.`);

      //switch case문문
    // let birthYear = parseInt(prompt('태어난 해를 입력해주세요', ''));
    // let animal = birthYear % 12;
    // let result;
    // switch (animal) {
    //   case 0: result = '원숭이';
    //     break;
    //   case 1: result = '닭';
    //     break;
    //   case 2: result = '개';
    //     break;
    //   case 3: result = '돼지';
    //     break;
    //   case 4: result = '쥐';
    //     break;
    //   case 5: result = '소';
    //     break;
    //   case 6: result = '호랑이';
    //     break;
    //   case 7: result = '토끼';
    //     break;
    //   case 8: result = '용';
    //     break;
    //   case 9: result = '뱀';
    //     break;
    //   case 10: result = '말';
    //     break;
    //   default: result = '양';
    //     break;
    // }
    // alert(birthYear + "년에 태어났다면" + result + " 띠입니다.");


  </script>
</body>

</html>

loop.js

while문 기초

더보기 
let num = 1;
while(num <= 10){
  console.log(num);
  num++;
}

실행결과

 

1
2
3
4
5
6
7
8
9
10

 

반복문 기초

whileTon.html

더보기

http://localhost:52330/js3/whileTon.html

<!DOCTYPE html>
<html>

<head>
  <title>while 문</title>
</head>

<body>
  <h3>while 문으로 0에서 n까지 합</h3>
  <hr>
  <script>
    let n = prompt("0보다 큰 정수를 입력하세요", 0);
    n = parseInt(n); // 문자열 n을 숫자로 바꿈
    //let n = parseInt(prompt("0보다 큰 정수를 입력하세요", 0)); 이렇게 써도 된다

    let i = 0, sum = 0;
    while (i <= n) { // i가 0에서 n까지 반복
      sum += i;
      i++;
    }
    
        // do while문
    //특정 조건이 참으로 평가되는 동안 do 다음에 오는 블록문을 반복 실행
    // do {
    //   sum += i;
    //   i++
    // } while(i <= n); //i가 0~n까지 반복
    
    document.write("0에서 " + n + "까지 합은 " + sum);
  </script>
</body>

</html>

do while문 기초

더보기 
//do while문 기초
do {
  console.log("무조건");
  console.log("한번은 실행")
}while(false);
무조건
한번은 실행

for문 기초

더보기 
// for문 기초
//let i;
for(let i = 0; i<5; i++){
  console.log(i);
}// for문 기초
//let i;
for(let i = 0; i<5; i++){
  console.log(i);
}
// for문 기초
//let i;
for(let i = 0; i<5; i++){
  console.log(i);
}

중첩 for문 기초

더보기 
// 중첩 for문 기초
for(let i = 0; i < 2; i++){
  console.log(`i: ${i}`);
  for(let k = 0; k < 2; k++){
    console.log(`k: ${k}`);
  }
}
i: 0
k: 0
k: 1
i: 1
k: 0
k: 1

forex.html

for 문으로 10px~35px 크기 출력

더보기

http://localhost:52330/js3/forex.html

<!DOCTYPE html>
<html>

<head>
  <title>for 문</title>
</head>

<body>
  <h3>for 문으로 10px~35px 크기 출력</h3>
  <hr>
  <script>
    for (let size = 10; size <= 35; size += 5) { // 5씩 증가
      document.write("<span ");
      document.write("style='font-size:" + size + "px'>");
      document.write(size + "px");
      document.write("</span>");
    }
    // =>이걸 여러줄로 <span style='font-size: size px'>size + "px"</span>
  </script>
</body>

</html>

중첩 for문으로 구구단 출력

더보기

http://localhost:52330/js3/gugudan-1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>구구단 - for문</title>
</head>
<body>
  <h1>구구단</h1>
  <script>
    var i, j;

    for(i = 1; i <= 9; i++) {//단
      document.write("<h3>" + i + "단</h3>");
      for(j = 1; j <= 9; j++) { //곱셈수
        document.write(i + "X" + j + " = " + i*j + "<br>");
      }
    }
  </script>
</body>
</html>

 

중첩 for문으로 별 찍기

연습문제 11

더보기

http://localhost:52330/js3/ex11.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제11</title>
</head>
<body>
  <script>
    let p = parseInt(prompt("숫자를 입력하세요"));
  
    for (let i = 1; i <= p; i++) {
      for (let j = 1; j <= i; j++)
      //  = for (let j = 0; j < i; j++)  
    {
        document.write("*");
      }
      document.write("<br>");
    }
  </script>
  
</body>
</html>

 

'대우개발원 수업 내용 > Javascript' 카테고리의 다른 글

Javascript 6일차 함수 return문 / 스코프 / 호이스팅  (1) 2025.12.24
Javascript 5일차 함수(function)  (0) 2025.12.23
Javascript 4일차 array / for in / break / continue  (0) 2025.12.22
javascript 2일차 조건문 if / else / switch  (0) 2025.12.18
Javascript 1일차 코드 작성 및 실행 방법 / 변수 / 상수  (1) 2025.12.17

관련글

티스토리툴바