JS

[JS] 조건문과 반복문 🌟

coco030030 2025. 4. 3. 11:57

조건문과 반복문

1️⃣ 조건문 (if, else) - 의사 결정의 도구 🧠

조건문이란?

조건문은 "~이면 ~하고, 아니면 ~한다"라는 의사결정 과정을 코드로 표현한 것입니다. 프로그램이 다양한 상황에 대응할 수 있게 해줍니다.

기본 구조

if (조건) {
    // 조건이 참일 때 실행할 코드
} else if (다른조건) {
    // 첫 조건이 거짓이고, 다른조건이 참일 때 실행할 코드
} else {
    // 모든 조건이 거짓일 때 실행할 코드
}

비교 연산자

연산자 의미 예시
=== 같다 점수 === 100
!== 같지 않다 이름 !== "홍길동"
> 크다 나이 > 18
< 작다 금액 < 5000
>= 크거나 같다 시간 >= 9
<= 작거나 같다 온도 <= 30

논리 연산자

연산자 의미 예시
&& AND (그리고) 나이 >= 20 && 성별 === "여성"
|| OR (또는) 요일 === "토" || 요일 === "일"
! NOT (부정) !(로그인) (로그인하지 않았다)

핵심 예제: 학점 계산기

var 점수 = 85;

if (점수 >= 90) {
    console.log("A 학점");
} else if (점수 >= 80) {
    console.log("B 학점");
} else if (점수 >= 70) {
    console.log("C 학점");
} else if (점수 >= 60) {
    console.log("D 학점");
} else {
    console.log("F 학점");
}

📌 조건문 사용 시 주의사항

  1. 조건의 순서가 중요합니다 - 가장 구체적인 조건을 먼저 체크하세요.
  2. 중괄호 {} 사용을 습관화하세요 - 나중에 코드를 추가할 때 오류를 방지합니다.
  3. 변수가 null 또는 undefined인 경우를 항상 고려하세요.

2️⃣ 반복문 (for, while) - 반복 작업의 자동화 🔁

반복문이란?

반복문은 동일하거나 유사한 코드를 여러 번 실행할 때 사용합니다. 많은 양의 데이터 처리나 특정 작업을 반복할 때 필수적입니다.

for 반복문

특정 횟수만큼 반복할 때 가장 많이 사용합니다.

for (초기식; 조건식; 증감식) {
    // 반복할 코드
}

for 반복문 예제: 1부터 5까지 출력

for (var i = 1; i <= 5; i++) {
    console.log(i);  // 1, 2, 3, 4, 5가 차례로 출력됨
}

for 반복문 해부하기

  1. 초기식(var i = 1): 반복문이 시작될 때 한 번만 실행됩니다.
  2. 조건식(i <= 5): 각 반복 전에 확인하며, 참인 경우에만 반복합니다.
  3. 증감식(i++): 각 반복 후 실행됩니다.
  4. 반복 실행 코드: 중괄호 안의 코드가 반복 실행됩니다.

while 반복문

조건이 참인 동안 계속 반복합니다.

while (조건) {
    // 반복할 코드
}

while 반복문 예제: 주사위를 6이 나올 때까지 굴리기

var 주사위 = 0;

while (주사위 !== 6) {
    주사위 = Math.floor(Math.random() * 6) + 1;  // 1~6 사이 난수 생성
    console.log("주사위를 굴려서 " + 주사위 + "가 나왔습니다.");
}

console.log("6이 나왔으니 게임을 종료합니다!");

do-while 반복문

코드를 최소한 한 번은 실행한 후, 조건을 확인합니다.

do {
    // 반복할 코드
} while (조건);

do-while 예제: 사용자 입력 받기

var 입력;

do {
    입력 = prompt("종료하려면 '종료'라고 입력하세요");
    console.log("당신이 입력한 것: " + 입력);
} while (입력 !== "종료");

console.log("프로그램을 종료합니다.");

break와 continue

  • break: 반복문을 즉시 종료합니다.
  • continue: 현재 반복을 건너뛰고 다음 반복으로 넘어갑니다.

break 예제: 5를 찾으면 멈추기

for (var i = 1; i <= 10; i++) {
    if (i === 5) {
        console.log("5를 찾았습니다!");
        break;  // 5를 찾으면 반복문 종료
    }
    console.log("현재 숫자: " + i);
}

continue 예제: 짝수만 출력하기

for (var i = 1; i <= 10; i++) {
    if (i % 2 !== 0) {
        continue;  // 홀수면 건너뛰기
    }
    console.log("짝수: " + i);  // 2, 4, 6, 8, 10만 출력됨
}

📌 반복문 사용 시 주의사항

  1. 무한 루프 주의: 반복 조건이 항상 참이면 무한히 반복됩니다.
  2. 성능 고려: 반복문 내에서 무거운 작업은 피하세요.
  3. 복잡한 반복은 분할: 중첩 반복문이 필요하면 함수로 분리하는 것을 고려하세요.

3️⃣ 조건문과 반복문의 조합 - 강력한 도구 🛠️

조건문과 반복문을 함께 사용하면 더 복잡한 로직을 구현할 수 있습니다.

반복문 안의 조건문

특정 조건에 맞는 항목만 처리하고 싶을 때 유용합니다.

예제: 1부터 20까지의 숫자 중 3의 배수만 출력하기

for (var i = 1; i <= 20; i++) {
    if (i % 3 === 0) {  // 3으로 나눈 나머지가 0이면 3의 배수
        console.log(i + "은(는) 3의 배수입니다.");
    }
}

조건문 안의 반복문

조건에 따라 다른 반복 작업을 수행할 때 사용합니다.

예제: 합격/불합격 학생 명단 출력하기

var 학생들 = ["영희", "철수", "민수", "수진", "지혜"];
var 합격자 = ["영희", "민수", "지혜"];

if (합격자.length > 0) {
    console.log("=== 합격자 명단 ===");
    for (var i = 0; i < 합격자.length; i++) {
        console.log(합격자[i]);
    }
} else {
    console.log("합격자가 없습니다.");
}

// 불합격자 찾기
console.log("=== 불합격자 명단 ===");
for (var i = 0; i < 학생들.length; i++) {
    var 학생 = 학생들[i];
    var 합격여부 = false;

    // 현재 학생이 합격자 명단에 있는지 확인
    for (var j = 0; j < 합격자.length; j++) {
        if (학생 === 합격자[j]) {
            합격여부 = true;
            break;
        }
    }

    if (!합격여부) {
        console.log(학생);
    }
}

실전 예제: 구구단 출력하기

여러 단의 구구단을 출력하는 코드로, 중첩 반복문과 조건문을 함께 사용합니다.

// 2단부터 9단까지 구구단 출력
for (var 단 = 2; 단 <= 9; 단++) {
    console.log("==== " + 단 + "단 ====");

    for (var 곱하는수 = 1; 곱하는수 <= 9; 곱하는수++) {
        var 결과 = 단 * 곱하는수;

        // 결과가 짝수이면 별표 표시
        if (결과 % 2 === 0) {
            console.log(단 + " x " + 곱하는수 + " = " + 결과 + " ★");
        } else {
            console.log(단 + " x " + 곱하는수 + " = " + 결과);
        }
    }

    console.log(""); // 각 단 사이 빈 줄 추가
}

실전 예제: 로그인 시도 제한하기

조건문과 반복문을 활용한 로그인 시도 제한 로직:

var 정답비밀번호 = "1234";
var 최대시도횟수 = 3;
var 로그인성공 = false;

for (var 시도 = 1; 시도 <= 최대시도횟수; 시도++) {
    var 입력비밀번호 = prompt("비밀번호를 입력하세요 (시도: " + 시도 + "/" + 최대시도횟수 + ")");

    if (입력비밀번호 === 정답비밀번호) {
        alert("로그인 성공!");
        로그인성공 = true;
        break;
    } else {
        if (시도 < 최대시도횟수) {
            alert("비밀번호가 일치하지 않습니다. 다시 시도하세요.");
        }
    }
}

if (!로그인성공) {
    alert("로그인 시도 횟수를 초과했습니다. 30분 후에 다시 시도하세요.");
}

4️⃣ 개념 정리와 연습을 위한 팁 🎯

개념 정리 방법

  1. 개념을 자신의 말로 설명해보세요 - 특히 블로그에 정리할 때 유용합니다.
  2. 예제 코드를 직접 타이핑해보세요 - 복사/붙여넣기보다 직접 타이핑하면 더 잘 기억됩니다.
  3. 순서도(flowchart)를 그려보세요 - 복잡한 조건문과 반복문의 흐름을 시각화하면 이해가 쉬워집니다.

효과적인 연습 방법

  1. 작은 프로젝트 만들기 - 간단한 게임이나 계산기 같은 미니 프로젝트를 만들어보세요.
  2. 기존 코드 수정하기 - 예제 코드를 조금씩 바꿔가며 어떻게 작동하는지 확인해보세요.
  3. 테스트 버그 찾기 - 일부러 오류를 만들어보고, 왜 그런 오류가 발생하는지 이해해보세요.

추천하는 연습 문제

  1. 간단한 계산기 만들기 - 사용자에게 두 숫자와 연산자를 입력받아 계산하는 프로그램
  2. 숫자 맞추기 게임 - 컴퓨터가 1~100 사이 숫자를 생성하고, 사용자가 맞추는 게임
  3. 별표 패턴 그리기 - 반복문을 사용해 다양한 별표 패턴을 콘솔에 출력하기

학습 방식에 대한 추가 조언 💭

yu0n01님께서 블로그에 정리해서 수시로 확인하는 학습 방식은 매우 좋은 방법입니다. 이런 학습 방식에 몇 가지 추가 조언을 드리자면:

  1. 실습 코드와 결과를 함께 기록하세요 - 코드만 보는 것보다 실행 결과까지 같이 보면 이해가 더 잘됩니다.

  2. 자신만의 비유와 예시를 추가하세요 - 프로그래밍 개념을 실생활에 비유하면 기억하기 쉽습니다.

  3. "아하!" 순간을 기록하세요 - 특정 개념이 갑자기 이해되는 순간이 있을 텐데, 그 깨달음을 블로그에 기록해두면 좋습니다.

  4. 단계별로 복잡성 늘리기 - 간단한 예제에서 시작해 점점 복잡한 예제로 발전시키면서 이해도를 높여보세요.