자바스크립트 3강 반복문 for while 활용법

타리스만에서는 유익한 AI 기술을 전달합니다.
제휴 활동을 통한 수수료를 제공받을 수 있습니다.


자바스크립트 기초 #3

반복문으로 효율적인 코드 작성하기

🔄 반복문이 왜 필요할까?

똑같은 일을 100번 반복해야 한다고 상상해봐. 코드를 100번 복사-붙여넣기 할 거야? 아니지!

반복문을 사용하면 단 몇 줄로 수백, 수천 번의 작업을 자동으로 처리할 수 있어. 이게 바로 프로그래밍의 매력이지.

반복문의 3대 장점:
▲ 코드가 짧아져서 읽기 쉬워짐
▲ 실수할 가능성이 줄어듦
▲ 유지보수가 편해짐
🚀 반복문의 위력 체험하기
결과가 여기에 나타납니다…

📍 for문 – 가장 기본적인 반복문

for문은 정해진 횟수만큼 반복할 때 쓰는 가장 기본적인 반복문이야. 구조를 자세히 살펴보자!

for문의 구조:
for (초기값; 조건; 증감식) {
    // 반복할 코드
}

1. 초기값 (let i = 0)
반복을 시작하기 전에 한 번만 실행돼. 보통 카운터 변수를 선언하고 초기화하는 데 사용해. ‘i’는 index의 약자로 많이 써.

2. 조건 (i < 5)
매 반복 전에 확인하는 조건이야. 이 조건이 true면 계속 반복하고, false가 되면 반복문을 종료해.

3. 증감식 (i++)
한 번 반복이 끝날 때마다 실행돼. 보통 카운터를 증가시키는 데 사용해. i++는 i = i + 1과 같은 의미야.

실행 순서:
1) 초기값 설정 → 2) 조건 확인 → 3) 코드 실행 → 4) 증감식 실행 → 5) 다시 조건 확인… 반복!

⚡ for문 마스터하기
결과가 여기에 나타납니다…

🎯 while문 – 조건이 참일 때까지

while문은 특정 조건이 참(true)인 동안 계속 반복해. 몇 번 반복할지 정확히 모를 때 유용하지!

while문의 구조:
while (조건) {
    // 반복할 코드
    // 조건을 변경하는 코드 (중요!)
}

while vs for의 차이점:
– for문: 반복 횟수를 알 때 (예: 10번 반복)
– while문: 특정 조건까지 반복 (예: 사용자가 ‘quit’ 입력할 때까지)

⚠️ 무한 루프 주의!
while문에서 가장 조심해야 할 건 무한 루프야. 조건이 절대 false가 되지 않으면 프로그램이 멈추지 않고 계속 돌아!

do…while문:
do {
    // 최소 1번은 실행되는 코드
} while (조건);

일반 while과 달리 조건을 나중에 확인해서, 무조건 한 번은 실행돼!
🌊 while문 실습
결과가 여기에 나타납니다…

🚀 for…of와 forEach – 배열 순회의 달인

배열의 모든 요소를 하나씩 처리할 때는 for…of나 forEach가 더 편해! 각각의 특징을 알아보자.

1. 일반 for문 (인덱스 접근):
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}
→ 인덱스가 필요할 때, 특정 범위만 순회할 때 유용
2. for...of문 (값 직접 접근):
for (const item of array) {
    console.log(item);
}
→ 값만 필요할 때, 코드가 더 깔끔해짐
3. forEach 메서드 (함수형):
array.forEach(function(item, index) {
    console.log(index, item);
});
→ 함수형 프로그래밍, 값과 인덱스 모두 사용 가능
방법 언제 사용? break 가능? 성능
for 인덱스 제어가 필요할 때 O 가장 빠름
for...of 값만 필요할 때 O 빠름
forEach 함수형 스타일 X 보통
🎨 다양한 반복문 비교
결과가 여기에 나타납니다...

🎮 break와 continue - 반복문 제어하기

때로는 반복문을 중간에 멈추거나 건너뛰고 싶을 때가 있어. 그럴 때 쓰는 게 break와 continue야!

break문:
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // 반복문 완전 종료!
    }
    console.log(i); // 0,1,2,3,4만 출력
}
continue문:
for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // 이번 회차만 건너뛰기!
    }
    console.log(i); // 0,1,3,4 출력 (2는 건너뜀)
}

실제 활용 예시:
- break: 검색할 때 원하는 걸 찾으면 더 이상 찾지 않기
- continue: 특정 조건의 데이터는 처리하지 않고 넘어가기

🎯 break & continue 활용
결과가 여기에 나타납니다...

🏆 실전 프로젝트 - 구구단과 패턴 만들기

이제 배운 내용을 활용해서 실전 프로젝트를 만들어보자! 중첩 반복문의 위력을 느껴봐.

중첩 반복문이란?
반복문 안에 또 다른 반복문을 넣는 거야. 바깥쪽 반복문이 한 번 돌 때마다 안쪽 반복문이 전체를 다 돌아.

중첩 반복문 구조:
for (let i = 0; i < 3; i++) {    // 바깥쪽
    for (let j = 0; j < 3; j++) {  // 안쪽
        console.log(i, j);
    }
}
→ 총 9번 (3×3) 실행됨!
퀴즈: 1부터 10까지의 합을 구하는 올바른 코드는?
for (let i = 0; i < 10; i++) { sum += i; }
for (let i = 1; i <= 10; i++) { sum += i; }
for (let i = 1; i < 10; i++) { sum += i; }
while (i < 10) { sum += i; }
🧮 구구단 프로그램
결과가 여기에 나타납니다...

✨ 다음 단계는?

축하해! 이제 반복문을 마스터했어. 프로그래밍에서 가장 중요한 개념 중 하나를 정복한 거야!

반복문 마스터 체크리스트:
✓ for문으로 정해진 횟수만큼 반복하기
✓ while문으로 조건에 따라 반복하기
✓ 배열 순회하는 다양한 방법 활용하기
✓ break와 continue로 반복문 제어하기
✓ 중첩 반복문으로 복잡한 패턴 만들기

다음 강의 예고:
함수로 코드를 재사용 가능한 블록으로 만들기! 진짜 프로그래밍의 시작이야 🚀

< 이전강의 #2 조건문으로 프로그램에 두뇌 심기

다음강의 #4 함수로 재사용 코드 만들기 >

자바스크립트 전체 강의목록 >

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments