for ... in

• 객체의 열거할 수 있는 속성들을 순회하여 프로퍼티의 key 값에 접근한다.

열거 가능한 프로퍼티란?
열거 가능한 값이 true로 설정되어 있어 key만 반복할 수 있고 비열거형인 value에는 접근할 수 없다.

let arr = ["a", "b", "c"];
for (let i in arr) {
	console.log(i);
	}
// 0 1 2

var obj = { a: 1, b: 2, c: 3 }; 
for (var j in obj) { 
	console.log(j); 
} 
// a, b, c

for ... in 문에서는 순서에 따라 index를 반환하지 않을 수 있기 때문에 index 순서가 중요한 경우는 사용하지 않는 것이 좋다.
⚠️ length 연산자를 사용할 수 없다.

for ... of

• Iterable한 객체 (Array, Map, Set, String, TypedArray, arguments ... )에 대해 속성값 value를 반복 순회한다.

일반 객체는 iterable하지 않기 때문에 for of 사용시 TypeError가 발생한다!

일반 객체에서는 TypeError 발생!

let obj = ["sypaik", "developer"];
for (let value of obj) {
	console.log(value);
	}
// 'sypaik', 'developer'

이와 같이 배열에서는 for ... of 반복문을 사용하는 것이 좋다.

for ... in문 vs for ... of문

for ... in문

• 객체의 모든 열거 가능한 속성에 대해서 반복한다
• Iterable object라면 모두 대상으로 할 수 있다 (배열 포함)
• key를 리턴한다 (배열의 경우, index 리턴)

  💡 for ... in문은 언제 사용하나?
  키-값 쌍의 데이터의 경우 | 특정 값을 가진 key가 있는지 확인하려는 경우 | 객체에 key를 가져오는 작업이 필요한 경우

for ... of문

• Symbol.iterator 속성을 가지는 collection만 대상으로 한다.
• Iterable object이지만, prototype chain에 의한 Iterable은 제외
  (Array, Map, Set, String ...)
• value를 리턴한다

따라서! for ... in은 객체(Object)의 key를 순회하고, for ... of는 객체의 value를 순회할 때 사용한다.

Reference
https://joooing.tistory.com/entry/Iteration2-for-in%EB%AC%B8-for-of%EB%AC%B8
https://whoyoung90.tistory.com/24