이 블로그는 JavaScript에서 'for...in' 및 'for...of' 루프를 사용하는 경우를 요약합니다.

차이점

'for...in' 루프는 객체에 사용됩니다. 'for...of' 루프는 배열 및 문자열과 같은 데이터 구조에 사용됩니다.

배열 및 문자열과 함께 for 루프를 사용할 수 있습니다. 그러나 JavaScriptMDN에 따라 for of 루프는 인덱스를 숫자로 반환하므로 문자열 및 배열에 선호되는 반면 for in 루프는 인덱스를 문자열로 반환합니다.

기억하는 방법?

for in 루프를 객체 내부에 있다고 생각하십시오. 객체에는 순서가 없기 때문에 모든 항목은 그 안에 함께 연결되어 있습니다. 그것은 모든 항목을 포함하는 지갑과 같습니다. 주문하지 않고 모든 것이 내부에 있습니다.

배열과 문자열에는 순서가 있으므로 for of 루프는 배열이나 문자열의 모든 항목에서처럼 생각하십시오. 장(색인)이 있는 책(배열)을 읽고 있다면 현재 "책에서 30장 중 3장을 읽고 있는 중"이라고 말할 수 있습니다. 따라서 '배열의 X 인덱스용'이라고 생각하세요.

...에 대한

For...in 루프는 객체를 반복합니다.

MDN Web Doc에서:

for (const variable in object) {
  statement
}

예

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// "a: 1"
// "b: 2"
// "c: 3"

const obj = { a: 1, b: 2, c: 3 };
for (var i in obj) {
  console.log(i);
}

// "a"
// "b"
// "c"

...의

For...of 루프는 배열 또는 문자열을 반복합니다.

MDN Web Doc에서:

for (variable of iterable) {
  statement
}

예

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// "a"
// "b"
// "c"

const string = 'boo';

for (const value of string) {
  console.log(value);
}
// "b"
// "o"
// "o"