[JS] for...in, for...of 의 차이점?????

for...in ?

• for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다.
• 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것
• 객체의 반복을 위해 만들어졌지만 배열의 반복을 위해서는 추천되지 않음
• 객체의 속성을 확인할 수 있기에 실질적으로 디버깅을 위해 사용될 수 있음

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

for (var item in obj) {
  console.log(item) // a, b, c
}

var arr = [1, 2, 3];

for (var item in arr) {
  console.log(item) // 0, 1, 2
}

• for...in 문에 객체가 아닌 배열을 넣었을 경우??
  • JavaScript 에서 배열도 Object 타입으로 인식 하기 때문에 결과가 나온다.
  • 다만! 일치하는 값은 아니고 해당 배열의 index가 출력되는 걸 확인할 수 있다.

 

for...of ??

• for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypeArray, arguments 객체 등) 에 대해서 반복하고 각 개별 속성 값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

var arr = [1, 2, 3];

for (var item of arr) {
  console.log(item); // 1, 2, 3
}

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

for (var item of obj) {
    console.log(item);
}

//Uncaught TypeError: obj is not iterable

• 배열을 순환 할때 배열이 아닌 객체에 사용한다면??
  • Uncaught TypeError: obj is not iterable 반복 불가능하다는 TypeError를 뱉어낸다.

 

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

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
}

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