1. 설명

for of

반복가능한 객체를 반복하고 개별 속성 값을 호출한다.
배열의 반복

for in

열거 가능한 속성과 객체에서 문자열로 키가 지정된 모른 열거 가능한 속성을 반복
객체의 반복
객체의 모든 프로퍼티를 순회하며 열거

2. 구문

for of

for (variable of iterable) {
      statement
    }

• variable : 반복되어 열거되는 속성값
• iterable : 반복되어 열거가능한 속성값이 있는 객체

for in

for (const variable in object) {
  statement
}

• variable - 반복마다 속성 이름이 변수로 지정
• iterable - 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체

3. 예시

for of

1. 배열의 반복

let iterable = [10, 20, 30];

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

for in 일때

let iterable = [10, 20, 30];

for (let value in iterable) {
  console.log(value); //0, 1, 2
}

반복되는 순서는 구현에 따라 다르기 때문에, 배열의 반복이 일관된 순서로 요소를 방문하지 못할 수도 있기 때문에 for 사용 권장.

2. 문자열 반복

let iterable = "boo";

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

for in

키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용

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"

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

https://velog.io/@onea/JS-for-...of%EC%99%80-for-...in%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://developerntraveler.tistory.com/122

https://pks2974.medium.com/javascript%EC%99%80-iterator-cdee90b11c0f