📌반복문이 어려웠던 나, 이렇게 정리하니 이제는..? 🚀

안녕하세요! 😊 자바스크립트를 공부하면서 가장 어렵다고 느꼈던 부분이 바로 반복문이었습니다.
어디서 어떻게 활용해야 할지, 어떤 방식으로 써야 하는지 처음에는 너무 막막했쥬.... 😵‍💫
하지만 반복문의 기본 개념과 예제를 하나씩 정리해 보니 점점 이해할 수 있었습니다.

그래서 오늘은 반복문이 무엇인지, 어떻게 활용하면 좋은지 정리해 보았습니다! 🚀

💡 반복문이 왜 필요할까? 🤔

만약 [안녕하세요!]를 화면에 10번 출력해야 한다면, 어떻게 해야 할까?

console.log("안녕하세요!");
console.log("안녕하세요!");
console.log("안녕하세요!");
// ... 이렇게 10번 쓰면 비효율..

이럴 때 반복문(Loops)을 사용하면 코드를 짧고 간결하게 만들 수 있다! ✨

🔹 for문 (반복문 기본형)

for문은 가장 기본적인 반복문으로, 정해진 횟수만큼 반복할 때 사용

✅ for문 기본 구조

for (초기값; 조건; 증가값) {
    실행할 코드;
}

✅ 예제 1: 0부터 9까지 출력하기

for (let i = 0; i < 10; i++) {
    console.log(i);
}

✔️ let i = 0; → i를 0으로 시작
✔️ i < 10; → i가 10보다 작을 때까지만 실행
✔️ i++ → 반복할 때마다 i를 1씩 증가

📝 출력 결과:

0
1
2
3
4
5
6
7
8
9

✅ 예제 2: 10부터 1까지 거꾸로 출력하기

for (let i = 10; i > 0; i--) {
    console.log(i);
}

📌 i--를 사용해서 거꾸로 줄어들도록 만들었어봄

📝 출력 결과:

10
9
8
7
6
5
4
3
2
1

🔹 중첩 for문 (반복문 안에 반복문 사용하기)

for문을 중첩해서 사용하면, 표 형태의 데이터를 만들거나 2차원 배열을 다룰 때 유용함

✅ 예제 3: 별(*) 정사각형 만들기

let square = '';
let side = 6;

for (let i = 0; i < side; i++) {  
    for (let j = 0; j < side; j++) {  
        square += '*';
    }
    square += '\n';
}

console.log(square);

📝 출력 결과:

******
******
******
******
******
******

📌 for문을 두 번 사용해서 6×6 크기의 별 정사각형을 만들어봄

🔹 for...in 문 (객체의 키값 반복)

for...in 문은 객체의 키(key)를 하나씩 가져올 때 사용

✅ 예제 4: 객체 속 키(key) 값 출력하기

const person = {
    name: '안유진',
    year: 2003,
    group: '아이브',
};

for (let key in person) {
    console.log(key);  // 키 출력
}

📝 출력 결과:

name
year
group

📌 key에는 객체의 속성 이름(키값)이 들어감

🔹 for...of 문 (배열의 요소 반복)

for...of 문은 배열의 요소를 하나씩 가져올 때 사용

✅ 예제 5: 배열 값 출력하기

const members = ['안유진', '가을', '레이', '장원영', '리즈', '이서'];

for (let member of members) {
    console.log(member);
}

📝 출력 결과:

안유진
가을
레이
장원영
리즈
이서

📌 for...of는 배열의 값을 가져오는 데 사용돼요!

🔹 while문 (조건이 참일 때 계속 반복)

while문은 반복 횟수가 정해져 있지 않을 때 사용

✅ 예제 6: 0부터 9까지 출력하기

let number = 0;

while (number < 10) {
    console.log(number);
    number++;  
}

0
1
2
3
4
5
6
7
8
9

🔹 do...while문 (한 번은 실행되는 while문)

do...while문은 조건을 검사하기 전에 한 번 실행

✅ 예제 7: do...while 사용 예시

let num = 10;

do {
    console.log(num);
    num++;
} while (num < 10);

📝 출력 결과:

10

📌 do...while문은 조건이 거짓이어도 처음 한 번은 실행

🔹 break와 continue (반복문 제어하기)

break와 continue를 사용하면 반복문을 원하는 대로 조정할 수 있음.

✅ 예제 8: break (반복문 즉시 종료)

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

0
1
2
3
4

📌 break를 만나면 반복문이 즉시 종료!

✅ 예제 9: continue (특정 조건만 건너뛰기)

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue;
    }
    console.log(i);
}

📝 출력 결과:

0
1
2
3
4
6
7
8
9

📌 continue는 특정 조건에서만 실행을 건너뛰고 다음 반복으로 진행함!

🎯 정리!

✔️ for문 → 정해진 횟수만큼 반복할 때 사용
✔️ for...in → 객체의 키 값을 반복
✔️ for...of → 배열의 값을 반복
✔️ while문 → 조건이 참일 때 계속 실행
✔️ do...while문 → 한 번은 무조건 실행
✔️ break → 반복문 즉시 종료
✔️ continue → 특정 조건만 건너뛰고 다음 반복 진행

이제 반복문을 잘 활용해서 더 효율적인 코드를 작성할 수 있을까..? 🚀