JavaScript - for ...of, for ...in 차이

- for ...of 와 for ...in의 차이

• for ...in 루프는 객체의 모든 열거가능한 속성에 대해 반복
• for ...of 구문은 컬렉션 전용. 모든 객체보다는 [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복

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

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

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

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

 

- for ...in의 특성

• for ...in 반복문은 모든 프로퍼티를 대상으로 순회한다. 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함
  • 배열과 유사한 형태를 보이는 '유사 배열(array-like)' 객체에는 배열과 달리 키가 숫자형이 아닌 프로퍼티와 메소드가 존재
  • 유사 배열 객체와 for ...in을 함께 사용하면 이 모든 것을 대상으로 순회
  • 따라서 필요 없는 프로퍼티들이 문제를 일으킬 가능성 발생
    
    
• for ..in 반복문은 배열이 아니라 객체와 함께 사용할 때 최적화되어 있어서 배열에 사용하면 객체에 사용하는 것 대비 10~100배 느림

=> 위와 같은 특징을 지니기 때문에 배열에 for ...in을 사용하면 문제가 발생하므로 되도록 다른 반복문 사용 권장

 

---

[ 참고 자료 ]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of#for...of%EC%99%80_for...in%EC%9D%98_%EC%B0%A8%EC%9D%B4

for...of - JavaScript | MDN

https://ko.javascript.info/array#ref-730

배열