for...in

for...in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)

배열의 반복과 for...in

배열 인덱스는 정수 이름을 가진 열거 가능한 속성이며 그 외에는 일반 개체 속성과 동일합니다. for...in 루프는 다른 키를 순회하기 전에 모든 정수 키를 순회하며 엄격한 증가 순서로 for...in의 동작을 일반 배열 반복에 가깝게 만듭니다. 그러나 for...in 루프는 정수가 아닌 이름을 가진 속성과 상속된 속성을 포함하여 열거 가능한 모든 속성을 반환합니다. for...of와 달리 for...in은 배열의 반복자 대신 속성 열거를 사용합니다. 희소 배열에서 for...of는 빈 슬롯을 방문하지만 for...in은 방문하지 않습니다.

for...in의 사용

아래의 예는 열거 가능한 non-Symbol속성들을 반복해서 속성의 이름과 그 값을 기록합니다.

var 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

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

Array에서의 반복

let iterable = [10, 20, 30];

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

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

String에서의 반복

let iterable = "boo";

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

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

for...of와 for...in의 차이

for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다.

for...of 구문은 컬렉션 전용입니다. 모든 객체보다는, [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.

다음 예는 for...of 루프와 for...in 루프의 차이를 보여줍니다.

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

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

for (let i in iterable) {
  console.log(i); //  0, 1, 2, "foo", "arrCustom", "objCustom"
}

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