for in, for of 차이

for...in

• 객체의 key (배열의 경우 index)를 순회한다. 즉, 객체의 열거 가능한 속성들을 순회할 수 있도록 한다.
  • Object의 내장메소드인 keys를 사용할 수 있음.
• 반복시 prototype chain을 따라 확장 속성도 함께 순회한다.
• 순서가 보장되지 않으므로 반복문에서 순서가 중요한 경우에는 사용하지 않는 것이 좋다.
• 여기서 key (또는 index)는 문자열로, 연산이 불가능하다.

const arr = [1,2,3,4,5];
for(const key in arr){
    console.log(typeof key); //string
}
const obj = {
  a:1,
  b:2,
  c:3,
  d:4,
}
Object.prototype.foo = function(){
  console.log('works');
}
for(const key in obj){
    console.log(obj[key]);
}
//1, 2, 3, 4, ƒ(){console.log()}

for...of

• ES6 추가 문법
• for...in은 반복가능한 객체이면 모두 사용할 수 있지만, for...of는 [Symbol.iterator] 속성을 가지고 있어야한다는 점에서 다르다. 이러한 속성이 없다면, 다음과 같이 TypeError가 발생한다.
  • 즉, 객체에서는 사용할 수 없음.

const obj = {
  a:1,
  b:2,
  c:3,
  d:4,
}
for(const el of obj){
  console.log(el);
}
//Uncaught TypeError: obj is not iterable

reference

• https://stackoverflow.com/questions/29285897/what-is-the-difference-between-for-in-and-for-of-statements
• https://www.w3schools.com/jsref/jsref_forin.asp