[TypeScript] For..of 와 For..in 의 차이

TypeScript에서 "for...of"와 "for...in" 루프는 서로 다른 목적으로 사용됩니다.

for...of

for...of 문은 반복 가능한 객체(예: 배열, 문자열, 맵, 세트 등)를 순회하며 그 값들을 반복합니다. for...of는 ES6에 도입되었으며, 주로 배열의 값에 접근할 때 사용됩니다. 배열, 문자열 같은 컬렉션의 요소를 순서대로 순회하고 싶을 때 사용하면 좋습니다.

let array = [10, 20, 30];

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

for...in

for...in 문은 객체의 모든 열거 가능한 속성의 키(프로퍼티 이름)를 순회합니다. 이 루프는 객체의 프로퍼티를 열거할 때 사용됩니다. 따라서 객체의 키에 접근하고 싶을 때 사용합니다. 배열의 경우 인덱스를 문자열로 반환하므로 for...in을 사용할 때는 주의해야 합니다. 배열에 사용하면 예상치 못한 결과를 얻을 수 있으며, 배열의 프로토타입 체인까지 순회할 수 있습니다.

let obj = { a: 10, b: 20, c: 30 };

for (let prop in obj) {
    console.log(prop); // 'a', 'b', 'c'
}

주의할 점

for...in 루프는 객체의 프로토타입 체인까지 순회할 수 있기 때문에, 객체 자체의 속성인지 확인하기 위해 hasOwnProperty를 사용하여 체크하는 것이 좋습니다.

for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        console.log(prop); // 'a', 'b', 'c'
    }
}

요약하자면, for...of는 값의 순회에, for...in은 객체의 속성 키의 순회에 각각 적합하며 사용 시 그 차이를 이해하고 주의해야 합니다.

DolphaGo / TIL

[TypeScript] For..of 와 For..in 의 차이 #130

for...of

for...in