자바스크립트 for... in과 for.. of의 차이점에 대하여

for.. in과 for...of 구문 모두 무언가를 순회할 때 사용합니다. 주된 차이점은 '순회 대상'입니다.

이 글은 for...of, MDN 일부를 번역한 것입니다.

for...in 구문은 객체의 열거 가능한 속성(enumerable properties)을 임의의 순서로 순회합니다. for...of 구문은 순회할 수 있는 객체의 값(values)을 순회합니다.

 

아래의 예시를 통해 Array에서 for..in반복문과 for...of 반복문이 사용될 때의 차이점을 살펴볼 수 있습니다.

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

const iterable = [3, 5, 7];
iterable.foo = 'hello';

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

for (const i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

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

위 코드를 하나씩 차례로 살펴보도록 하겠습니다.

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

const iterable = [3, 5, 7];
iterable.foo = 'hello';

먼저 첫 번째 부분입니다. 모든 객체는 Object.prototype.objCustom을 따라 objCustom 속성을 상속받으며, Array.prototype.arrCustom을 따라 Array인 모든 객체는 arrCustom 속성을 상속받습니다. iterable 객체는 상속과 프로토타입 체인을 따라 objCustom과 arrCustom 속성을 상속받습니다. 여기까지는 간단히 이해할 수 있습니다.

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

두 번째 부분입니다. 위 for.. in 반복문은 정의를 따라 iterable 객체의 열거 가능한 속성만을 임의의 순서로 출력합니다. 열거 가능한 속성이 아닌 3, 5, 7, hello 를 출력하지 않는 이유는 이들이 속성이 아니라 값이기 때문입니다.

for (const i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

세 번째 부분입니다. 이는 두 번째 부분과 유사하지만 열거 가능한 속성이 객체의 자체 속성인지를 판단하는 hasOwnProperty()를 사용하고 있습니다. 따라서, 0, 1, 2, foo는 자체 속성이기 때문에(상속이 아님) 출력되지만, 상속받은 arrCustom, objCustom은 출력되지 않습니다.

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

이제 마지막으로 for... of를 살펴볼 차례입니다. 이는 정의에 따라 iterable 객체의 속성이 아닌 값을 출력합니다. 따라서 객체의 요소인 3, 5, 7이 출력되었습니다.

 

이상으로 for..in 구문과 for...of 구문의 차이점에 대해 살펴봤습니다. 정리하자면, for...in 구문은 객체의 열거 가능한 속성을 임의의 순서로 순회하며, for...of 구문은 순회할 수 있는 객체의 값을 순회합니다.