[JS] 반복문 비교: forEach, for in, for of 차이점 완벽 정리

JavaScript에서 forEach, for...in, for...of는 각각 다른 목적과 용도로 사용됩니다. 차이점을 이해하고 적절한 상황에서 사용할 수 있도록 자세히 정리해 보겠습니다.

 

 

 

---

1. forEach()

배열(Array) 전용 메서드로, 각 요소를 반복하며 콜백 함수를 실행합니다.

 

사용법

const numbers = [10, 20, 30];

numbers.forEach((value, index, array) => {
    console.log(`Index: ${index}, Value: ${value}`);
});

 

출력

Index: 0, Value: 10
Index: 1, Value: 20
Index: 2, Value: 30

 

 

특징

✅ 배열에서만 사용 가능

✅ 콜백 함수로 요소, 인덱스, 배열 자체를 인자로 받음

✅ break, continue를 사용할 수 없음

✅ 값을 반환(return)할 수 없음

 

📌 예제: break, continue를 사용할 수 없는 경우

const arr = [1, 2, 3, 4, 5];

arr.forEach(num => {
    if (num === 3) return; // 작동하지 않음
    console.log(num);
});

 

출력 (모든 요소가 실행됨)

1
2
3
4
5

 

🚨 return으로 반복을 중단할 수 없음!

👉 이럴 땐 for 또는 for...of를 사용해야 합니다.

 

 

 

---

2. for...in

객체의 속성(키)을 반복(iterate)하는 문법입니다.

 

사용법

const person = { name: "Alex", age: 25, job: "Developer" };

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

 

출력

name: Alex
age: 25
job: Developer

 

특징

✅ 객체(Object)에서 키를 순회

✅ 배열에서도 사용 가능하지만, 권장되지 않음

✅ 배열에서는 요소 순서가 보장되지 않음

 

📌 배열에서 for...in을 사용하면?

const numbers = [10, 20, 30];

for (let index in numbers) {
    console.log(`Index: ${index}, Value: ${numbers[index]}`);
}

 

출력

Index: 0, Value: 10
Index: 1, Value: 20
Index: 2, Value: 30

 

🚨 배열에서 사용하면 예상치 못한 결과가 나올 수도 있음

👉 객체를 순회할 때만 사용하는 것이 좋음.

 

 

 

---

3. for...of

배열, 문자열, Map, Set 같은 iterable 객체를 순회하는 문법입니다.

 

사용법

const numbers = [10, 20, 30];

for (let value of numbers) {
    console.log(value);
}

 

출력

10
20
30

 

특징

✅ 배열, 문자열, Set, Map 같은 iterable 객체에서 사용 가능

✅ 배열을 순회할 때 값(value)만 가져옴 (인덱스 X)

✅ break, continue 사용 가능

✅ 객체(Object)에는 사용할 수 없음

 

📌 문자열에도 사용 가능

const str = "Hello";
for (let char of str) {
    console.log(char);
}

 

출력

H
e
l
l
o

 

📌 배열에서 break 사용 가능

const numbers = [10, 20, 30, 40];

for (let num of numbers) {
    if (num === 30) break; // 중단
    console.log(num);
}

 

출력

10
20

 

🚀 배열 순회할 때 forEach보다 유연하게 사용할 수 있음!

 

 

 

---

비교 요약표

구분	forEach	for...in	for...of
사용 대상	객체 사용 가능 여부	객체(Object) (배열에도 사용 가능하지만 비추천)	배열, 문자열, Set, Map
반복 대상	요소(value)	키(key)	요소(value)
break, continue 사용	❌ 불가능	⭕ 가능	⭕ 가능
return으로 반복 중단	❌ 불가능	⭕ 가능	⭕ 가능
배열 사용 추천 여부	⭕ 추천	❌ 비추천 (순서 보장 X)	⭕ 추천
객체 사용 가능 여부	❌ 불가능	⭕ 가능	❌ 불가능

 

 

 

---

어떤 경우에 어떤 반복문을 써야 할까?

 

✅ 배열을 순회할 때:

• forEach()는 콜백 함수를 사용해야 하고 break, continue를 사용할 수 없음.

• for...of는 더 직관적이고 유연하며, break와 continue를 사용할 수 있음.

 

✅ 객체를 순회할 때:

• for...in이 가장 적절한 선택 (객체의 키를 가져올 수 있음).

 

✅ 배열에서 for...in은 비추천

• 배열의 순서를 보장하지 않음.

• 배열에서는 forEach 또는 for...of 사용이 더 적절함.

 

 

 

---

결론

• forEach() → 배열을 순회할 때 유용하지만 break, return 불가능.

• for...in → 객체를 순회할 때 사용 (배열에서는 사용 X).

• for...of → 배열, 문자열, Set, Map 같은 iterable 객체에서 유용하며 break, continue 가능.