for each...in 문이란?
JavaScript의 for each...in 문은 객체가 가진 속성(property)들의 값을 하나씩 순회하며 변수에 대입하는 반복문입니다. 일반적인 for...in 문이 속성 이름(key)을 반환하는 것과 달리, for each...in은 속성 값(value)을 직접 가져온다는 점이 특징입니다.
주의: for each...in 문은 현재 공식적으로 지원이 중단(deprecated)된 문법입니다. 최신 웹 브라우저에서는 동작하지 않으므로 실제 프로젝트에서는 절대 사용해서는 안 됩니다. 대신 for...of 문이나 Object.values() 메서드를 활용하는 것이 바람직합니다.
문법(Syntax)
for each...in 문의 기본 문법은 다음과 같습니다.
for each (variablename in object) {
실행할 문장 또는 코드 블록
}예제(Example)
다음은 객체에 담긴 모든 속성 값을 합산하여 화면에 출력하는 예제입니다. 다만 for each...in은 지원이 중단된 문법이므로, 어떤 웹 브라우저에서도 정상적으로 실행되지 않는다는 점에 유의하세요.
<!DOCTYPE html>
<html>
<body>
<script>
var myObj = {myProp1:30, myProp2: 40};
var sum = 0;
for each (var value in myObj) {
sum += value;
}
document.write(sum);
</script>
</body>
</html>
권장하는 대체 방법
객체의 값들을 순회하고 싶다면, 표준으로 채택된 현대적인 문법을 사용하는 것이 좋습니다. 가장 대표적인 방법은 Object.values()와 for...of를 조합하는 것입니다.
const myObj = {myProp1: 30, myProp2: 40};
let sum = 0;
// Object.values() + for...of 조합
for (const value of Object.values(myObj)) {
sum += value;
}
console.log(sum); // 70이처럼 for each...in은 역사적 참고용으로만 알아두고, 실무에서는 위와 같은 표준 문법을 사용하는 것이 안전합니다.