🖇for...of 와 for...in 차이, for...of 사용권장

for...in / for...of

for...in 은 모든 객체의 열거가능한 속성에 대해 반복, 키에 접근한다.

for...of 는 모든 객체가 아닌 컬렉션 전용!
[Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다. 값을 반환한다.

---

Symbol

"심볼" 데이터 형식은 값으로 익명의 객체 속성(object property)을 만들 수 있는 특성을 가진 원시 데이터 형식(primitive data type). 이 데이터 형식은 클래스나 객체 형식(object type)의 내부에서만 접근할 수 있도록 전용(private) 객체 속성의 키(key)로 사용됩니다.

Symbol.iterator

Symbol.iterator 심볼은 객체에 대응하는 기본 이터레이터를 지정합니다. 객체가 반환될 필요가 있을때는 언제든지@@iterator 메서드는 인수 없이도 호출 할 수 있습니다. 반환된 iterator는 반복할 값을 취득하기 위해 사용됩니다.

@@iterator 메서드를 가지고 있는 내장형 타입
Array.prototype@@iterator
TypedArray.prototype@@iterator
String.prototype@@iterator (en-US)
Map.prototype@@iterator (en-US)
Set.prototype@@iterator (en-US)

---

컬렉션 요소 순환 비교하기

• array 순환
  : for...of 는 iterator로 지정된 키값만 탐색하고 키에 해당하는 값을 반환했다. 추후에 추가된 type키를 확인하지 않는다.
  : for...in은 모든 키값을 순환했다.

const array = [1,2,3]
array.type = 'arr'
array //[1, 2, 3, type: 'arr']

for(let el of array){
    console.log(el)
}
// 1, 2, 3

for(let el in array){
    console.log(el)
}
// 0, 1, 2, type

• string 순환

const string = 'string'
for (let value of string){
    console.log(value)
}
//s t r i n g

for(let key in string){
  console.log(string[key])
}
//s t r i n g

• map 순환
  : map이 key:value형태로서 for...of문으로 순회할 때 key, value로 나누어 조회가능하다.
  내부 키가 존재하지 않아 for...in으로 조회가 불가능하다.

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

• set 순환
  값 자체를 저장하는 set, for...of 문 조회시 값 자체를 반환. 내부 키가 존재하지 않아 for...in으로 조회가 불가능하다.

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

---

for...in 을 사용하는 경우?

for...in은 모든 객체를 탐색할 수 있는 편함이 있지만, 위처럼 콜렉션 요소들에서는 불가능하고 배열에서 정수아닌(예시의 - 0,1,2) 이름의 속성(예시 - type)을 반환하게 되면서 조차 순서를 보장하지 않기 때문에 순서가 중요한 배열을 순환할 때는 for반복문이나 forEach, map, for...of를 사용하는 것이 권장된다.

for...in은 쉽게 객체 속성에 접근할 수 있기 때문에 실제로는 디버깅용으로 사용하는 것이 권장된다. 결국 사용하지 말라는 이야기 ^_^?
객체탐색을 할 땐 객체자체를 순환하기보다 Object.keys(obj) 방식처럼 배열로 변경하여 순환하는 것이 좋다.

---

참고링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in#%EC%84%A4%EB%AA%85