[JS] 반복문 기초 for문 /while문/do-while문/break/continue/for-in/for-of

자바스크립트 반복문의 기초: 아주 간단하게 시작하기 🌱

for문: 가장 기본적인 반복문
while문: 조건이 참인 동안 반복
do-while문: 최소 한 번은 실행
break와 continue: 반복 제어하기
배열 반복하기: for문과 배열
for-in문: 객체 속성 반복하기
for-of문: 배열 요소 쉽게 반복하기

1. for문 - 가장 기본적인 반복문

가장 간단한 예제: 숫자 출력하기

// 1부터 5까지 출력하기
for (var i = 1; i <= 5; i++) {
    console.log(i);
}

이렇게 작동해요:

1. i를 1로 시작
2. i가 5보다 작거나 같은지 확인 (맞으면 계속)
3. i 값을 출력
4. i 값을 1 증가
5. 2번으로 돌아가서 다시 확인
6. i가 6이 되면 5보다 크므로 반복 종료

결과: 1, 2, 3, 4, 5가 차례로 출력됩니다.

2. while문 - 조건이 참인 동안 반복하기

가장 간단한 예제: 숫자 출력하기

// 1부터 5까지 출력하기
var i = 1;  // 시작 값

while (i <= 5) {  // i가 5보다 작거나 같은 동안 반복
    console.log(i);
    i++;  // i 값을 1 증가
}

이렇게 작동해요:

1. i가 5보다 작거나 같은지 확인 (맞으면 계속)
2. i 값을 출력
3. i 값을 1 증가
4. 1번으로 돌아가서 다시 확인
5. i가 6이 되면 5보다 크므로 반복 종료

결과: 1, 2, 3, 4, 5가 차례로 출력됩니다.

3. do-while문 - 최소 한 번은 실행하기

가장 간단한 예제: 숫자 출력하기

// 1부터 5까지 출력하기
var i = 1;  // 시작 값

do {
    console.log(i);
    i++;  // i 값을 1 증가
} while (i <= 5);  // i가 5보다 작거나 같은지 확인

이렇게 작동해요:

1. i 값을 출력
2. i 값을 1 증가
3. i가 5보다 작거나 같은지 확인 (맞으면 1번으로 돌아감)
4. i가 6이 되면 5보다 크므로 반복 종료

결과: 1, 2, 3, 4, 5가 차례로 출력됩니다.

4. break - 반복문 즉시 종료하기

가장 간단한 예제: 숫자 3에서 멈추기

// 1부터 출력하다가 3에서 멈추기
for (var i = 1; i <= 5; i++) {
    console.log(i);

    if (i === 3) {
        break;  // i가 3이면 반복문 종료
    }
}

이렇게 작동해요:

1. i를 1로 시작
2. i가 5보다 작거나 같은지 확인 (맞으면 계속)
3. i 값을 출력
4. i가 3인지 확인
5. i가 3이면 break로 반복문을 즉시 종료
6. i가 3이 아니면 i 값을 1 증가시키고 2번으로 돌아감

결과: 1, 2, 3만 출력됩니다.

5. continue - 현재 반복 건너뛰기

가장 간단한 예제: 짝수만 출력하기

// 1부터 5까지 숫자 중 짝수만 출력하기
for (var i = 1; i <= 5; i++) {
    if (i % 2 !== 0) {  // i가 홀수면
        continue;  // 아래 코드를 실행하지 않고 다음 반복으로
    }

    console.log(i + "는 짝수입니다.");
}

이렇게 작동해요:

1. i를 1로 시작
2. i가 홀수인지 확인 (i % 2 !== 0)
3. 홀수면 아래 코드를 실행하지 않고 i를 증가시킨 후 다음 반복으로
4. 짝수면 출력 후 i를 증가시키고 다음 반복으로

결과: "2는 짝수입니다.", "4는 짝수입니다."가 출력됩니다.

6. 배열과 for문 - 간단한 예제

가장 간단한 예제: 과일 이름 출력하기

// 과일 배열 만들기
var 과일들 = ["사과", "바나나", "딸기"];

// 배열의 모든 요소 출력하기
for (var i = 0; i < 과일들.length; i++) {
    console.log(과일들[i]);
}

이렇게 작동해요:

1. i를 0으로 시작 (배열의 인덱스는 0부터 시작)
2. i가 배열 길이(3)보다 작은지 확인
3. 과일들[i](현재 과일 이름) 출력
4. i 값을 1 증가
5. 2번으로 돌아가서 다시 확인
6. i가 3이 되면 배열 길이와 같으므로 반복 종료

결과: "사과", "바나나", "딸기"가 차례로 출력됩니다.

7. for-in문 - 객체의 속성 반복하기

가장 간단한 예제: 사람 정보 출력하기

// 사람 객체 만들기
var 사람 = {
    이름: "홍길동",
    나이: 20,
    직업: "학생"
};

// 객체의 모든 속성 출력하기
for (var key in 사람) {
    console.log(key + ": " + 사람[key]);
}

이렇게 작동해요:

1. key에 객체의 각 속성 이름("이름", "나이", "직업")이 차례로 할당됨
2. 현재 속성 이름과 값을 출력
3. 객체의 모든 속성을 반복하면 종료

결과:
"이름: 홍길동"
"나이: 20"
"직업: 학생"
이 차례로 출력됩니다.

연습해보기: 아주 간단한 문제

문제 1: 1부터 10까지의 합 구하기

var 합계 = 0;

for (var i = 1; i <= 10; i++) {
    합계 = 합계 + i;
}

console.log("1부터 10까지의 합은 " + 합계 + "입니다.");

문제 2: 배열의 모든 값 더하기

var 숫자들 = [10, 20, 30, 40, 50];
var 합계 = 0;

for (var i = 0; i < 숫자들.length; i++) {
    합계 = 합계 + 숫자들[i];
}

console.log("배열의 합은 " + 합계 + "입니다.");

정리: 반복문 핵심 개념

1. for문: 정해진 횟수만큼 반복할 때 사용해요.
2. while문: 조건이 참인 동안 계속 반복해요.
3. do-while문: while문과 비슷하지만, 코드를 최소 한 번은 실행해요.
4. break: 반복문을 즉시 종료해요.
5. continue: 현재 반복을 건너뛰고 다음 반복으로 넘어가요.
6. 배열 반복: for문과 인덱스(i)를 사용해 배열의 각 요소에 접근해요.
7. for-in문: 객체의 속성을 하나씩 가져와서 반복해요.