JS, jQuery 기초 (2)

허경수·3일 전

프론트엔드

목록 보기
26/29

[JavaScript] 02. 반복문 — while · for 🔁


01. 반복문이란? 💡

특정 코드를 조건이 만족하는 동안 반복 실행하는 문법입니다.

🏠 비유로 이해하기

"100번 절하세요"라는 말을 들었을 때,
코드를 100줄 쓰는 대신 반복문 하나로 해결할 수 있습니다.

// ❌ 반복문 없이 — 코드 100줄 필요
console.log("절");
console.log("절");
console.log("절");
// ... 97줄 더...

// ✅ 반복문으로 — 단 4줄
for (var i = 0; i < 100; i++) {
    console.log("절");
}

02. while 문 🔄

조건이 true인 동안 계속 반복합니다.
조건을 먼저 확인하고 실행합니다.

while (조건) {
    // 조건이 true인 동안 반복 실행
}

📝 예제 — 1부터 5까지 출력

console.clear();

var i = 1;

while (i <= 5) {
    console.log(i);
    i++; // i를 1씩 증가 — 없으면 무한루프!
}
// 출력 결과
1
2
3
4
5

🔍 동작 흐름

i = 1  → 1 <= 5 → true  → 출력 → i = 2
i = 2  → 2 <= 5 → true  → 출력 → i = 3
i = 3  → 3 <= 5 → true  → 출력 → i = 4
i = 4  → 4 <= 5 → true  → 출력 → i = 5
i = 5  → 5 <= 5 → true  → 출력 → i = 6
i = 6  → 6 <= 5 → false → 종료

⚠️ 무한루프 주의!
i++처럼 조건을 변화시키는 코드가 없으면 조건이 영원히 true가 되어
프로그램이 멈추지 않습니다. 반드시 종료 조건을 만들어야 합니다!


03. for 문 🔁

초기값 · 조건 · 증감을 한 줄에 작성할 수 있어 더 간결합니다.
반복 횟수가 명확할 때 주로 사용합니다.

for (초기값; 조건; 증감) {
    // 조건이 true인 동안 반복 실행
}

📝 예제 — 1부터 5까지 출력

console.clear();

for (var i = 1; i <= 5; i++) {
    console.log(i);
}
// 출력 결과
1
2
3
4
5

🔍 for문 실행 순서

① var i = 1     → 초기값 설정 (딱 한 번만 실행)
② i <= 5        → 조건 확인
③ console.log(i) → 조건이 true면 실행
④ i++           → 증감
⑤ ②로 돌아가서 반복

04. while vs for 비교 ⚖️

구분whilefor
형태조건만 작성초기값 · 조건 · 증감 한 줄에
사용 시점반복 횟수가 불명확할 때반복 횟수가 명확할 때
가독성조건이 복잡할 때 유리단순 반복에 유리
// while — 반복 횟수 불명확할 때
while (사용자가 "종료" 입력 전까지) {
    // 계속 실행
}

// for — 반복 횟수 명확할 때
for (var i = 0; i < 10; i++) {
    // 딱 10번 실행
}

05. 📝 실전 예제

예제 1 — 구구단 출력

console.clear();

// 3단 출력
for (var i = 1; i <= 9; i++) {
    console.log("3 * " + i + " = " + 3 * i);
}
// 출력 결과
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27

예제 2 — 1부터 100까지 합계

console.clear();

var sum = 0;

for (var i = 1; i <= 100; i++) {
    sum = sum + i; // sum += i 와 동일
}

console.log("합계: " + sum); // 합계: 5050
// 동작 원리
i=1  → sum = 0 + 1 = 1
i=2  → sum = 1 + 2 = 3
i=3  → sum = 3 + 3 = 6
...
i=100 → sum = 5050

예제 3 — while로 짝수만 출력

console.clear();

var i = 1;

while (i <= 10) {
    if (i % 2 == 0) {  // 2로 나눈 나머지가 0이면 짝수
        console.log(i);
    }
    i++;
}
// 출력 결과
2
4
6
8
10

💡 % 연산자는 나머지를 구하는 연산자입니다.
i % 2 == 0 → i를 2로 나눴을 때 나머지가 0 → 짝수!


📖 핵심 요약

포인트내용
🔄 while조건이 true인 동안 반복, 횟수 불명확할 때
🔁 for초기값·조건·증감 한 줄에, 횟수 명확할 때
⚠️ 무한루프종료 조건이 없으면 프로그램이 멈추지 않음
%나머지 연산자, 짝수·홀수 판별에 활용
🔗 조합함수 안에 반복문을 넣으면 강력한 재사용 가능

0개의 댓글