JavaScript for문 vs forEach vs for...of – 언제 어떤 걸 써야 할까?

JavaScript로 작업하다 보면
배열이나 리스트를 반복해서 처리해야 하는 순간이 정말 자주 옵니다.

처음에는 대부분 이렇게 시작합니다.

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

 

그런데 조금 익숙해지다 보면
forEach, for...of 같은 문법도 보이기 시작하고,
어느 순간부터는 이런 생각이 들기 시작합니다.

“굳이 for문을 써야 하나?”
“forEach가 더 깔끔해 보이는데…”
“for...of는 도대체 언제 쓰는 거지?”

 

이 글은
문법을 외우는 글이 아니라,
실제로 코드를 쓰면서 헷갈렸던 기준을 정리한 글입니다.

---

for문

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

 

for문은 JavaScript뿐만 아니라
대부분의 언어에서 가장 기본이 되는 반복문입니다.

그래서 처음 배울 때는
“반복 = for문”이라고 자연스럽게 익히게 됩니다.

 

장점

• 반복 횟수를 정확하게 조절할 수 있음
• index 값을 자유롭게 사용할 수 있음
• break, continue 사용 가능

이런 특징 때문에
반복을 제어해야 하는 상황에서는 지금도 충분히 쓸 만합니다.

 

예를 들어,
조건을 만족하면 바로 반복을 멈춰야 하는 경우라면
for문이 가장 직관적입니다.

---

forEach

 

const arr = [1, 2, 3];

arr.forEach(value => {
  console.log(value);
});

 

forEach는 배열을 반복한다는 의도가 코드에 바로 드러납니다.

 

장점

• 코드가 짧고 읽기 쉽다
• “배열을 끝까지 순회한다”는 의미가 명확하다
• 불필요한 index 계산이 없다

반드시 알고 있어야 할 한계

forEach는 중간에 멈출 수 없습니다.

 

arr.forEach(value => {
  if (value === 3) break; // 에러
});

 

그래서 forEach는

무조건 끝까지 실행해도 괜찮은 경우에만 쓰는 게 좋습니다.

---

for...of

const arr = ['a', 'b', 'c'];

for (const value of arr) {
  console.log(value);
}

 

for...of는
for문처럼 제어도 되고,
forEach처럼 코드도 길지 않아서
딱 중간 지점에 있는 느낌입니다.

특히 배열을 돌면서
값만 필요할 때는 이게 훨씬 편합니다.

for (const value of arr) {
  if (value === 'b') break;
  console.log(value);
}

이렇게 조건에 따라 멈출 수도 있고,
굳이 index를 신경 쓰지 않아도 됩니다.

---

세 반복문의 차이를 한 번에 보면

구분	for	forEach	for...of
배열 반복	가능	가능	가능
break 사용	가능	불가능	가능
가독성	보통	좋음	좋음
실무 사용	상황별	자주 사용	점점 증가

---

 

언제 어떤 반복문을 쓰는 게 좋을까?

for문이 어울리는 경우

• 반복 도중에 조건에 따라 멈춰야 할 때
• index 계산이 중요한 로직
• 반복 구조가 단순하지 않을 때

forEach가 어울리는 경우

• 배열을 끝까지 처리해야 할 때
• 단순 출력이나 DOM 조작

for...of가 어울리는 경우

• 배열 값을 다루는 대부분의 상황
• 조건에 따라 반복을 제어해야 할 때

---

정리하면서 드는 생각

JavaScript 반복문은
“이게 더 고급 문법이다” 같은 문제는 아닌 것 같습니다.
결국은 지금 상황에 맞는 걸 고르는 문제에 가깝습니다.

 

단순히 끝까지 한 번씩만 돌리면 되면 forEach가 편하고,
중간에 멈추거나 조건을 걸어야 하면 for...of가 낫습니다.
index 계산이 꼭 필요한 경우라면 어쩔 수 없이 for문을 쓰게 되고요.

 

이 정도 기준만 머릿속에 잡혀 있어도
나중에 코드를 다시 볼 때 훨씬 덜 헷갈립니다.

 

사실 이렇게 글로 정리해 놓고 보니 그렇지,
막상 코드를 짜다 보면 그냥 for문을 쓰는 경우가 꽤 많습니다.
그래도 예전보다는 “왜 이 반복문을 쓰는지” 한 번 더 생각하게 된 것만으로도
의미는 있었던 것 같습니다.

---

마무리

처음 JavaScript를 배울 때는
for문 하나만 알아도 크게 불편한 건 없습니다.
실제로 간단한 코드에서는 그걸로 충분한 경우도 많고요.

 

그런데 코드가 조금씩 쌓이기 시작하면
어느 순간부터는 “잘 돌아가느냐”보다
“다시 봤을 때 이해가 되느냐”가 더 중요해집니다.

 

그때부터는
반복문을 아무 생각 없이 쓰기보다는
“지금 이 상황에 어떤 게 제일 덜 복잡한가”를
한 번쯤 생각하게 됩니다.

 

이 글이
반복문을 선택해야 할 때
잠깐이라도 떠올릴 수 있는 기준이 되면 좋겠습니다.