[JavaScript] #09 Javascript 제어문, JavaScript 반복문 총정리! for, while, for...of, forEach 완벽 이해하기

 

 

토스트데브입니다!
이번 시간에는 JavaScript의 제어문 중 반복문을 정리해보겠습니다.
반복문은 말 그대로 특정 코드를 여러 번 실행할 때 사용하는 문법이에요.
불필요한 코드를 줄이고, 효율적인 로직 작성을 도와줍니다.

 

 

🔁 1. for문 – 가장 많이 사용하는 반복문

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

📌 예시

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0, 1, 2, 3, 4

 

 

🔄 2. while문 – 조건이 true인 동안 반복

while (조건) {
  // 조건이 true일 때 반복
}

📌 예시

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

 

 

🔁 3. do...while문 – 최소 1번은 실행되는 반복문

do {
  // 실행 코드
} while (조건);

📌 예시

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 2);

📌 while과의 차이점: 조건이 false여도 최소 한 번은 실행됨

 

 

🔎 4. for...of – 배열 요소를 하나씩 꺼내는 반복문

const fruits = ["사과", "바나나", "포도"];

for (const fruit of fruits) {
  console.log(fruit);
}
// 사과, 바나나, 포도

배열뿐 아니라 문자열, Set, Map 등 iterable 객체에도 사용 가능

 

 

🧩 5. for...in – 객체의 key를 반복할 때 사용

const user = { name: "토스트", age: 30 };

for (let key in user) {
  console.log(key + ":", user[key]);
}
// name: 토스트
// age: 30

❗ 배열에는 for...in을 사용하지 않는 것이 좋습니다. (index 순서 보장 안 됨)

 

 

✅ 6. 배열 전용 forEach

const numbers = [1, 2, 3];

numbers.forEach((num) => {
  console.log(num);
});

 

• 함수형 스타일의 반복문
• return으로 반복 중단 불가 (break 사용 불가)
• 보통 배열 순회에 많이 사용

 

 

⛔ break / continue로 흐름 제어

 

• break: 반복문을 완전히 종료
• continue: 현재 반복만 건너뛰고 다음 반복 진행

📌 예시

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue;  // 3은 건너뜀
  if (i === 5) break;     // 5에서 반복 종료
  console.log(i);         // 1, 2, 4 출력
}

 

 

 

 

🧭 마무리하며

JavaScript의 반복문은 매우 다양하고 유연합니다.
for, while, for...of, forEach 등을 상황에 맞게 잘 선택하면 코드를 더 깔끔하고 효율적으로 작성할 수 있어요.

 

#JavaScript, #반복문, #for문, #while문, #doWhile문, #forEach, #forOf, #forIn, #break, #continue, #웹개발, #ToastDev