for...in, for...of 정리

for...in이란?

상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복

for (variable in object) { ... }

• variahble : 반복할 속성 변수
• object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

특징

1. 임의의 순서로 객체의 속성들에 대해 반복
2. 인덱스의 순서가 중요한 Array에서 반복을 위해 사용할 수 없음
3. 쉽게 객체의 속성을 확인할 수 있어서 사용

사용 예제

cosnt obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

---

for...of란?

반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성

for (variable in iterable) { ... }

• variahble : 반복할 속성 변수
• iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체

특징

Array에 대해 반복

• 블록 내부변수를 수정하지 않는 경우 let 대신 const도 사용할 수 있다

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

String에 대해 반복

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

TypedArray에 대해 반복

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

Map에 대해 반복

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에 대해 반복

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

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

---

for...in, for...of의 차이

for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복
for...of는 객체보다는 [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복

차이를 보여주는 예시

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
// 프로토타입 체인으로부터 상속받은 속성들에 대해 반복

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}