For ... in 과 For ... of 반복문

for ... in

객체의 열거 가능한 속성을 반복하는데 사용됩니다.

• 객체의 프로퍼티를 열거하며 프로퍼티의 이름 또는 키를 반환합니다.
• 객체의 프로토타입 체인까지 열거할 수 있다고 합니다.
  
  • Object.prototype.customObj = function() {}
• 배열에도 사용할 수 있지만, 배열의 인덱스가 아닌 배열 요소의 키를 반환합니다.

Object.prototype.customFn = function() {};
const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key); // "a", "b", "c", "customFn" 출력
}

const arr = [1, 2, 3];

for (const index in arr) {
  console.log(index); // "0", "1", "2", "customFn" 출력
}

for ... of

배열과 같은 iterable 객체를 반복하는데 사용됩니다.

• 배열의 요소 값을 반환하므로 반복 과정이 간단하고 직관적입니다.
• 객체의 프로퍼티를 열거할 때는 사용할 수 없습니다

const arr = [1, 2, 3];
for (const element of arr) {
  console.log(element); // 1, 2, 3 출력
}

const obj = { a: 1, b: 2, c: 3 };
for (const value of obj) {
  // 에러 발생: obj는 iterable이 아님
}