[JS] 자바스크립트 반복문 for...in과 for...of

결론부터 간단히 말하자면
`for...in`은 객체 key를 순회하는 반복문이고,
`for...of`는 배열 요소를 순회할 때 주로 사용하는 반복문이다.

for ... in

/* for ... in */

const obj = {
  name = "mankkong",
  age = 50,
  gender = 'F',
};

for(const key in obj){
  console.log(obj[key]);
} // --> mankkong 50 F


/* for .. in으로 배열을 순회하면 저장된 데이터가 아니라 정수 인덱스가 출력됨 */
const arr = ['a', 'b', 'c', 'd']
for(const elem in arr){
  console.log(elem);
} // --> 0 1 2 3

`for...in` 반복문은 열거 가능한 객체의 모든 non-symbol 속성을 순회하는 문법이다.
symbol 속성? → 2023.07.18 - [프로그래밍 언어/Javascript] - [JS] 심볼(Symbol)이란?

배열 역시 Array 객체에 속하기 때문에 for...in 문을 사용할 수 없는 것은 아니지만,
for..in 문은 임의의 순서로 객체의 속성들을 순회하며, 일정한 반복 순서를 보장하지 않기 때문에 정수 인덱스가 곧 프로퍼티 키이자 인덱스 접근 순서가 중요한 의미를 갖는 배열의 반복에는 사용하지 않는다.

그러므로 방문 순서가 중요한 배열을 반복 순회할 때는 숫자 인덱스를 사용할 수 있는 for 반복문이나 Array 메소드 `forEach()`, `for...of` 반복문 등의 사용이 권장된다.

for ... of

/* for ... of */

const arr = ['a', 'b', 'c', 'd'];

for(const elem of arr){
  console.log(elem);
}

// --> a b c d

`for..of` 반복문은 iterator 속성을 가지는 반복 가능한 객체에 대해서 개별 속성값을 순회하는 문법이다.

따라서 Array, Map, Set, String 등의 iterable 객체에 적용이 가능하며, iterable 프로토콜이 구현되지 않은 object는 for...of로 반복 순회가 불가하다.
iterator 기본 개념 → 2023.09.18 - [프로그래밍 언어/Python] - [Python] iterator(반복자)란? - itertools를 이용한 효율적인 데이터 순회 방법
자바스크립트 iteration protocol → 추후 공부 예정^^

let obj = {
  0: 1,
  1: 2,
  'h': 'j',
};


/* for...in : 열거 가능한 모든 객체 프로퍼티 키 반환 */
for (let i in obj) {
  console.log(i);
} // --> 0 1 h


/* not iterable object */
for (let i of obj) {
  console.log(i);
} // --> Uncaught TypeError: obj is not iterable


/* 이 경우, Object.keys(), Object.entries() 메소드로 배열을 받아와서 for...of로 순회 가능 */
for (let i of Object.keys(obj)) {
  console.log(i);
} // --> 0 1 h

for (const [key, val] of Object.entries(obj)) {
  console.log(val);
} // --> 1 2 j

for...in - JavaScript | MDN

for...of - JavaScript | MDN

Iteration protocols - JavaScript | MDN