자바스크립트 반복문: for in, for of, foreach

DC

2023년 8월 15일 • 5 min read

javascript

서론

자바스크립트는 다양한 반복문을 지원하며, 그 중 for-in과 for-of를 보실 수 있는데요. 오늘은 이 두 반복문의 특징과 차이점에 대해 자세히 알아보겠습니다. 복잡하게 느껴질 수 있는 이 개념을 단순하게 이해하는 데 도움을 주기 위해, 예제 코드를 통해 쉽게 설명하겠습니다. 그럼 시작해볼까요? 🚀

1. 반복문의 기본: foreach

먼저, 반복문의 기본 중 하나인 foreach를 살펴보겠습니다.

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});
// 출력 결과: item1, item2, item3

foreach는 배열의 요소들을 반복하여 작업을 수행하는 메서드입니다. 주로 배열에서 사용되지만 ES6부터는 Map, Set 등에서도 사용될 수 있습니다.

2. for-in 반복문

이제 for-in 반복문을 알아보겠습니다.

var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

2.1. for-in의 특징

객체의 모든 열거 가능한 속성에 대해 반복합니다.
객체의 key 값에만 접근할 수 있으며, value 값에 접근하려면 추가적인 방법이 필요합니다.
[[Enumerable]] 속성이 true로 설정된 속성만 반복할 수 있습니다. 즉, 비열거형 속성은 반복되지 않습니다.

3. for-of 반복문

다음으로, for-of 반복문에 대해 알아보겠습니다.

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

3.1. for-of의 특징

ES6에서 추가된 새로운 반복문입니다.
컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 사용할 수 있습니다.

4. for-in과 for-of의 차이점

마지막으로, 이 두 반복문의 주요 차이점을 살펴보겠습니다.

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}

for-in: 객체의 모든 열거 가능한 속성에 대해 반복합니다.
for-of: [Symbol.iterator] 속성을 가지는 컬렉션 전용입니다.

마치며

이로써, for-in과 for-of에 대한 기본적인 이해를 마치게 되었습니다. 두 반복문은 각각의 특징이 있으므로 상황에 맞게 적절히 사용하시길 바랍니다. 기능적인 차이를 알고 적재적소에 활용하면 여러분의 코드는 더욱 효율적이고 깔끔해질 것입니다!