241121 TIL - for...in과 for...of 그리고 둘의 차이

for...in

객체에서 key가 문자형인 모든 열거가능한 속성에 대해 반복

• 반복 시 각 속성이 나열된 순서대로 접근하는 것이 아니기 때문에, 순서가 중요한 배열엔 다른 반복문을 사용하는 편이 좋음
• 임의의 순서로 반복하기 때문에 도중에 속성을 추가, 수정, 삭제하지 않는 게 좋음. 추가된 속성에 접근하지 않거나, 수정된 속성의 이전 형태를 참조하거나 할 수 있기 때문
• 쉽게 객체의 속성들을 확인할 수 있기 때문에, 특정 값을 가진 key가 있는지 확인하는 디버깅 등에서 활용하기 좋음

for (const variable in object) {
  statement;
}

variable : 접근한 key값이 매개변수에 들어감

 

 

for...of

반복가능한 객체에 대해 반복

• 반복가능한 객체엔 Array, Map, Set, String 등이 있음

for (variable of iterable) {
  statement;
}

variable : 접근한 value값이 매개변수에 들어감

 

 

둘의 직관적인 차이

let iterable = [3, 5, 7];

/* for...in은 key에 접근하니 index를 뱉고 */
for (let i in iterable) {
  console.log(i); // logs 0, 1, 2
}
/* for...of는 value에 접근하니 value를 뱉음 */
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}