for... in, for... of - 자바스크립트

기본 for문과 마찬가지로 for...in과 for...of은 모두 반복문입니다. 그러나 각각의 반복문은 다른 형태의 데이터를 반복하는 데 사용됩니다.

for...in 반복문은 객체의 속성을 반복하는 데 사용됩니다. 이 반복문은 객체의 속성 이름을 반복하며, 각각의 속성에 대한 값을 얻으려면 해당 속성 이름을 사용하여 객체에 접근해야 합니다.

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

for (let prop in obj) {
  console.log(prop); // "a", "b", "c"
  console.log(obj[prop]); // 1, 2, 3
}

for...in 반복문은 객체의 속성을 반복하는 데 사용되지만, 배열에서도 사용이 가능합니다. 그러나 배열에서 for...in 반복문을 사용할 때는 몇 가지 주의해야 할 점이 있습니다.

배열에서 for...in 반복문을 사용하면 배열의 인덱스를 반복하게 됩니다. 따라서 해당 인덱스로 배열 요소에 접근하여 값을 가져올 수 있습니다.

const arr = ["apple", "banana", "orange"];

for (let index in arr) {
  console.log(index); // 0, 1, 2
  console.log(arr[index]); // "apple", "banana", "orange"
}

그러나 for...in 반복문을 사용할 때는 몇 가지 주의할 점이 있습니다.

for...in 반복문은 객체의 모든 속성을 반복하므로, 상속받은 속성도 반복될 수 있습니다.
배열에서 for...in 반복문을 사용하면, 배열의 요소가 아닌 인덱스가 반복되므로, 배열 내장 메서드를 사용할 때 문제가 발생할 수 있습니다. 예를 들어, Array.prototype.map() 메서드는 배열의 요소에 대해서만 작동하므로, for...in 반복문으로 인해 문제가 발생할 수 있습니다.

for...of 반복문은 배열, 문자열, 맵, 셋과 같은 iterable 객체의 요소를 반복하는 데 사용됩니다. 이 반복문은 객체의 값을 직접 반복하며, 객체의 키 또는 인덱스를 사용하지 않습니다.

const arr = [1, 2, 3];

for (let val of arr) {
  console.log(val); // 1, 2, 3
}

for...of 반복문은 배열의 요소를 직접 반복하므로, for...in 반복문과는 달리 프로토타입 체인 상의 속성이나 기타 속성들을 무시합니다. 또한, for...of 반복문은 iterable 객체에서만 작동하며, 객체의 속성을 반복하는 데는 사용할 수 없습니다.

객체의 속성을 반복할 때는 for...in 반복문을 사용하고, iterable 객체의 요소를 반복할 때는 for...of 반복문을 사용하는 것이 좋습니다.