Javascript - for...in/ for..of 차이

※ 본 게시물은 초보 개발자가 작성하는 글이므로 다소 잘못된 부분이 있을 수 있습니다. 수정이 필요한 부분은 댓글 부탁드립니다. ^^

 

 

➰결론

for...in 구문은 객체의 모든 열거가능한 속성에 대해 반복합니다. 
for...of 구문은 컬렉션 전용입니다. 모든 객체보다는, [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.

 

 

 

 

for...in

•  Iterable object이면 모두 대상으로 함
•  객체의 모든 열거 가능한 속성에 대해 반복
•  key를 리턴 (배열의 경우에는 index)

 

for...of

• [Symbol.iterator] 속성을 가지는 컬렉션을 대상으로 함
• Array, Map, Set, String, TypedArray, arguments 등
• value를 리턴

 

 

 

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

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

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

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

* 코드 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of