JavaScript에는 객체와 반복 가능한(iterable) 데이터를 순회하는 두 가지 대표적인 반복문이 있습니다. 바로 for...in 문과 for...of 문입니다. 두 반복문은 비슷해 보이지만 용도와 동작 방식이 완전히 다르기 때문에, 각각의 특징을 정확히 이해하고 상황에 맞게 사용하는 것이 중요합니다.
for...in 루프란?
for...in 루프는 객체의 속성(property)을 순회할 때 사용하는 반복문입니다. 배열이 아닌 일반 객체의 키(key)를 하나씩 가져오며, 객체가 가진 열거 가능한 모든 속성을 대상으로 실행됩니다.
기본 문법
for (변수명 in 객체) {
실행할 문장 또는 코드 블록
}
아래 예제는 for...in 루프를 활용하여 웹 브라우저의 navigator 객체가 가진 모든 속성 이름을 화면에 출력합니다.
예제 코드
<html>
<body>
<script>
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator) {
document.write(aProperty);
document.write("<br />");
}
document.write("Exiting from the loop!");
</script>
</body>
</html>
이 코드를 실행하면 navigator 객체 내부의 속성 이름들이 차례대로 출력되고, 마지막에 "Exiting from the loop!" 메시지가 표시됩니다.
for...of 루프란?
for...of 루프는 반복 가능한(iterable) 객체를 순회할 때 사용합니다. 여기서 반복 가능한 객체란 배열(Array), Map, Set, String, arguments 객체 등 [Symbol.iterator] 프로토콜을 구현한 모든 대상을 의미합니다.
for...in이 객체의 키(속성 이름)를 순회한다면, for...of는 실제 값(value)을 순회한다는 점이 핵심적인 차이입니다.
기본 문법
for (변수명 of 반복 가능한 객체) {
실행할 문장 또는 코드 블록
}
예제 코드
아래 예제는 for...of 루프를 사용하여 배열의 요소를 하나씩 가져와 1씩 증가시킨 후 출력합니다.
<!DOCTYPE html>
<html>
<body>
<script>
let itObj = [20, 30, 40, 50];
for (let res of itObj) {
res += 1;
document.write("<br>" + res);
}
</script>
</body>
</html>
실행 결과
21 31 41 51
정리: 언제 어떤 반복문을 사용해야 할까?
- for...in: 객체의 속성 이름(키)을 순회할 때 사용합니다. 단, 배열에 사용하면 인덱스뿐 아니라 추가된 속성까지 함께 순회할 수 있어 주의가 필요합니다.
- for...of: 배열, Map, Set 등 반복 가능한 객체의 값을 순회할 때 사용합니다. 배열 순회 시 for...in보다 안전하고 직관적입니다.
결론적으로, 객체의 키를 다룰 때는 for...in, 배열이나 이터러블의 값을 다룰 때는 for...of를 사용하는 것이 JavaScript의 모범적인 작성 방식입니다.